Ask for server side pagination solutions

Ask for server side pagination solutions

Posted by: bzhang on 22 April 2019, 2:09 pm EST

• 

  bzhang

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 April 2019, 2:09 pm EST

  Hello Wijmo team,
  
  I am using wijmo 5 and angular 5 in our project right now.
  
  We have a form which contains more than 20,000 records in grid. I am using data collection view pagination with this form. Also using on grid filter and multi-column sort. Now, we need to tweak this form to do pagination on the server side but keep the on grid filter and multi-column sort work as before. Do you have any good solutions for this scenario?

  Pagination is developed by set collection view’s pageSize and pageIndex.
  
  We did some customize feature on the filter. We stored the grid filter settings and re-applied every time when data refreshed.
  
  Multi-column sort is implemented by setting collection view’s sortDescriptions.

  As I know that on grid filter when using Filter by Condition the list items are the values contained by the grid. If I am using server side pagination, how to display all values of the full result for user to choose or show the match values when user input value with in the search field? Because of I may set each page only show 12 -20 records, I don’t want it only contains values of the records we load.

  By the way, my current wijmo package is C1Wijmo-Enterprise_5.20172.328.zip and angular version is 5.1.0

  bzhang

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 23 April 2019, 6:26 am EST

  Hello,

  In order to have pages on the server, you could use ODataCollectionView class instead of CollectionView and set the value of pageOnServer property to true. Please look at the sample below:

  https://www.grapecity.com/wijmo/demos/Grid/PagingScrolling/Server-sidePaging/angular

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 23 April 2019, 1:21 pm EST

  Thanks for your answer. But I don’t see multi-column sort and on grid filter in the sample. Also, I need to setup withCredentials to true and Authorization values within the request header or the request won’t pass verification of authorization on the server side. How should I do this?

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 23 April 2019, 1:46 pm EST

  How could I use my customized pagination component?

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 23 April 2019, 2:49 pm EST

  Our server is not support OData at this time.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 24 April 2019, 7:54 am EST

  Hi,

  If your server does not support odata, then you could use the ServerCollectionView class. Please refer to the following sample:
  
  https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/ServerCollectionView
  
  ServerCollectionView is a custom implementation and not part of the standard wijmo distribution, so to use ServerCollectionView you need to copy the ServerCollectionView’s implementation from the sample in your application. Further, you may customize the ServerCollectionView according to your requirement.

  Multicolumn sort and filtering
  
  Since ServerCollectionView extends from the CollectionView, sorting and filtering could be applied just like in normal CollectionView.

  How could I use my customized pagination component?
  
  Above shared sample also shows how we could add paging.

  Request Headers
  
  The ServerCollectionView class also has a property requestHeaders that can be used to send the request headers:

  var view = new ServerCollectionView ( url, {
       requestHeaders: { Authorization: db.token }
  });
  

  Regards

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 25 April 2019, 4:47 pm EST

  Thanks for your response. I will take a look at ServerCollectionView.

  Should I close this one and open a new topic if I have other questions base on this requirement or just leave it here and close it after I try ServerCollectionView?

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 25 April 2019, 5:46 pm EST

  I have looked into the sample. It is not fit what we need on filtering. We expect that the filter could bring search text to the server side and used for querying data. Now, the by conditions filter only show values of current page and could not use the input text as a query criteria. Is there any way that remove the list of by condition filtering and use the input text to query data?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 April 2019, 6:38 am EST

  Hi,
  
  For this, you may send a request to fetch the complete list and show in filter using ValueFilter’s uniqueValues properties.

  For reference, please refer to the attached sample and following code snippet:

   var f = self.filter.getColumnFilter(col, true);
                      f.valueFilter.uniqueValues = updatedArray();
  
  
  
  

  Regards,
  
  Manish Gupta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 April 2019, 6:39 am EST

  +SampleServerCollectionView.zip

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 7 May 2019, 8:58 pm EST

  Hi, Manish,
  
  Thanks for you sample code.
  
  That is not what we are looking for. If I am using uniqueValues of filter, then I have to bring all data from database and that is what we are working on to avoid.
  
  We are planing to add a row between first row and header with input forms. So, user can input any text and let us bring it to server side as a criteria. If you have any sample of that, it would be much helpful.

  Boyang

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 8 May 2019, 6:10 am EST

  Hi Boyang,

  Please refer to the following sample which demonstrates how we could fetch values for value filter from the server:
  
  https://stackblitz.com/edit/angular-7al7ru?file=src/app/app.component.ts

  Please let us know if you face any issues.

  ~sharad

• 

  bzhang

  • Post Options:
  • Link
    Copy

  Posted 9 May 2019, 4:49 pm EST

  I read your code and feel it could be the solution.
  
  We have some other feature need to develop for now. So, I mark your answer as the solution without try it.

  Thank you.