Custom FlexGridSearch

Custom FlexGridSearch

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

• 

  son

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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

  Thanks
  
  SN

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 4 October 2020, 10:39 pm EST

  Hello,
  
  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:

  <script>
      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) {
              e.preventDefault();
              e.stopImmediatePropagation();
              e.stopPropagation();
              setTimeout(function () {
                  search.grid.invalidate();
              }, search.delay);
          },true);
      })
  </script>
  

  Regards,
  
  Manish Gupta