Server side FlexGridFilter with AngularJS 1.X and Wijmo 5 FlexGrid

Server side FlexGridFilter with AngularJS 1.X and Wijmo 5 FlexGrid

Posted by: siddhi.bhakta on 30 October 2017, 4:38 pm EST

• 

  siddhi.bhakta

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 October 2017, 4:38 pm EST

  Hello. I am using Wijmo 5 FlexGrid with AngularJS 1.X. It’s a grid with dynamic columns, server-side paging and server-side sorting. I need to implement FlexGridFilter (excel like filtering ui) on this grid where in the filter ui list of values (lookup values) are populated from a service response. When a user clicks on filter icon in a column header, I need to make a service call which will return a list of all unique values available for that column and populate these values in the filter ui. Can you please provide an example on how to implement this?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 October 2017, 3:24 pm EST

  Hi Siddhi,
  
  You can get the value from server and assign to uniqueValues property of ValueFilter class. For your reference, please refer to the following fiddle for pureJS that shows different unique values for a country column.
  
  http://jsfiddle.net/mkgupta911/71f4c0a8/

  ~Manish

• 

  siddhi.bhakta

  • Post Options:
  • Link
    Copy

  Posted 26 December 2017, 9:00 am EST

  Hi Manish,

  Thank you for your response earlier. I am now able to get unique values from the service and display in filter popup. I also used the filterChanged event handler to get selected values, pass them with my service request and get filtered data back.

  My next question is how do I capture and customize Ascending and Descending sort button click events to support server-side sorting? Please help!
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 December 2017, 9:07 pm EST

  Hi Siddhi,
  
  You need to handle mousedown event for the wj-part=“div-sort” to detect the if sorting button clicked.

  Further, you need to detect target element button. Please refer to the updated fiddlefor the same.
  
  http://jsfiddle.net/mkgupta911/71f4c0a8/11/

  ~Manish