Export and check all (select all - header) functionality in wijmo Grid

Export and check all (select all - header) functionality in wijmo Grid

Posted by: sdayal on 30 July 2021, 7:06 am EST

• 

  sdayal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 July 2021, 7:06 am EST

  Hi team,

  Working on export functionality to export selected rows in excel.
  
  I have added the code for export functionality for grid with pagination by created a new grid with selected rows from the original grid. (refer lines - 147 - 212)
  
  Now the issue is :-
  
  Select All - header selects only the data visible on the grid not the entire data (because of pagination).
  
  How can i select all the rows using select all header and once data is exported it should deselect the rows ?

  Snippet of the code :-
  
  https://stackblitz.com/edit/angular-uarnem?file=src/app/app.component.ts

  Also once i select rows using select all header and then switch pages it should not deselect the selected rows which is happening in the above snippet.

  Please provide solution for the above issue.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2021, 7:10 am EST

  Hi Shiva,

  1. To achieve the required functionality, you can use a dataItem(to check row is selected or not) to achieve the functionality. whenever a row is selected through selectors the isSelected property of rows of FlexGrid is set to true, you need to set the dataItem corresponding to the isSelected property. You can use the pageChanging event of collectionView to set the dataItem and pageChanged event of collectionView to restore selector state.

  Also, for the header checkbox(Selector All), you can add a click event on the FlexGrid hostElement and check for the selector header target to apply conditions to make all items checked and unchecked.

  2. In the export(save) method after the grid is exported you need to set the dataItem(to check row is selected or not) to false so that the row isSelected property will also get false. And for the current page header, you can simply check if it is checked or not then unchecked through click method if checked.

  I have also changed your save method as it was checking the rows to push the data to excel which will not work as row collection only holds the current page rows.

  Please refer to the sample demonstrating the same:

  https://stackblitz.com/edit/angular-fkdirg

  Regards,
  
  Ashwin

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 12:43 am EST

  Hi Ashiwn,

  Thank you. this works for me.