Grid Widths

[PPCnSEO]

We have a grid with variable width columns and the kendo grid seems to be lacking some functionality.

The grid sets all columns with unassigned widths at the same width.
If it could behave a bit more like an HTML table it would be much more useful.

I have several columns which are a static width which work fine.
However I have some wide and some narrow content columns of variable width.
I could fix the width of most of these but this would lose fluidity on larger screens and risk wasting space.
If I leave it to kendo then the short ones would have excess space and the longer ones either wrap excessively or lose content.

What would be great would be if columns narrower than the average available, shrunk to fit - freeing up additional width for the widest columns.
I know performance (which would likely be hit by doing this) is important to the kendo philosophy but so is functionality which would improve a lot.

As much as we all dislike them, html tables do this almost perfectly.


While intelligent column widths would be fantastic, another solution and very useful feature would be user resizable columns.
Easy drag-drop resizing would be an added feature and help out when the kendo widths are not appropriate.

[Dimo]

Hi Mark,

Table columns with no explicit widths are equally wide when scrolling is enabled (which is by default). Scrolling requires a fixed table layout to be triggered (via CSS), which leads to the observed layout.

If you disable scrolling, automatic table layout will be used, and column widths will depend on the browser and cell content.

http://demos.kendoui.com/grid/sorting.html

Column resizing will be implemented in the future.

Greetings,
Dimo
the Telerik team

[Voss]

Dimo,

I don't understand the response.

Are you saying I can define the layout for column width when set to scrollable or not scrollable?
"Scrolling requires a fixed table layout to be triggered (via CSS)". Do you have an example of this?

thanks.

[Dimo]

Hello Voss,

"Scrolling requires a fixed table layout to be triggered (via CSS)"

What I meant to say is that the Grid CSS code us written in such a way, so that when scrolling is enabled, a fixed table layout style is applied to the widget's <table> element. You can override this, of course, but the Grid may lose the alignment between header cells and data cells, so I don't recommend doing this.

If you want automatic table layout, simply disable scrolling, nothing more.

All the best,
Dimo
the Telerik team

[Voss]

Dimo,

Thanks for the reply and I apologize.
But I'm still a little confused. I'm coming from coding in Silverlight the past few years so still not up to speed yet.

1. If scrolling is enabled, can I set custom width on the columns on the table/grid layout?

2. If "Yes", do you have any sample code of how to do that (either with a table or div)?

[Dimo]

Hi Voss,

1. Yes, you can specify widths in the columns' configuration.

2. http://demos.kendoui.com/overview/index.html

All the best,
Dimo
the Telerik team

[Voss]

Dimo,

That link just took me to the overview demo page that I've been through many times and it is lacking for the most part.

Can you point me to some actual working code to how to set column width when scrolling is enabled?

Sorry, but I'm just used to Telerik support having a working sample for just about everything they provide.

voss.

[Dimo]

Hello Voss,

If you click on the "View Code" tab just below the example, you will see the Grid configuration with column widths set.


Dimo
the Telerik team

[Voss]

I figured out the issue I was having.

The div/grid must have a width set if each column has a width set.

If not then the widths properties are ignored.

Once I set the width on the div everything worked fine.

[Agnes]

Hi,
Column resizing is definitely needed. Users are so familiar with that behaviour.

Regards,
Agnes

[David]

Thanks a lot for explaining the way in which Kendo works! this thread has been very helpful.
I hope the column width problem gets solved soon.

[Steve]

Ditto. 

+1

[Chandler]

For the sake of discussion, if this has not been fixed/implemented yet..

A way around this for those of you still having problems ( I was, in IE ), you could apply the table-layout style that was discussed above, manually (I did not want scroll bars). I did this by adding a class 'gridnameTable' to one of my .HeaderHtmlAttributes configuration settings (on one of my columns), and then implemented the following JavaScript:

$(document).ready(function () {
    $('.costingTable').closest('table').addClass("fixedTable");
});

The style:

.fixedTable
{
    table-layout: fixed;
}

This way, in IE, the width styles are utilized as expected/desired for the columns, and the grid still behaves as desired w/o scrolling (expands/shrinks/etc).

Regards,

[Garry]

URL above is broken.

[Sebastian]

These urls are quite old, dating before our first Kendo UI official release, and indeed appear to be broken - sorry for that. For your convenience, here's the proper url to the grid sorting demo:

http://demos.telerik.com/kendo-ui/web/grid/sorting.html

Regards,
Sebastian
Telerik