Column header not shown with default data source group

[Larissa]

I using a default group on my Grid that was setted on my Data Source.

Data Source:

function getData() {
        return {
            mode: mode,
            startDate: kendo.toString(pickerStart.value(), "yyyy-MM-dd"),
            endDate: kendo.toString(pickerEnd.value(), "yyyy-MM-dd")
        };
    }

var rowHeaders = ["A", "B", "C", "D"];
var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: url,
                dataType: "json",
                data: getData
            }
        },
        schema: {
            total: "total",
            data: function (data) {
                var dataArray = [];

                var index = 0;
                for (var key in data[0]) {
                    if (Object.prototype.hasOwnProperty.call(data[0], key)) {
                        var property = key;
                        if (property == "date" || property == "type") {
                            continue;
                        }
                        key = {};
                        key["x"] = rowHeaders[index];
                        index++;
                        for (var i = 0; i < data.length; i++) {
                            key["a" + i] = data[i][property];
                            key["type"] = data[i].type;
                        }
                        dataArray.push(key);
                    }
                }

                return dataArray;
            }
        },
        group: { field: "type" } // default group by type
    });

And my Grid:

$("#grid").kendoGrid({
                scrollable: false,
                editable: false,
                autoBind: false,
                dataSource: dataSource
});

If I leave this way, the column headers are not displayed.

I HAVE to set the "columns" configuration property on the grid to make it work (display column headers).

The problem is that my columns are dynamic. The grid will have as much columns as the months the user selects on the Date Picker.

So I can not set the "columns" configuration property when I create the grid.

On "dataBound" I can get the object "columns" by "grid.columns". How can I make the columns headers appear on my grid?

Thanks!

[Boyan Dimitrov]

Hello Larissa,

 

In order to avoid this behavior I would suggest first to populate a columns array that contains all selected months from the date picker and then initialize the Kendo UI Grid with columns options set to the columns array.

 

In other words this would be very similar approach to the with initializing the DataSource and assigning it (first the DataSource is populated with data and then the DataSource instance is passed in the Grid's configuration code). 

 

Regards,
Boyan Dimitrov
Telerik