This is a migrated thread and some comments may be shown as answers.

Dynamic body width based on grid width

2 Answers 102 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Fred asked on 24 Jul 2013, 11:33 PM

As the subject suggests I'm attempting to alter body width to match the width of the grid in cases where the grid ends up bigger than the body. I'm attempting to do that by wiring up the databound event of the grid and then setting the width of the body. However, the grid's width is returning smaller than it actually is so the body is still left behind.

For example, I have a min-width set on the body element in css. In this case it's 1100px. The grid is reporting its width as smaller than that min-width (1088), yet the grid goes well past that width on the screen. Here is the javascript I am trying to use to accomplish this. Any suggestions?

$(function () {

var grid = $(gridNameForEditors).data("kendoGrid");

grid.bind("dataBound", function () {

var grid2 = $(gridNameForEditors);

alert(grid2.width());

document.body.style.width = grid2.width() + "px";

});

})

2 Answers, 1 is accepted

answered on 25 Jul 2013, 03:21 PM

So, as a temporary fix I set a TableHTMLAttribute on the grid to give the table an id which could be queried. Turns out it was the underlying table the grid generated which was the offender and I had been getting the surrounding div which had a smaller width than the table. Then I could switch up my javascript to get the width of that table and set document width to that.

However, this isn't really an ideal situation. So I suppose I'll have to figure out how to better constrain the grid so it is always a fixed width. If anyone wants to save me the trouble and point me to the right place to look, that'd be awesome! ;)