Grid: Make external filter with dropdownlist

Question

Hi all,I have a 5000+ rows grid with  2 columns which are not necessary to display (both location with few different data). But we still want the users to have the possibility to filter by location. It is possible to have filter out of the grid with dropdown list? For now on, we recover the data and stock them in grid's columns with option : 'visible:false', but we don't see a way to filter from this. Any Idea?  Thanks for considering our request.

Thiyagu Subramani · Accepted Answer

Hi ALVES, 
  
Thanks for contacting Syncfusion forum. 
  
Query: It is possible to have filter out of the grid with dropdown list?  
 
Based on your shared information we suspect that you want to filter a specific column using external control. By default we have option for filterByColumn method used to filter a column externally. So to achieve your requirement we suggest to use this method in your application.  

For reference please follow the below code and reference sample. 





var grid = new ej.grids.Grid({ 
  dataSource: window.orderDataSource, 
  . . . . . . . 
  filterSettings: { type: "Excel" }, 
  columns: [ 
. . . . . 
    { 
      field: "CustomerName", 
      visible: false, 
      headerText: "Customer Name", 
      width: 150 
    }, 
} 
  ], 
  pageSettings: { pageCount: 5 } 
}); 
grid.appendTo("#Grid"); 

var dropDownFilterType = new ej.dropdowns.DropDownList({ 
  dataSource: ej.data.DataUtil.distinct(window.orderDataSource, "CustomerName", true ), 
  fields: { text: "CustomerName", value: "CustomerName" }, 
  showClearButton: true, 
  change: function(args) { 
    if (args.value === null) { 
      grid.clearFiltering(); 
    } else { 
      grid.filterByColumn("CustomerName", "equal", args.value); 
    } 
  } 
}); 
dropDownFilterType.appendTo("#filtertype"); 


API : https://ej2.syncfusion.com/javascript/documentation/api/grid/#filterbycolumn 

Reference Sample : https://stackblitz.com/edit/iqdg5g-9npy25?file=index.js 

If we misunderstood your requirement, please share your exact requirement briefly with code snippets. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S

ALVES LIONEL · Answer

Hi,Thanks for your answers, it works fine!But I have an other problem : I have multiple dropdownlist filter outside the grid, and once i use one, i want the other's data be updated with the current data in the grid.I saw that we can use grid.getFilteredRecords() to get the data after filtering the grid, but i don't know how to update/refresh these dropdownlist with the new data.Thanks.

Thiyagu Subramani · Answer

Hi ALVES, 

Thanks for your update. 

Based on your shared information we suspect that you want to update/refresh these dropdown list with the new data. For this we have achieved your requirement by applying filter query for dropdowns when filtering the data using dropdown.  

Please refer to the below code and sample link for more reference. In this below sample we have updated OrderID column value when filtering CustomerName column using creating where query based on that CustomerName value.  





var dropDownFilterType = new ej.dropdowns.DropDownList({ 
  dataSource: ej.data.DataUtil.distinct( 
    window.orderDataSource, 
    "CustomerName", 
    true 
  ), 
  fields: { text: "CustomerName", value: "CustomerName" }, 
  showClearButton: true, 
  change: function(args) { 
    var tempQuery = new ej.data.Query().where( 
      "CustomerName", 
      "equal", 
      args.value 
    ); 
    FilterType.query = tempQuery; 
    if (args.value === null) { 
      grid.clearFiltering(); 
    } else { 
      grid.filterByColumn("CustomerName", "equal", args.value); 
    } 
  } 
}); 
dropDownFilterType.appendTo("#filtertype"); 

var FilterType = new ej.dropdowns.DropDownList({ 
  dataSource: ej.data.DataUtil.distinct( 
    window.orderDataSource, 
    "OrderID", 
    true 
  ), 
  fields: { text: "OrderID", value: "OrderID" }, 
  showClearButton: true, 
  change: function(args) { 
    var tempQuery2 = new ej.data.Query().where("OrderID", "equal", args.value); 
    dropDownFilterType.query = tempQuery2; 
    if (args.value === null) { 
      grid.clearFiltering(); 
    } else { 
      grid.filterByColumn("OrderID", "equal", args.value); 
    } 
  } 
}); 
FilterType.appendTo("#filtertype2"); 


Screenshot: 

  

Sample link : https://stackblitz.com/edit/iqdg5g-xsw1a1?file=index.js 

Documentation link: https://ej2.syncfusion.com/javascript/documentation/data/querying/ 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S