Column header not shown with default data source group

2 posts, 0 answers
  1. Larissa
    Larissa avatar
    19 posts
    Member since:
    Dec 2015

    Posted 14 Mar 2016 Link to this post

    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!

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 16 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top