CODEWITHSUNDEEP
javascriptangularjskendo-uikendo-grid
Haris
Haris

Reputation: 721

KendoUI Grid Server Dynamic Column binding in service callback

I am trying to understand the working of KendoUI Grid. I have successfully returned paged data from the server and server side paging is also working.

But I am having problem with setting column details dynamically i.e. neither the titles show up nor the template, the column header shows the name of bound field. I think the problem is related to when columns are initialized because I get to know about the details of columns after call back from the service.

Here is how I am binding the grid:

$("#kGrid").kendoGrid({
            dataSource: {
                serverPaging: true,
                schema: {
                    data: "data",
                    total: "total"
                },
                pageSize: 10,
                transport: {
                    read: function(options) {
                        var searchParam = new Model.SearchParamsCM('QuoteDomainTasks', 'QuoteList', false, options.data.page, options.data.pageSize);

                        seHttpService.GetWithParms('/spa/api/genericrequest', searchParam)
                            .then(function (result) {
                                var data = oThis.createJSONFromResults(result.data, oThis);

                                options.success(data);
                            },
                            function(result) {
                                options.error(result);
                            });
                    }
                }
            },
            columns: oThis._gridColumns, 
            scrollable: false,
            pageable: { "refresh": true, "pageSizes": true },
            sortable: true,
            filterable: true
        });

Where oThis._gridColumns is populated inside oThis.createJSONFromResults. This code is in TypeScript.

Upvotes: 0

Views: 1549

Answers (1)

Lars Höppner
Lars Höppner

Reputation: 18402

The data source is only for reading the content of the grid, not its configuration (which only needs to be created once, when setting up the grid). You need to separate these two concerns so that oThis._gridColumns has the column definition when you call $("#kGrid").kendoGrid().

Dynamically changing the column definitions is not really supported by Kendo Grid, so if you need that, your options are:

  • recreate the whole grid whenever the column definition has to change
  • change things manually (e.g. if only titles change, you could do that by selecting and editing the elements with jQuery)
  • try to mess with the internals, e.g. something like the following

(note this is largely untested and might break with new Kendo UI releases)

grid.options.columns = changedColumnDefinition;
grid.table.find(">thead").empty();
grid._columns(grid.options.columns);
grid._thead();

Upvotes: 1

Related Questions