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.
Unfortunately, activation email could not send to your email. Please try again.

How to make grid server side pagination with angular2 platform

Thread ID:

Created:

Updated:

Platform:

Replies:

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

Hi
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
Thanks

Venkatesh Ayothi Raman [Syncfusion]
Replied On November 18, 2016 07:36 AM

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-columns> 
        <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> 
         
    </e-columns> 
</ej-grid> 
 
//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; 
 
@Component({ 
    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, 

Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

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.

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.

;