On-Demand data binding

[I K]

Hi.

I have very large table I want to display it. I used these links for trying to find a solution on how to filter, sort and load dynamically. What I need is not just "load all" then display them, because this method as you know is very slow and critical memory consuming to both server and client.

https://www.syncfusion.com/forums/130337/server-side-filtering-searching-and-sorting

https://ej2.syncfusion.com/16.1.24/angular/demos/#/material/grid/remotedata

The problem with the first above link is that; on initial page load, there is no filter applied; thus the entire data set is returned.

I found this https://asp.syncfusion.com/demos/web/grid/sqlloadondemand.aspx but this is intended for Asp.net Web Forms.

I am simply using the default template with Visual Studio 2017 (Asp.net Core with Angular Application) with EF Core and SQL Server.

[Ramdhas Ueikattan]

Hi I K, 

Thanks for using syncfusion components. 

We have analyzed your reported requirement and we can perform Sorting, Searching, Filtering in Server side using Linq. In the following sample we have used URL Adaptor for data operations. The sample was created with Angular and DOTNET core environment that can be downloaded from the below link. 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/on-demand-1754491271.zip  

In the below example we have enabled filtering, searching, paging functionality for grid and these are all actions are handled in server side by load on demand data by passing query to server. 

Please find the below Code examples: 

View code: 

@Component({ 

    selector: 'my-app', 

    template: `<ejs-grid #grid [dataSource]='data' [allowSorting]='true' [toolbar]='toolbar' [allowFiltering]='true'  [allowPaging]='true' > 

                <e-columns> 

                    <e-column field='OrderID' headerText='Order ID'  textAlign='right' width=120></e-column> 

                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column> 

                    <e-column field='Freight' headerText='Freight' width=150></e-column> 

                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column> 

                </e-columns> 

                 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

 

    public data: DataManager | Object[]; 

    public toolbar: ToolbarItems[]; 

 

    

    ngOnInit(): void { 

        this.toolbar = ['Search']; 

        this.data = new DataManager({ 

            url: "/Home/DataSource", 

             adaptor: new UrlAdaptor 

         });  

    } 

Controller:  

public ActionResult DataSource(OrderRepository.DataManager dm) 

{ 

        OrderRepository.Result data = OrderRepository.GetAllRecords(dm); 

        return Json(data, JsonRequestBehavior.AllowGet); 

} 

 

. . . 

 

orders = (from ord in new NorthwindDataContext().Orders 

                          select new EditableOrder 

                          { 

                              OrderID = ord.OrderID, 

                              Freight = ord.Freight, 

                              CustomerID = ord.CustomerID, 

                              ShipCity = ord.ShipCity 

                          }).Where(search).Where(filter).ToList(); 

 

Please let us know if you have any further assistance. 

Regards, 

Ramdhas  Ueikattan.