How to load data on-demand to Grid based on PageSize property of screen?

When the page size of the lightswitch screen is set, then ej grid will act as load at once i.e it will fetch data from database only once and act on cached data. But the user may like to retrieve the records from the database similar to lightswitch paging i.e perform on demand paging on the records in the database.

Solution:

We can achieve the above requirement by passing the service link to the ejDataManager and assign it as the grid dataSource. Using the DataManager, we can bind the service url as the grid dataSource by mentioning the link in the “url” property of the ejDataManager.

Thus based on the grid actions, the query is processed on the database and retrieved and bound to the ejGrid

We can set the default page size of the grid using the pageSettings.pageSize property of the Grid. Refer the below api documentation for more information on pageSize property.

http://help.syncfusion.com/js/api/ejgrid#members:pagesettings-pagesize

Example:

In the following example, we have assigned the service url as grid dataSource and have enabled paging to Grid.

Depending on the page size, Grid loads the data from dataSource and so you can able to retrieve all records from the dataSource via ej.DataManager.

JS:

contentItem.value.oncollectionchange = function (screen) {
 
        if (itemTemplate.hasClass('e-grid')) {
            itemTemplate.ejGrid('destroy');
        }
        var dataManger = ej.DataManager({
            url: "/ApplicationData.svc/Table1Items"
        });
        itemTemplate.ejGrid(
            {
                dataSource: dataManger,
                allowSorting: true,
                allowPaging: true,
                columns: [
                            { field: "OrderID" },
                            { field: "EmployeeID" },
                            { field: "City" },
                            { field: "Freight" }
                ]
            });
 
    }

Result: