Server side pagination

[Mini Dev]

Hi,

I'm using Syncfusion Ej2 for asp.net core and tag helper and I need to use server side pagination.

This is my controller:

public IActionResult List(int start=0, int limit=12)

{

    var ms = new MyService(_options.ConnectionString);

    ViewBag.dataSource = ms.GetAll(start, limit);    

    return View();

}

And my view.cshtml

[...]

<ejs-grid id="Grid">        

<e-datamanager url="/mycontroller/list" adaptor="WebApiAdaptor" crossdomain="true"></e-datamanager>

<e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" mode="Dialog"></e-grid-editSettings>       

<e-grid-columns>

    <e-grid-column field="" headerText="" isPrimaryKey="true" textAlign="Right" visible="false"></e-grid-column>

    <e-grid-column field="" headerText="" width="100"></e-grid-column>

    <e-grid-column field="" headerText="" isPrimaryKey="true" width="200"></e-grid-column>

    <e-grid-column field="" headerText="" width="100"></e-grid-column>

    <e-grid-column headerText="" width="30" commands="@commands"></e-grid-column>

</e-grid-columns>

</ejs-grid>

How can I pass start and limit to my controller every time I change grid page?

What's the best approach?

Thanks

[Dhivya Rajendran]

Hi Mini, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement and while using WebApiAdaptor in data manger we have send skip and take parameter from client side based on the value you can handle it in server side. We have prepared a sample for your reference.  

Kindly refer to the below code example and sample for more information. 

Index.cshtml 

<div> 

    <ejs-grid id="Grid" allowPaging="true"> 

        <e-data-manager url="/api/Orders/" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="ShipCity" headerText="Ship City"  width="170"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

OrderController.cs 

  [HttpGet] 

 

        public object Get() 

        { 

            var queryString = Request.Query; 

 

            int skip = Convert.ToInt32(queryString["$skip"]); // paging 

            int take = Convert.ToInt32(queryString["$top"]); 

            var data = OrdersDetails.GetAllRecords().ToList(); 

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 

             

        } 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core-webapi-page-745416465  

Help documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/databinding.html?syntax=tag#web-api  

Regards,
R.Dhivya  

[Mini Dev]

Hi,

thanks for the answer.

I have another question about using server-side filter.

Do I have to use $filter in string query?

Can you give me a sample?

Thanks

[Dhivya Rajendran]

Hi Mini, 

Thanks for your update. 

We have provide an option to handle on-demand grid actions like sorting, paging, filtering etc. You can also perform the server side filtering, paging by using the below way. Kindly refer to the below code example and sample for more information 

[index.cshtml] 

<div> 

     <ejs-grid id="Grid" query="new ej.data.Query().addParams('ej2grid', 'true')" allowPaging ="true" allowFiltering="true" allowSorting="true"> 

        <e-data-manager url="/Home/UrlDatasource" adaptor="UrlAdaptor"></e-data-manager> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer Name"></e-grid-column> 

       </e-grid-columns> 

    </ejs-grid> 

</div> 

[HomeController.cs] 

public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 

        { 

            IEnumerable DataSource = OrdersDetails.GetAllRecords(); 

            DataOperations operation = new DataOperations(); 

            if (dm.Search != null && dm.Search.Count > 0) 

            { 

                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search 

            } 

            int count = 0; 

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

            { 

                DataSource = operation.PerformSorting(DataSource, dm.Sorted); 

            } 

 

            if (dm.Where != null && dm.Where.Count > 0) //Filtering 

            { 

                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 

            } 

 

            else 

            { 

                count = DataSource.Cast<OrdersDetails>().Count(); 

            } 

            if (dm.Skip != 0) 

            { 

                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 

            } 

            if (dm.Take != 0) 

            { 

                DataSource = operation.PerformTake(DataSource, dm.Take); 

            } 

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource); 

        } 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid-url-data-operation1326680658  

Help documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/databinding.html#handling-on-demand-grid-actions  

Note: This feature available from v16.2.41 so it’s necessary to update the Essential javascript 2 package and to install Syncfusion.licensing package too. 

 

https://www.nuget.org/packages/Syncfusion.Licensing/  

Regards,
R.Dhivya  

[Mini Dev]

Hi,

I need to get parameter from query string like:

var queryString = Request.Query;

int skip = Convert.ToInt32(queryString["$skip"]);

int take = Convert.ToInt32(queryString["$top"]);

I need to get also filter, not only skip and take.

How can I get filter from query string?

Thanks

[Dhivya Rajendran]

Hi Mini, 

Thanks for your update. 

Query : How can I get filter from query string? 

 

We have validated your query and created a sample based on your requirement.  In the below sample, we have handled the server side filter by using the query string option and code example demonstrate the filter for the OrderID field in such way you can handled the filter as per your requirement. 

Kindly refer to the below code example and sample for more information 

<div> 

    <ejs-grid id="Grid" allowPaging="true" allowFiltering="true"> 

        <e-data-manager url="/api/Orders/" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID width="120"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

[OrderController.CS] 

        [HttpGet] 

 

        public object Get() 

        { 

            var queryString = Request.Query; 

 

            int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

            string filter = queryString["$filter"]; 

            if (filter != null) 

            { 

                var newfiltersplits = filter; 

                var filtersplits = newfiltersplits.Split('(', ')', ' '); 

                var filterfield = filtersplits[1]; 

                var filtervalue = filtersplits[3]; 

                switch (filterfield) 

                { 

                    case "OrderID": 

 

                        Datae = (from cust in data 

                                 where cust.OrderID.ToString() == filtervalue.ToString() 

                                 select cust).ToList(); 

                        break; 

                } 

                data = Datae; 

            } 

            

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 

             

        } 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core-webapi-filter1983299200  

Regards, 

R.Dhivya 

[Mini Dev]

Hi,

I change from <e-data-manager url="/Home/UrlDatasource" adaptor="UrlAdaptor"></e-data-manager>

to <e-data-manager url="/Home/UrlDatasource" adaptor="WebApiAdaptor"></e-data-manager> and in my controller.cs

public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 

but I receive a 415 unsopported media type http status code.

How can I fix?

Thanks

[Dhivya Rajendran]

Hi Mini, 

Thanks for your update. 

We have validated your query and we have specifically created DataManagerRequest class to handle On-Demand grid actions for urlAdaptor. But in your code you are tried to use the DataManagerRequest class for WebAPiAdaptor so that it cause the reported problem[415 unsopported media type]. We suggest you to use the urlAdaptor to resolve the reported problem. 

UrlAdaptor : https://ej2.syncfusion.com/aspnetcore/documentation/grid/databinding.html#handling-on-demand-grid-actions 

If you are using webApiAdaptor then refer the previously provided response and sample, in that sample we have performed sever side grid actions with WebApiAdaptor. 

WebAPiAdaptor : https://ej2.syncfusion.com/aspnetcore/documentation/grid/databinding.html#web-api  

Regards,
R.Dhivya  

[Mini Dev]

Hi,

now I use UrlAdaptor and it returns a 200 http status code with Json result but it don't map with each column field.

See attachment.

In my view.cshtml

   

   

               

       

                    

       

       

        [...]

   

How can I fix?

Thanks

Attachment: Capture_(2)_4b9873f1.zip

[Dhivya Rajendran]

Hi Mini, 

Thanks for your update. 

We have validated your query and the provided screen shots. By default, UrlAdaptor expects the value as result and count pair set but in your code you have passed item and count (its only for webApiAdaptor) so that it cause the reported problem.  You can resolve the reported problem by using the below way. 

Kindly refer to the below code example and documentation link for more information. 

<div>  

     <ejs-grid id="Grid" query="new ej.data.Query().addParams('ej2grid', 'true')" allowPaging="true" allowFiltering="true" allowSorting="true">  

        <e-data-manager url="/Home/UrlDatasource" adaptor="UrlAdaptor"></e-data-manager>  

        <e-grid-columns>  

            <e-grid-column field="OrderID" headerText="Order ID"isPrimaryKey="true"textAlign="Right" width="120"></e-grid-column>  

            <e-grid-column field="CustomerID" headerText="Customer Name"></e-grid-column>  

       </e-grid-columns>  

    </ejs-grid>  

</div> 

public IActionResult UrlDatasource([FromBody]Data dm) 

        { 

            var val = OrdersDetails.GetAllRecords(); 

            var Data = val.ToList(); 

            if (dm.skip != 0) 

                Data = Data.Skip(dm.skip).ToList(); 

            if (dm.take != 0) 

                Data = Data.Take(dm.take).ToList(); 

            int count = Data.Count(); 

            return Json(new { result = Data, count = count });          

} 

Help documentation : https://ej2.syncfusion.com/documentation/data/adaptors.html?lang=es5#url-adaptor  

  

Regards,
R.Dhivya