We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Server side Pagination in Grid

Can you please tell me how to do server side pagination using data Grid?  There should be a server call when we click on the pager for eg: 1st page, i want to get data from 1 to 50 and when i click on 2nd page i will get the next 50 records from the server.

3 Replies

PS Pavithra Subramaniyam Syncfusion Team May 29, 2019 06:22 AM UTC

Hi Sayali, 
 
Thanks for contacting Syncfusion support. 
 
We suggest to use UrlAdaptor of the EJ2-DataManager to achieve this server side paging requirement. By default this adaptor is used to send the request that the server can understand and send the response based on the request. Please refer the following code snippet, 
 
Grid: 
 
<script> 
    Vue.use(ejs.grids.GridPlugin); 
    var vm = new Vue({ 
        el: '#app', 
        template: `<ejs-grid ref='grid' :dataSource='data' :allowPaging='true' :pageSettings='PageSettings'> 
                                                  <e-columns> 
                                                          <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100 ></e-column> 
                                                          <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
                                                          <e-column field='ShipCity' headerText='Ship City' width=150></e-column> 
                                                  </e-columns> 
                                    </ejs-grid>`, 
        data() { 
            return { 
                data: new ejs.data.DataManager({ 
                    url: "/Home/UrlDatasource", 
                    adaptor: new ejs.data.UrlAdaptor() 
                }), 
                PageSettings: { pageSize: 50 } 
            } 
        } 
    }); 
</script> 
 
Controller: 
 
public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
            IEnumerable DataSource = order; 
            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<Orders>().Count(); 
            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 = DataSource, count = count }) : Json(DataSource); 
        } 
 
We have prepared the sample for your reference and you can find that sample from the below link, 
 
 
We have already discussed about DataManager adaptor concepts and Grid on-demand actions in below help documentation. So please refer the below links to know more details, 
 
 
 
Regards, 
Pavithra S. 



SS sayali saitawdekar May 30, 2019 06:19 AM UTC

Thanks, but can you send me the sample example in java?
I am developing using Vue Components and for javascript i am using vue.js, is there any solution using vue,js?


PS Pavithra Subramaniyam Syncfusion Team June 4, 2019 09:04 AM UTC

Hi Sayali, 
 
Currently, we don’t have support to access Java using data manager. However, you can use the below way to achieve your requirement. You can perform Server-side actions like paging, CRUD etc by using DataManager.  
 
Server-side paging is achieved by using Skip and Take parameters. Skip is used for skip the records based on the current page and Take is used for get the records based on the grid.pageSize provided.  
 
In the initial load of grid, data are fetched from remote data and bound to the grid using url property of DataManager. Since all action for UrlAdaptor will be POST action, we need to handle the grid actions in the ‘doPost’ method in the Java class. 
 
public class Test extends HttpServlet {  
      
    List<JsonObject> list = new ArrayList<JsonObject>();  
      
    public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
          
        String action = request.getParameter("action"); //get current grid action that's given in the datamanager url and perform actions based on that and return the result to grid 
          
        if(action.equalsIgnoreCase( "insert" )) {                  
            this.Insert(request, response);           // insert action   
        }   
        else { //generate datasource and pass to grid  
      
              BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream()));  
                String json = "";  
                if(br != null){  
                    json = br.readLine();  
                }  
                  
                // 2. initiate jackson mapper  
                ObjectMapper mapper1 = new ObjectMapper();  
              
        if(list.size() < 1) {  
        int ord = 10214;  
         for(int i=0;i<5;i++){  
             JsonObject or = new JsonObject();  
             or.addProperty("CustomerID""VINET" + i);  
             or.addProperty("OrderID", ord + i);  
             or.addProperty("EmployeeID", 1 + i);          
               
             list.add(or);  
         }           
        }       
        // return the data      
            .  .  .  
        }  
    }  
      
.   .  .  
public void Insert(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        // 1. get received JSON data from request  
        BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream()));  
        String json = "";  
        if(br != null){  
            json = br.readLine();  
        }  
  
        // 2. initiate jackson mapper  
        ObjectMapper mapper = new ObjectMapper();  
  
        // 3. Convert received JSON to args  
        Argss args = mapper.readValue(json, Argss.class);  // Argss class contains value from client        
      Order or =  (((Argss)args).value);  
        JsonObject addNew = new JsonObject();  
        addNew.addProperty("CustomerID", or.CustomerID);  
        addNew.addProperty("OrderID", or.OrderID);  
        addNew.addProperty("EmployeeID", or.EmployeeID);         
        list.add(addNew);      
             
    } 
} 
 
We have created a sample in Vue component with .NET core. You can check the below sample for more information and use the same way(you can implement in JAVA as above) to achieve your requirement. 
  
 
Note: While using urlAdaptor then it’s necessary to return data as result and count pair. Please refer the below help documentation link for more information. 
 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon