Grid Lookup for ASP.NET Web Forms - How to create a dropdown with grouped items

The example demonstrates how to create a dropdown with grouped items.

Implementation Details

In this example, the client ASPxClientGridLookup.KeyPress event is handled to implement incremental filtering. The event handler uses the nested grid's ApplySearchPanelFilter method to filter data columns.

To prevent multiple callback requests when keys are pressed in succession, setTimeout and clearTimeout methods are used.

The Enter key and Arrow keys send a callback request when they are pressed in the KeyPress event. Call the ASPxClientUtils.GetKeyCode method to get the key that was pressed and prevent filtering when these keys are pressed 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);
}

Apply custom CSS classes to make the grid look like a standard dropdown.

Single column implementation:

.groupRow {
    font-weight: bold;
    color: black;
    background-color: lightgreen;
}

.dataRow td.dxgvIndentCell {
    display: none;
}

Multi-column implementation:

.groupRow {
   font-weight: bold;
    color: black;
    background-color: lightgreen;
}

Files to Review

• SingleColumn.aspx (VB: SingleColumn.aspx)
• SingleColumn.cs (VB: SingleColumn.vb)
• MultiColumn.aspx (VB: MultiColumn.aspx)
• MultiColumn.cs (VB: MultiColumn.vb)

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)