DxDataGrid - Как реализовать разбиение на страницы на стороне сервера с или без группировки? - PullRequest
Новая
       22

DxDataGrid - Как реализовать разбиение на страницы на стороне сервера с или без группировки?

0 голосов
/ 23 апреля 2020

Я использую REST API для генерации JSON объекта со стороны сервера C#.

У меня готов JSON объект, но так как в нем более 500000 записей, dxdatagrid (DevExtreme) принимает хорошее время для загрузки.

Может ли кто-нибудь подсказать мне, где я могу использовать rest api для получения данных и реализации группирования на стороне сервера + разбиения на страницы?.

Пример кода 

 $("#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)");
    }
});
...