Custom FlexGridSearch

Posted by: son on 30 September 2020, 2:21 pm EST

  • Posted 30 September 2020, 2:21 pm EST

    I am using the FlexGrid control in ASP.NET MVC with the Filterable feature
    Now, I want to use the FlexGridSearch control into FlexGrid with the need:

    1. Only highlight text match, not filter data
    When entering the search bar, the data in the flexgrid will be highlighted text match BUT do not filter data on the grid
    (That is, the number of data rows does not change)

    2. Highlight text match on a specific column
    I have a dropdown to choose which column to search, so only highlight the correct selected column

    3. Search text in row detail that is being collapse.
    When entering the search bar, the grid will automatically expand row detail with text match and highlight it

  • Replied 4 October 2020, 10:39 pm EST

    For the above questions, we need to override the input of the Search Element and use formatItem to highlight the text.
    Please use the following code snippet for reference:
    c1.documentReady(function (e) {
    var search = wijmo.Control.getControl("#theSearch");
    var column = "Last";
    search.grid.formatItem.addHandler(function (s,e) {
    if (e.panel.cellType == 1 && s.columns[e.col].binding == column) {
    //logic to highlight text
    e.cell.innerHTML = .replace(search.text, "<span class='wj-state-match'>" + search.text + "</span>");
    search.inputElement.addEventListener("input", function (e) {
    setTimeout(function () {
    }, search.delay);

    Manish Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels