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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Fetching and Loading items based on page index of the grid

Thread ID:

Created:

Updated:

Platform:

Replies:

141364 Dec 7,2018 10:36 AM UTC Dec 18,2018 05:46 AM UTC ASP.NET Core - EJ 2 7
loading
Tags: DataGrid
John Stephen Mangam
Asked On December 7, 2018 10:36 AM UTC

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 [Syncfusion]
Replied On December 7, 2018 11:32 AM UTC

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
Replied On December 7, 2018 12:21 PM UTC

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 [Syncfusion]
Replied On December 10, 2018 12:47 PM UTC

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
Replied On December 12, 2018 02:11 PM UTC

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 [Syncfusion]
Replied On December 14, 2018 12:09 PM UTC

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
Replied On December 17, 2018 09:59 AM UTC

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 [Syncfusion]
Replied On December 18, 2018 05:46 AM UTC

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,
 
 
 
 
 
Regards, 
J Mohammed Farook 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon