React FlexGrid default sorting

React FlexGrid default sorting

Posted by: jschnurer on 11 April 2024, 8:02 am EST

• 

  jschnurer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 April 2024, 8:02 am EST

  I’m rendering a with a bunch of , some of which have inside them.

  I have what I believe to be a simple request. I want to add default sorting to the grid. Here is an example grid. It has these columns:

  • Id
  • Username
  • Task Description
  • Date Created

  I’d like to initially add a default sorting on Date Created descending. If the user clicks on any of the headers, it should forget the default sorting and sort by whatever the user wants instead.

  How can I accomplish this?

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 11 April 2024, 8:05 am EST

  I forgot to mention. I’m also interested in applying default filtering. For example, maybe I want to apply a default filter on the “Username” column like “Username === currentUser”. It should add that filter to the column so the user sees only data with their username (for example). Then, if the user wanted to, they could remove that filter to see all records.

  How can I accomplish this as well?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 11 April 2024, 9:58 pm EST - Updated 11 April 2024, 10:03 pm EST

  Hello,

  To apply sorting on any FlexGridColumn by default you can specify the ‘sortDescriptions’ property of the flexGrid’s collectionView. In case, if you are not aware of the CollectionView, the CollectionView acts as a data source for the Wijmo FlexGrid, and all the paging, sorting, and grouping actions are handled at the CollectionView level. You’ll need to create a new CollectionView and assign it to the ‘itemsSource’ property of the FlexGrid. Whenever, a simple array is assigned to the ‘itemsSource’ property of the FlexGrid, a CollectionView is created internally, which then acts as the data source. Please refer to the following code snippet that shows, how you can create a CollectionView with default sorting applied on a Column -

  let view = new CollectionView(data, {
      // sort the data by date in descending order
          sortDescriptions: [
              new SortDescription('date', false),
          ]
      })

  And to apply some default filtering on the FlexGrid, you can set the ‘filterDefinition’ property of the FlexGridFilter, like this -

  let filter = new FlexGridFilter(theGrid, {
          filterDefinition: '{"defaultFilterType":3,"filters":	 [{"binding":"country","type":"value","uniqueValues":null,
  					"sortValues":true,"maxValues":250,"exclusiveValueSearch":true,
  					"showValues":{"Germany":true}}]}'
      })

  Please refer to the following sample demonstrating the same - https://jscodemine.mescius.io/share/S11LgJy8MU2KQTubDUQ5Yg/

  To get the filterDefinition as per your needs, you can first apply the filter on the FlexGrid and then check the ‘filterDefinition’ property of the grid filter, which will return the filterDefinition of the currently applied filter in string format. You can set the same definition initially to apply default filtering on the grid. Please refer to the attached screenshot for the same -
  
  

  

  1892×637 74.2 KB

  Here are some API links for your reference - https://developer.mescius.com/wijmo/api/classes/Wijmo.Sortdescription.html
  
  https://developer.mescius.com/wijmo/api/classes/Wijmo.Collectionview.html
  
  https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid.Flexgrid.html
  
  https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid_Filter.Flexgridfilter.html

  In case, you face any issues, please let us know.

  Regards

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 12 April 2024, 12:54 am EST - Updated 12 April 2024, 1:02 am EST

  How is this accomplished in React?

  I’ve already got this so far:

  <FlexGrid>
    <FlexGridFilter/>
    ...FlexGridColumns...
  </FlexGrid>

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 14 April 2024, 10:32 pm EST

  Hi,

  For default sorting you can create a CollectionView instance with the default SortDescription and set it to itemsSource property of the FlexGrid. And to apply default filter, you can handle the ‘initialized’ event of the FlexGridFilter in React, to set your desired ‘filterDefinition’.

  Please refer to the following sample in React, with the same implementation - https://jscodemine.mescius.io/share/TakAGkksOEObobR76lpulQ/

  In case, you still face any issues, please let us know.

  Regards

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 15 April 2024, 12:42 am EST

  Thanks. Now I know how to initialize a filter. Do you have any documentation about the actual filter definition?

  let filterDef = '{"defaultFilterType":3,"filters":[{"binding":"country","type":"value","uniqueValues":null,"sortValues":true,"maxValues":250,"exclusiveValueSearch":true,"showValues":{"Germany":true}}]}';
  

  In REACT, is there a way to export the current filter definition to the console so that I can set up the grid with my desired filter and then simply export the json? That way I could then paste it into the initFilter method.

  Also what is the defaultFilterType?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 16 April 2024, 6:34 pm EST

  Hi,

  Yes, documentation is available for the ‘filterDefinition’ property of the FlexGridFilter which gives a brief overview of this property, please refer to the API link below for the same, however, there is no specific explanation available about the data and syntax for this property. You can apply the FlexGridFilter on the grid, and check this property to get the correct syntax, and you can easily modify the received JSON string if needed,

  Please refer to the following updated sample in React, which shows how you can print the current filter definition in the browser console window, so that you can use the same filter definition string while the filter is initialized, to apply default filtering in the grid. - https://jscodemine.mescius.io/share/zc12Q0UGqEWXrs470z1a0w/

  The ‘defaultFilterType’ is a property of the FlexGridFilter, which is responsible for setting the default filterType for the columns. When you open the filter dropdown on any column, you will see that by default there are two options available to switch filter type, i.e. Filter By Condition | Filter By Value. You can control these filter types with this property. Please refer to the below API link for more information

  filterDefinition - https://developer.mescius.com/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html#filterdefinition
  
  defaultFilterType - https://developer.mescius.com/wijmo/api/classes/wijmo_grid_filter.flexgridfilter.html#defaultfiltertype

  FilterType (possible values for defaultFilterType) - https://developer.mescius.com/wijmo/api/enums/Wijmo_Grid_Filter.Filtertype.html

  In case if there is something we missed, please let us know.

  Regards