Fetching and Loading items based on page index of the grid

[John Stephen Mangam]

Hey, 

Let's say I have 850 records in the database but I want to show in the grid that I have 85 pages and I want to fetch only 10 records from the Database as and when the respective page index button is clicked.

Please let me know how I could achieve this.

[Mohammed Farook J]

Hi John, 

 

Thanks for contacting Syncfusion support.

We have validated your requirement and we suggest to use ‘UrlAdaptor’ for Grid data-binding . The UrlAdatptor is worked with on demand loading(fetch record based on page) concept. Please find the demo and documentation for your reference.

Demo :  https://aspdotnetcore.syncfusion.com/Grid/UrlAdaptor#/material

Documentation :

https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/?no-cache=1#handling-on-demand-grid-actions
https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#url-adaptor  

 

Note : By default the Grid pageSize is 12. But you can change the page size through  pageSettings.pageSize property. Please find the code example 

 

 

<ejs-grid id="Grid" dataSource="ViewBag.datasource"  allowPaging="true" height="365"> 

 

            <e-grid-pagesettings pageSize="10"></e-grid-pagesettings> 

            <e-grid-columns> 

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

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

. . . 

            </e-grid-columns> 

        </ejs-grid> 

 

Regards,
J Mohammed Farook 

[John Stephen Mangam]

Hi Mohammed,

Thank you for the prompt response. Please see my issue marked in Orange.

In the code that you cited:

In the  public IActionResult UrlDatasource([FromBody]DataManagerRequest dm)

{

IEnumerable DataSource = Orders.GetAllRecords(); // All records are being fetched from the DB for every operation. How can I fetch only the recrods based on the page index?

...

}

[Mohammed Farook J]

Hi John, 

 

IEnumerable fetch the data from data base as ToList object, but IQueryable fetch the data as queryable format. As from your query each and every action Grid whole data source converted as ToList it will take some time, but IQueryable return the result as queryable which is extended from Ienumerable . So we suggest you to use QueryableOperation to achieve this requirement. We can fetch the required data alone from Data base using querying property and it can be achieved by using IQueryable dataOperations.  

 

Please refer the following code snippet, 

 

public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 

        { 

            IQueryable<OrdersView> datasource = new NorthwindDataContext().OrdersViews; 

            QueryableOperation db = new QueryableOperation(); 

            int count = datasource.Count(); 

            if (dm.Where != null) // for filtering 

                datasource = db.PerformFiltering(datasource, dm.Where, dm.Where[0].Condition); 

            if (dm.Sorted != null)//for sorting 

                datasource = db.PerformSorting(datasource, dm.Sorted); 

            if (dm.Search != null) 

                datasource = db.PerformSearching(datasource, dm.Search); 

            if (dm.Skip >= 0)//for paging 

                datasource = db.PerformSkip(datasource, dm.Skip); 

            if (dm.Take > 0)//for paging 

                datasource = db.PerformTake(datasource, dm.Take); 

            return Json(new { result = datasource.ToList(), count = count }); 

        } 

 

Note: Here we can converted the Queryable data to List type for bound the data source to Grid. 

 

 

Regards, 

J Mohammed Farook 

[John Stephen Mangam]

Hi Mohammed,

Thank you for the message.

I get the below errors: 

Failed to load resource: the server responded with a status of 400 () GetSomeTiles:1

ajax.js:92 POST https://localhost:44358/Compilation/GetSomeTiles 400 ajax.js 92

My code snippets:

<ejs-grid id="tileSearchGrid" load="onLoad"

          allowPaging="true" allowSorting="true" allowFiltering="true">

    <e-data-manager url="@Url.Action("GetSomeTiles", "Compilation")" adaptor="UrlAdaptor"></e-data-manager>

    ....

      [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult GetSomeTiles([FromBody]DataManagerRequest dm)

{

...

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

}

<script>

    function onLoad() {

        this.headers= [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];

    };

</script>

[Mohammed Farook J]

Hi John, 

 

We have analyzed your code and  we suspect that pass the AntiforgeryToken in Grid load event as incorrect. So this may be caused this issue. Before using AntiforgeryToken, we need to configure ‘XSRF-TOKEN’ in startup.cs page like below code snippet.   

 

public void ConfigureServices(IServiceCollection services) 

        { 

 

                       ... 

 

           services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN"); 

 

        } 

 

After the configuration, provide the AntiforgeryToken in following way to achieve this requirement, 

 

<input type="hidden" name="_ejRequestVerifyToken" value="f2cd20a3-5ae1-4e19-be61-d409191be3b1" /> 

 

 

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

 

       ... 

 

</ejs-grid> 

<script> 

    function onLoad() { 

        var tokenValue = $("input[name=_ejRequestVerifyToken]").val(); 

        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': tokenValue }]; 

    }; 

</script> 

 

In the above sample we can pass the AntiforgeryToken in Grid initial rendering . Please find the screenshot for sending AntiforgeryToken in your network tab.  

 

 

 

You can handle AntiforgeryToken in your controller action methods.  

 

 

Please get back to us for further assistance. 

 

Regards, 

J Mohammed Farook 

 

[John Stephen Mangam]

Hey Mohammed,

Thank you for the solution.

I'm not able to send additional params to the asp.net core controller.

<ejs-grid id="audioFilesSearchGrid" load="onLoad"

          allowPaging="true" allowSorting="true" allowFiltering="true" actionBegin="tagACustomModel">

    <e-data-manager url="@Url.Action("GetSomeTiles", "Test")" adaptor="UrlAdaptor"></e-data-manager>

    ...

</ejs-grid>

<script>

function tagACustomModel()

{

var grid = document.getElementById("tilesSearchGrid").ej2_instances[0];

        grid.Query.addParams('MyParameter', 'MyValue');

} 

I get an error about the query

[Mohammed Farook J]

Hi John, 

 

From your given code, we found that you have incorrectly mentioned query property of the Grid in the actionBegin event and also we need to handle this addParams values in server side by extending DataManagerRequest class to get that values. Please refer the below code snippet, 

 

Grid: 

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

 

</ejs-grid> 

 

<script type="text/javascript"> 

    function actionBegin(args) { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.query.addParams('MyParameter', 'MyValue'); 

    } 

</script> 

 

-------------------------------------------------------------------------------------------------------------------------- 

 

Controller: 

public class HomeController : Controller 

    { 

        public static List<Orders> order = new List<Orders>(); 

        public IActionResult Index() 

        { 

           return View(); 

        } 

        public IActionResult UrlDatasource([FromBody]TestDm dm) 

        { 

                        ... 

       } 

 

        public class TestDm : DataManagerRequest 

        { 

            public string MyParameter { get; set; } 

        } 

   } 

 

After using this solution, you can get the addParams values in server side like below screenshot, 

 

 

We  have prepared the sample with this requirement and that can be download from the below link, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/I222477199776186.zip 

 

 

 

Regards, 

J Mohammed Farook