Ask for server side pagination solutions

Posted by: bzhang on 22 April 2019, 5:09 am EST

  • Posted 22 April 2019, 5:09 am 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 and angular version is 5.1.0

  • Replied 22 April 2019, 9:26 pm EST


    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:
  • Replied 23 April 2019, 4:21 am 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?
  • Replied 23 April 2019, 4:46 am EST

    How could I use my customized pagination component?
  • Replied 23 April 2019, 5:49 am EST

    Our server is not support OData at this time.
  • Replied 23 April 2019, 10:54 pm EST


    If your server does not support odata, then you could use the ServerCollectionView class. Please refer to the following sample:
    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 }

  • Replied 25 April 2019, 7:47 am 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?
  • Replied 25 April 2019, 8:46 am 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?
  • Replied 25 April 2019, 9:38 pm EST

    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();

    Manish Gupta
  • Replied 25 April 2019, 9:39 pm EST
  • Replied 7 May 2019, 11:58 am 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.

  • Marked as Answer

    Replied 7 May 2019, 9:10 pm EST

    Hi Boyang,

    Please refer to the following sample which demonstrates how we could fetch values for value filter from the server:

    Please let us know if you face any issues.

  • Replied 9 May 2019, 7:49 am 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.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels