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.

Answer 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

Answer 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.