Server side pagination and sort

Server side pagination and sort

Posted by: bhagwati.pal on 15 August 2022, 4:45 pm EST

• 

  bhagwati.pal

  • Post Options:
  • Link
    Copy

  Posted 15 August 2022, 4:45 pm EST

  Hi,

  I want server side pagination and sorting on wijmo grid, I have check ODataCollectionView example our api won’t support that how can I achieve that with calls?

  Thanks,
  
  Bhagwati Pa

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 21 August 2022, 3:36 pm EST

  Hello,

  We apologize for the delayed response you can extend the RestCollectionView class to create a custom RestCollectionView Class for example you can extend the RestCollectionView class to create a custom RestCollectionViewOData class that talks to OData sources. Or a custom RestCollectionViewReqRes class that talks to a ReqRes source. You can refer to the wijmo demo link below for reference:

  Demo link:
  
  https://www.grapecity.com/wijmo/demos/Core/CollectionView/RestCollectionView/OData/purejs

  API link:
  
  https://www.grapecity.com/wijmo/api/classes/wijmo_rest.restcollectionview.html

  Regards

• 

  bhagwati.pal

  • Post Options:
  • Link
    Copy

  Posted 25 September 2022, 4:29 pm EST

  Hi Sonu,

  Can you Please provide a sample to override this class, I want when I click in next or previous page I should be able to capture the event so I can pass values accordingly also same for filter

  Thanks,
  
  Bhagwati Pal

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 26 September 2022, 6:09 pm EST

  Hi,

  Paging :
  
  You can refer to line 130 in the ‘rest-collection-view-odata.js’ file below sample, for customizing paging
  
  You can also add an event handler on the navigator/pager element, if you want to perform any custom task while changing pages, refer to line 49 in the ‘app.js’ file.

  Filtering :
  
  For filtering, you can just add a filter to the grid, filtering is done on the server side by default, if you want to change that, you can change it through the ‘filterOnServer’ property. Also, if you have any custom condition for filtering data, you add it to the ‘setting.$filter’ string in the ‘RestCollectionViewOData’ class, You can refer to line 139 in the ‘rest-collection-view-odata.js’ file in the below sample, for its implementation.

  Sorting :
  
  You can use ‘sortOnServer’ property to enable/disable sorting on the server side, If you have any more customizations, you can refer to line 118 in the ‘rest-collection-view-odata.js’ file in the below sample.

  Please find attached a sample for the same:
  
  https://jscodemine.grapecity.com/share/BqUVvgGTT06affAC0XExrQ/

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

  Regards

• 

  bhagwati.pal

  • Post Options:
  • Link
    Copy

  Posted 27 September 2022, 8:06 pm EST

  Hi,

  I am passing collection to wijmo in below way.

  this.list = new RestCollectionViewOData(result.list, {
  
  pageSize: 10,
  
  });

  I created class
  
  export class RestCollectionViewOData extends RestCollectionView {
  
  private collection;
  
  constructor(collection, options) {
  
  super();
  
  this.collection = collection;
  
  this._totalItemCount = 110;
  
  this.pageSize = 5;
  
  }

  getItems() {
  
  if (this.collection) {
  
  return this.collection;
  
  } else {
  
  return ;
  
  }
  
  }
  
  }

  I want to change data on page change

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 29 September 2022, 11:20 pm EST

  Hi,

  If you want to perform any custom tasks, when a page is changed, then you can handle ‘pageChanging’ event which occurs before the page index changes. You can write your custom logic inside this event. Please find attached an updated sample for the same(refer to line 30 in the app.js file):

  https://jscodemine.grapecity.com/share/BqUVvgGTT06affAC0XExrQ/

  Regards