|
//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
| 
