Kendo Grid, Horizontal scrolling and column sizing

Question

By default, kendo grids will expand to fill their containing div. Its just a table element, so by nature.

<table role="grid">
<colgroup>
<col style="width:200px"> // etc
<colgroup>
<thread>
// content
</thread>
</table>

However when you add more cols (or had too many), they scale back and forth to fit. I wanted horizontal scroll bars on overflow.

To do this I added some code that ran on start, add and reorder.

  this._initWidths = function () {
     var totalWidth = 0;
     for (var i = 0; i < grid.columns.length; i++) {
        var width = grid.columns[i].width;
        $('#myGrid .k-grid-header-wrap colgroup col').eq(i).css('width', width + 'px');
        $('#myGrid .k-grid-content colgroup col').eq(i).css('width', width + 'px');
        totalWidth = totalWidth + width;
     }
     table.css('width', totalWidth + 'px');
  };

However Kendo seems to have its own logic that bumps against this. Colgroup entries will start being deleted, messing up everything.

Is there anything I can do to stop this? Is there a better way to do what I want?

Thanks.

Solution 1

I have a container for the table as:

<div id="myWindow">
    <div id="myGrid"></div>
</div>

and applied the following styles:

#myWindow {
    width: 400px;
    overflow-x: scroll;
}

where you can see that I force the width to 400px and hide (and scroll) what overflows.

Then I define the following grid:

var grid = $("#myGrid").kendoGrid({
    dataSource : {
        data    : entries,
        schema  : {
            model: {
                id: "city"
            }
        },
        pageSize: 5
    },
    columns    : [
        { field: "city", title: "City", width: 100 },
        { field: "time", title: "Time", format: "{0:HH:mm}", width: 200},
        { field: "datetime", title: "Date - Time", format: "{0:yyyy-MM-dd HH:mm}", width: 300 }
    ],
    sortable   : {
        mode       : "single",
        allowUnsort: false,
        field      : "city"
    },
    editable   : "popup",
    navigatable: true,
    pageable   : true
}).data("kendoGrid");

I get the effect that the grid overflows horizontally the size of its container.

See it running here

NOTE What it is even nice is that paging stays as 400px fitting always in the visible area, while the grid is actually 100 + 200 + 300 = 600 (the width of the columns)

EDIT: If you want the width of the grid to be the same of the sum of the columns then you should add (after initializing the grid).

var totalWidth = 0;
for (var i = 0; i < grid.columns.length; i++) {
  var width = grid.columns[i].width;
  totalWidth = totalWidth + width;
}
grid.element.css('width', totalWidth + 'px');

The loop computes the total width and then I set the table to it (not need to change the columns since they are correct).

Set it here

Solution 2

You just need to ensure the Grid is scrollable and set the width of the element from which you create the Grid.

<div id="myGrid" style='width:500px;'></div>

var grid = $("#myGrid").kendoGrid({
    scrollable:true,
    //...
})

Here it is in action.

Comments

[OnaBai]

Is not true the default value for scrollable? Why did you include it as part of the answer? In your answer the only important thing is defining the width of the div that contains the table.

[Tim]

Ok thanks this is half of what I wanted. How can I prevent kendo from expanding to fill the space if column widths are very short? Say you dropped Time to 50, and datetime to 100. Kendo would expand them. How can I stop that? Thanks again.

[OnaBai]

Please, see the EDIT basically is what you were doing in your for loop but a little bit simplified.

[Tim]

Ah sorry for not responding. I ended up writing something similar. However changing the grid element like that will look strange. Instead I changed the table... grid.table.css('width', totalWidth + 'px'); and then the thead. Marked as answer though, since this is close.

[ProfK]

@OnaBai A quick glance at the Kendo docs yields an abundance of this warning regarding scrollable: "by default, except for the widget MVC wrapper". This is a good reminder to not always depend on defaults, and, what is the harm in setting this explicitly in the answer anyway?

[OnaBai]

@ProfK, my comment was because initializing something to the default values should not fix the problem. If the problem gets fixed is actually because something else. In this case what fixed the problem was using a 'div' for containing the grid something that my previous answer (in time) already included.