DxDataGrid - How to implement Server side pagination with or without grouping?

Question

I am using REST api to generate JSON object from Server Side C#.

I have my JSON object ready but since its having more then 500000 records, dxdatagrid (DevExtreme) is taking good amount of time to load.

Can anyone suggest me anyway where i can use rest api to get data and implement server side grouping + pagination?.

Sample Code

 $("#tempGrid").dxDataGrid({
    dataSource: baseUrl + "/Api/TempController/GetTempData",
    showRowLines: true,
    showBorders: true,
    filterRow: {
        visible: true
    },
    filterPanel: { visible: false },
    headerFilter: { visible: true },
    allowColumnReordering: true,
    allowColumnResizing: true,
    columnAutoWidth: true,
    columnResizingMode: "widget",
    wordWrapEnabled: false,
    height: 800,

    groupPanel: {
        visible: true,
        allowColumnDragging: true,

    },
    grouping:
    {
        contextMenuEnabled: true,
        expandMode: "buttonClick",  // or "buttonClick"
        autoExpandAll: true,
        allowCollapsing: true
    },
    searchPanel: {
        visible: false
    },
    "export": {
        enabled: false,
        fileName: "Grade_Report_" + exportFormatDate(new Date()) + "",
        allowExportSelectedData: true
    },
    columnFixing: {
        enabled: true
    },
    arrow: true,
    allowFixing: true,
    keyExpr: "Value",
    selection: {
        mode: "single"
    },
    stateStoring: {
        enabled: false,
        type: "localStorage",
        storageKey: "storageExpenseApproval"
    },
    hoverStateEnabled: true,
    pager: {
        showNavigationButtons: true,
        showInfo: true,
        infoText: 'Page {0} of {1} ({2} items)'
    },
    paging: {
        pageSize: 18,
        enabled: true
    },
    scrolling: {
        mode: "standard", // standard, virtual, infinite
        showScrollbar: 'always'
    },
    columnChooser: {
        enabled: true,
        mode: 'select' // select , dragAndDrop
    },
    reordering: true,

    columns: col,
    onOptionChanged: function (e) {
        startTime = StartLoadDataTime();
    },
    onContentReady: function (e) {
        var endTime = EndLoadDataTime();
        $("#spDataLoadTime").text("Data Loaded In " + (endTime - startTime) / 1000 + " Sec(s)");
    }
});

Answer 1

I found a solution that worked for me by just adding your own pagination control outside of the devextreme grid control and bind the DxDataGrid with the paginated list that returns from the server.

1. First you have to modify your service and make it it return a paginated result instead of a single list of results.

2. Add the pagination control to the html page (I am using ngx-pagination you can install it with this: npm install ngx-pagination --save)

   <style>
     .my-pagination /deep/ .ngx-pagination .current {
         background: lightskyblue;
     }
   
     .my-pagination /deep/ .ngx-pagination {
         text-align: center;
         width: 100%;
     }
   
     .btn-light:hover {
         color: #007bff !important;
     }
   </style>
   

3. Add the extra arguments needed for your new paginated service in the request for example:

   pageIndex: this.config.currentPage

4. Bind the DxDataGrid with the paginated list from the server.

So the grid will always just be binded with the current page of your custom pagination control containing a limited number of elements depending of the quantity per page you set up. They will run independently but it works like a charm.

Hope it works out for someone!