1. Home
  2. Forum
  3. Angular - EJ 2
  4. Grid Persistence with server side pagination and client side filteration

Grid Persistence with server side pagination and client side filteration

Hello,

I want to integrate grid persistence in my projects, I have a list of products that have thousands of records. I have server side pagination  and client side filtration. When I filter the products by SKU or by other columns, it filters only first page's record and when I go to the other pages, it displays no records found because filter's records are not available on those pages. So first, I should have to integrate the filtration on server-side to filter the correct data for each and all the pages but I have lots of columns as well and would not be able to find the demo or source code to integrate the filter on server side or either I have to integrate the pagination on client side but I would have to fetch all records which can cause a performance issue.

Can you please suggest what would be a good practice to bind the thousands of records with pagination and filtration on all columns and maintain the grid persistence as well?

Thanks
Imrankhan


3 Replies
JC Joseph Christ Nithin Issack Syncfusion Team January 26, 2022 01:33 PM UTC

Hi Imarankhan, 

  Greetings from Syncfusion support. 

  Before proceeding to the solution we would like to confirm the following details so that we may be able to provide a better solution. 

  • Please ensure if you want to perform both paging and filtering in the server side?
  • You have mentioned you want to have grid Persistence, which means you want to retain all the grids settings even if you refresh the page.

If we have misunderstood your query, please explain your requirement in detail. 

Please get back to us for further details. 

Regards, 
Joseph I. 


UN Unknown January 27, 2022 06:52 AM UTC

Hi Joseph,

Yes, We want to perform both filtering and paging on server side and want to retain grids settings.

Please also note that we have a column reorder and resize feature as well so if we change columns order or resize the columns that grid setting should also retain on page refresh.


Thanks

Imrankhan


JC Joseph Christ Nithin Issack Syncfusion Team January 28, 2022 03:28 PM UTC

Hi Imrankhan, 

  Thanks for your update. 

  Based on your requirement, we have prepared a sample to perform paging and filtering in the server side and the grid retains the grid settings including the column reorder and resize by using enablePersistence. 


  Please find the attached sample below. 


In the above sample we have used UrlAdaptor for binding the data from the server side. Server side filtering is done by `PerformFiltering` method and the paging is performed by using the `PerformSkip`, `PerformTake` methods. 

Please refer the below documentation where we have discussed in detail about the data binding using the UrlAdaptor.  


Please refer the below code example. 

[fetchdata.component.ts] 

ngOnInit(): void { 
       this.data = new DataManager({ 
            url: "/Home/UrlDatasource", 
           adaptor: new UrlAdaptor, 
        }); 
  } 

[HomeController.cs] 
public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
 
            IEnumerable DataSource = OrdersDetails.GetAllRecords(); 
            DataOperations operation = new DataOperations(); 
            if (dm.Search != null && dm.Search.Count > 0) 
            { 
                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search 
            } 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                DataSource = operation.PerformSorting(DataSource, dm.Sorted); 
            } 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 
            } 
            int count = DataSource.Cast<OrdersDetails>().Count(); 
            IEnumerable groupedData = null; 
            if (dm.Skip != 0) 
            { 
                DataSource = operation.PerformSkip(DataSource, dm.Skip); // Paging 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = operation.PerformTake(DataSource, dm.Take); 
            } 
            return dm.RequiresCounts ? Json(new { result = groupedData == null ? DataSource : groupedData, count = count }) : Json(DataSource); 
        } 


We have also attached the video demonstration of persisting filtering, paging, resizing and reordering operation   in the grid. Please refer the below video. 


Please get back to us for further details. 

Regards, 
Joseph I 


Loader.
Up arrow icon