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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to make grid server side pagination with angular2 platform

Thread ID:





127444 Nov 16,2016 07:39 AM UTC Nov 18,2016 12:36 PM UTC Angular 1
Tags: ejGrid
Mohamed Abozeid
Asked On November 16, 2016 07:39 AM UTC

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

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon