Flex Grid Pagination and Select All

Flex Grid Pagination and Select All

Posted by: kenwang on 24 August 2021, 1:59 am EST

• 

  kenwang

  • Post Options:
  • Link
    Copy

  Posted 24 August 2021, 1:59 am EST

  Is there any can do below both requirements:

  1. Grid pull data page by page, not pull all data at one time
  2. Click the select All checkbox and ALL rows are selected or deselected, regardless of what page you’re on.

  I know we can use ODataCollectionView to pull data of one page, but what can we do for the second requirement? It seems a little conflict with the first one.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 August 2021, 11:19 pm EST

  Hi,

  1. Yes, you can use the OdataCollectionView for the sever side paging sorting, filtering, and grouping.
  2. I’m afraid that this wouldn’t be possible as the selection cannot be sent to the server and because of the server-side paging the rows data would change every time the current page changes. The underlying concept here is that after the data is loaded from the servers the grid rows are re-created i.e. cells in the view range along with the selectors this also happens on changing the page.

  Let us know if you still have any doubts.

  Regards,
  
  Ashwin

• 

  kenwang

  • Post Options:
  • Link
    Copy

  Posted 27 August 2021, 3:21 am EST

  I had an idea to complete both, below link help me to complete the pagination part. It works well.

  https://www.grapecity.com/forums/wijmo/ask-for-server-side-pagina#hiif-your-server-does-not-

  And I am writing the Select All function. sourceCollection changes every time turn page, and recheck select items after source collection is changed. But the sourceCollectionChanges can’t be triggered after load page data. Why?

  initGrid(grid) {
  
  this.gridSG = grid;

          this.gridSelector = new Selector(grid, {
              itemChecked: () => {
              }
          });
  
          this.selectRows(grid);
      }
  
      selectRows(grid) {
          let self = this;
          grid.hostElement.addEventListener('click', e => {
              let hti = grid.hitTest(e);
              if (hti.cellType == wjGrid.CellType.ColumnHeader && hti.col == 0) {
                  for (let i = 0; i < grid.collectionView.sourceCollection.length; i++) {
                      if (e.target.checked) {
                          //grid.collectionView.sourceCollection[i].sel = true;
                          self.selectedItems = self.allSiblingGroups;
                      } else {
                          //grid.collectionView.sourceCollection[i].sel = false;
                          self.selectedItems = [];
                      }
                  }
              } else if (hti.cellType == wjGrid.CellType.Cell && hti.col == 0) {
                  let currentItem = self.pagData.currentItem;
                  let currentRow = grid.rows.filter(r => r.dataItem.id == currentItem.id)[0];
  
                  //self.pagData.currentItem.sel = currentRow.isSelected;
                  if (currentRow.isSelected) {
                      this.selectedItems.push(currentRow.dataItem);
                  }
                  else {
                      this.selectedItems = this.selectedItems.filter(r => r.dataItem.id != currentItem.id);
                  }
  
              }
          });
  
          grid.collectionView.collectionChanged.addHandler(()=>{
              self.sourceCollectionChanged();
          });
      }
  
      sourceCollectionChanged() {
          for (let i = 0; i < this.gridSG.rows.length; i++) {
              let itemData = this.gridSG.collectionView.items[i].dataItem;
              if (this.selectedItems.indexOf(itemData) > -1) {
                  this.gridSG.rows[i].isSelected = true;
              }
              else {
                  this.gridSG.rows[i].isSelected = false;
              }
          }
      }
  

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 31 August 2021, 6:13 am EST

  Hello,

  We apologize, but we are unable to replicate the issue at our end. I have created a sample with the code snippet you have provided and after few changes, it’s working as you said, except the sourceCollectionChaged event is getting triggered. I have also tried it with other events as well, please refer to the sample link below:

  https://stackblitz.com/edit/angular-kwu9ue?file=src%2Fapp%2Fapp.component.ts

  Could you please provide some more information regarding the issue or provide a sample replicating the issue. You can also make changes to the above sample to replicate the issue and send us back so that we can help you better.

  Regards.