The example illustrates how to create a dropdown with grouped items.
The implementation uses the nested grid's ApplySearchPanelFilter method to filter and search the data columns. The method is executed in the client-side OnKeyPress event of the GridLookup to simulate incremental filtering. Use the client-side ASPxClientUtils.GetKeyCode method to get the key pressed. To prevent multiple callback requests when keys are pressed in succession, use JavaScript's setTimeout and clearTimeout methods. Please note that the Enter key and Arrow keys will send a callback request when they are pressed in the OnKeyPress event. In this case, check for the key pressed in the event and prevent filtering to avoid sending callback requests.
var timeout = 0;
function OnKeyPress(s, e) {
var keyCode = ASPxClientUtils.GetKeyCode(e.htmlEvent);
if (keyCode == 13)
return;
s.ShowDropDown();
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function () {
var filter = s.GetInputElement().value;
if (keyCode == 37 || keyCode == 38 || keyCode == 39 || keyCode == 40) {
return;
}
s.GetGridView().ApplySearchPanelFilter(filter)
}, 500);
}The nested GridView may not look visually pleasing. In this case, apply custom CSS classes to make it look like a standard dropdown.
.groupRow {
font-weight: bold;
color: black;
background-color: lightgreen;
}
.dataRow td.dxgvIndentCell {
display: none;
} .groupRow {
font-weight: bold;
color: black;
background-color: lightgreen;
}