highlight a row in dropdown list

6 replies. Last post: November 15, 2010 10:03 PM by Glenn Layaar
Tags :

Hi,


we have the following issue:

using a webcombo we need to highlight a row into the dropdwon panel where we have more rows, and after this highlight the dropdown list must still be opened and also the value in the combo has not to be selected, we need only highlight a row in the dropdown list.

We have not found any methods to do that, for us this issue it is very important.

We are also available to develop the necessary method by us, anyway in this case we need your help, tell us any way to achieve our target, otherwise we will have to consider to not use your component.



Thanks,


Vincenzo Angeloni

Answers

Unfortunately, Intersoft WebCombo has not implement such feature.

Based on what I read in your post, have you considered using WebListBox instead of WebCombo? WebListBox is one of control available in the WebEssentials.

Unfortunately, such behavior is not available in WebCombo. However, using a workaround by buffering the highlighted row periodically during OnShowDropDown and setting the WebCombo value during OnKeyDown event handler based on the buffer highlighted row we could achieve such scenario. Here is the event handler snippet:

<script type="text/javascript" language="javascript">
var intervalObj = null;
var highlightRow = null;

function WebCombo1_OnShowDropDown(controlId, left, top, width, height) {
var combo = ISGetObject(controlId);

setTimeout(function () {
var contElem = combo.ResultBox.document.documentElement;

if (!IS.ie)
contElem = combo.ResultBox.document.body._e;

var rows = contElem.getElementsByTagName("tr");

if (combo.GetSelectedRow() != null) {
for (var i = 0; i < rows.length; i++) {
rows[i].className = "WC4-Row-N";

}

combo.GetSelectedRow().className = "WC4-SR";
combo.GetSelectedRow().nextSibling.className = "WC4-SR";
combo.GetSelectedRow().nextSibling.nextSibling.className = "WC4-SR";
}
else {
if (rows.length > 2) {
rows[0].className = "WC4-SR";
rows[1].className = "WC4-SR";
rows[2].className = "WC4-SR";
}
}

intervalObj = setInterval(function () {
if (combo.ResultBox) {
var contElem = combo.ResultBox.document.documentElement;

if (!IS.ie)
contElem = combo.ResultBox.document.body._e;

var rows = contElem.getElementsByTagName("tr");

for (var i = 0; i < rows.length; i++) {
if (rows[i].className == "WC4-Row-O") {
highlightRow = rows[i];
break;
}
}
}
else {
clearInterval(intervalObj);
intervalObj = null;
}
}, 50);

}, 15);
}

function WebCombo1_OnKeyDown(controlId, keyValue) {

var combo = ISGetObject("WebCombo1");

if (keyValue == 13 || keyValue == 9) {
setTimeout(function () {
combo.SetText(highlightRow.childNodes[0].innerText);
}, 15);
}
}
</script>


All Replies

Unfortunately, Intersoft WebCombo has not implement such feature.

Based on what I read in your post, have you considered using WebListBox instead of WebCombo? WebListBox is one of control available in the WebEssentials.

Based on further correspondence in the email, it seems you are trying to programatically set the selected row style to other row in the dropdown result box.

If that is the case, you could modify the row style to have the same css class with the selected row style during OnShowDropDown client side event handler. Here is a simple snippet to highlight the next 2 row below the selected row:

function WebCombo1_OnShowDropDown(controlId, left, top, width, height) {
var combo = ISGetObject(controlId);

if (combo.GetSelectedRow() != null) {
combo.GetSelectedRow().nextSibling.className = combo.GetSelectedRow().className;
combo.GetSelectedRow().nextSibling.nextSibling.className = combo.GetSelectedRow().className;
}
}

However, based on my test if the dropdown result box is scrollable and you scroll using the mouse scroll the selection will revert back to a single selection. 

Hi,

 

we have tried your solution but anyway it does not work because when the event is fired our combo is not selected, so the combo.GetSeletedRow() returns null.

 

We also tried to see use the method combo.GetRows() in the event handler code anyway the returned array is empty.

 

Could you provide us a complete example?

 

 

Thanks,

 

Vince

If you would like to highlight a row initially, you will need to get the HTML element of the row and set the className to the hightlighted style. Here is the update snippet if initially you wish to hightlight the first 3 row:

function WebCombo1_OnShowDropDown(controlId, left, top, width, height) {
var combo = ISGetObject(controlId);

if (combo.GetSelectedRow() != null) {
combo.GetSelectedRow().nextSibling.className = combo.GetSelectedRow().className;
combo.GetSelectedRow().nextSibling.nextSibling.className = combo.GetSelectedRow().className;
}
else {
setTimeout(function () {
var contElem = combo.ResultBox.document.documentElement;

if (!IS.ie)
contElem = combo.ResultBox.document.body._e;

var rows = contElem.getElementsByTagName("tr");

if (rows.length > 2) {
rows[0].className = "WC4-SR";
rows[1].className = "WC4-SR";
rows[2].className = "WC4-SR";
}

}, 15);
}
}

I am using the BindObject.aspx provided sample for my test page.

Hi Glenn,

thanks for you example.

the code that you have provided in the 'else' in the setTimeout function works about the hightlighted style but if I have hightlighted only one element and click ENTER or TAB by keyboard, the element  isn't put as combo value, it is occur only if I click it by MOUSE.

I have add another code in the method from you provided ?

 

thanks in advanced

Fabrizio

Unfortunately, such behavior is not available in WebCombo. However, using a workaround by buffering the highlighted row periodically during OnShowDropDown and setting the WebCombo value during OnKeyDown event handler based on the buffer highlighted row we could achieve such scenario. Here is the event handler snippet:

<script type="text/javascript" language="javascript">
var intervalObj = null;
var highlightRow = null;

function WebCombo1_OnShowDropDown(controlId, left, top, width, height) {
var combo = ISGetObject(controlId);

setTimeout(function () {
var contElem = combo.ResultBox.document.documentElement;

if (!IS.ie)
contElem = combo.ResultBox.document.body._e;

var rows = contElem.getElementsByTagName("tr");

if (combo.GetSelectedRow() != null) {
for (var i = 0; i < rows.length; i++) {
rows[i].className = "WC4-Row-N";

}

combo.GetSelectedRow().className = "WC4-SR";
combo.GetSelectedRow().nextSibling.className = "WC4-SR";
combo.GetSelectedRow().nextSibling.nextSibling.className = "WC4-SR";
}
else {
if (rows.length > 2) {
rows[0].className = "WC4-SR";
rows[1].className = "WC4-SR";
rows[2].className = "WC4-SR";
}
}

intervalObj = setInterval(function () {
if (combo.ResultBox) {
var contElem = combo.ResultBox.document.documentElement;

if (!IS.ie)
contElem = combo.ResultBox.document.body._e;

var rows = contElem.getElementsByTagName("tr");

for (var i = 0; i < rows.length; i++) {
if (rows[i].className == "WC4-Row-O") {
highlightRow = rows[i];
break;
}
}
}
else {
clearInterval(intervalObj);
intervalObj = null;
}
}, 50);

}, 15);
}

function WebCombo1_OnKeyDown(controlId, keyValue) {

var combo = ISGetObject("WebCombo1");

if (keyValue == 13 || keyValue == 9) {
setTimeout(function () {
combo.SetText(highlightRow.childNodes[0].innerText);
}, 15);
}
}
</script>


All times are GMT -5. The time now is 9:04 AM.
Previous Next