iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
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
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>
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.
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?
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
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname