Kendo Grid(JQuery)具有自定义分页和动态列

时间:2019-01-15 17:30:28

标签: jquery .net-core kendo-grid

我的Kendo网格显示动态列,并且由于总记录数非常大,还需要自定义分页。

我能够成功实现自定义分页部分,但动态列功能无法正常工作。

我的情况是,我将从响应数据中将列名称生成为字符串数组,并将其作为操作方法响应的一部分发送。

我可以看到,我可以将列发送到网格,但是在调用响应后,它没有考虑列列表。

我的代码是

        var content = createkendoDataSource(APIRequest);

        $("#grid").kendoGrid({
            dataSource: content,
            horizontalScrolling: true,
            verticalScrolling: true,
            scrollable: true,
            pageable: {
                messages: {
                    empty: "No search results found."
                },
                input: false,
                numeric: true,
                previousNext: true,
                butonCount: 5,
                pageSize: 10,
                alwaysVisible: true,
                pageSizes: [10, 25, 50, 100]
            },
            columns: content.totalColumns
        });

并按如下所示创建数据源...

function createkendoDataSource(APIRequest) {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/api/Search/Search",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    data: arfAPIRequest,
                    dataType: "json",
                    cache: false
                },
                parameterMap: function (options) {
                    APIRequest.pageSize = options.pageSize;
                    APIRequest.page = options.page;
                    var request = JSON.stringify(APIRequest);
                    return request;
                }
            },
            serverPaging: true,
            pageSize: 10,
            schema: {
                data: "results.results",
                total: "total", // total is returned in the "total" field of the response,
                parse: function (response) {
                    totalColumns = generateColumns(response.columns);
                    return response;
                }
            }
        });

        return dataSource;
    }

我将动态列列表放到Datasource的“ Parse”块中的“ totalColumns”变量中。我是网格没有从响应中获取columnlist。

这可能吗?如果这是我在这里想念的?

谢谢。

1 个答案:

答案 0 :(得分:0)

var content = createkendoDataSource(sr, APIRequest);

                var configuration = {
                    dataSource: content,
                    scrollable: false,
                    pageable: {
                        input: false,
                        numeric: true,
                        butonCount: 5,
                        pageSize: 10,
                        alwaysVisible: true,
                        previousNext: true
                    },
                    columns:sr.columns,
                    serverPaging: true
                };

                var grid = $("#gridSamples").kendoGrid(configuration).data("kendoGrid");
                grid.setOptions({ columns: columns });

                grid.bind("page", pageChange);
                grid.dataSource.page(page);    

function createkendoDataSource(res, APIRequest) {
        var dataSource = new kendo.data.DataSource({
            serverPaging: true,
            transport: {
                read: function (options) {
                    options.success(res);
                }
            },
            pageSize: 10,
            schema: {
                model: res,
                data: "results.results",
                total: "totalRecords"
            }
        });
    return dataSource;
}