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

How to make grid server side pagination with angular2 platform

I want to make the grid pagination in server side.
I use angular 2 platform. How do I set the dataSource in the grid tags and what should be the response of the server.
Please I need a demo

1 Reply

VA Venkatesh Ayothi Raman Syncfusion Team November 18, 2016 12:36 PM UTC

Hi Mohamed, 

Thanks for contacting Syncfusion support. 

We can perform the pagination in server side and we have built-in support to perform the paging, filtering and sorting in server side using UrlAdaptor. So, we suggest you to use UrlAdaptor for perform the paging operation in server side. Please refer to the code example, 

Code example
//app.component.html file 
<ej-grid #grid [allowPaging]="true  [dataSource]="gridData"> 
        <e-column headerText="Employee Image" width="75" [template] = "template" textAlign="right"></e-column> 
        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> 
        <e-column field="OrderID" width="75" textAlign="right"></e-column> 
        <e-column field="CustomerID" headerText="Customer ID" width="80" textAlign="right"></e-column> 
        <e-column field="Freight" headerText="Freight" width="80" textAlign="right"></e-column> 
//app.component.ts file 
import {Component, ViewEncapsulation, ViewChild} from '@angular/core'; 
import {CommonModule} from "@angular/common"; 
import {EJComponents} from './ej/core'; 
declare let ej: any; 
    selector: 'ej-app', 
    templateUrl: 'app/app.component.html', 
export class AppComponent { 
    public template = "#columnTemp"; 
    public filterType = { filterType: "excel" };     
    public gridData =  ej.DataManager({ url: "/Grid/Data", adaptor: new ej.UrlAdaptor() }); 
//Server side 
public ActionResult Data(Syncfusion.JavaScript.DataManager dm) 
            for (var i = 1; i < 100; i++) 
                OrderData.Add(new Order() { OrderID = 100 + i, EmployeeID = i, CustomerID = "Vinet" + i, Freight = i / 2 }); 
            IEnumerable data = OrderData; 
            DataOperations operation = new DataOperations(); 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
                data = operation.PerformSorting(data, dm.Sorted); 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
                data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator); 
            int count = data.AsQueryable().Count(); 
            if (dm.Skip != 0) 
                data = operation.PerformSkip(data, dm.Skip); //paging 
            if (dm.Take != 0) 
                data = operation.PerformTake(data, dm.Take);  //paging 
            return Json(new { result = data, count = count }); 
//Web.config file 

Note: Here we have use the Syncfusion.EJ.dll and Syncfusion.EJ.MVC.dll. in those dll’s we have handle the DataManager operations, so we can perform the paging, sorting and filtering easily in server side.   
Please refer to the following KB for more information, 

Venkatesh Ayothiraman. 

Live Chat Icon For mobile
Up arrow icon