Kendo Grid( JQuery) with custom paging and dynamic columns

Question

My Kendo Grid shows the dynamic columns and also needs custom paging as the total records count is very big.

I am able to successfully implement the custom paging part, but the dynamic columns thing is not working.

My scenario is, from the response data I will generate the columns names as string array and send it as part of the action method response.

I can see that, columns I am able to send it to the grid but it is not considering the columns list after the response is called.

my code is

        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
        });

And creating the datasource like below...

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;
    }

I am putting the dynamic columns list to "totalColumns" variable in the "Parse" block of Datasource. I am the grid is not taking the columnslist from the response.

Is this expectation possible?? If it is what I am missing here?

Thanks in advance.

Kokirala Sudheer Kokirala Sudheer · Accepted Answer · 2019-05-12T07:31:46

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;
}

Kendo Grid( JQuery) with custom paging and dynamic columns

1 Answers