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

Grid Widths

14 Answers 1178 Views
Grid
This is a migrated thread and some comments may be shown as answers.
PPCnSEO
Top achievements
Rank 1
PPCnSEO asked on 25 Nov 2011, 02:11 PM
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.

14 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Nov 2011, 02:58 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Voss
Top achievements
Rank 1
answered on 27 Nov 2011, 02:41 PM
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.
0
Dimo
Telerik team
answered on 28 Nov 2011, 09:16 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Voss
Top achievements
Rank 1
answered on 28 Nov 2011, 02:55 PM
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)?


0
Dimo
Telerik team
answered on 28 Nov 2011, 04:37 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Voss
Top achievements
Rank 1
answered on 28 Nov 2011, 05:37 PM
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.
0
Dimo
Telerik team
answered on 28 Nov 2011, 06:17 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Voss
Top achievements
Rank 1
answered on 29 Nov 2011, 03:20 PM
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.
0
Agnes
Top achievements
Rank 1
answered on 19 Dec 2011, 11:05 PM
Hi,
Column resizing is definitely needed. Users are so familiar with that behaviour.

Regards,
Agnes
0
David
Top achievements
Rank 1
answered on 08 Feb 2012, 06:33 PM
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.
0
Steve
Top achievements
Rank 1
answered on 08 Aug 2012, 10:26 PM
Ditto. 

+1
0
Chandler
Top achievements
Rank 1
answered on 18 Mar 2013, 07:44 PM
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,
0
Garry
Top achievements
Rank 2
Veteran
answered on 20 May 2014, 09:05 AM
URL above is broken.
0
Sebastian
Telerik team
answered on 20 May 2014, 09:42 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
PPCnSEO
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Voss
Top achievements
Rank 1
Agnes
Top achievements
Rank 1
David
Top achievements
Rank 1
Steve
Top achievements
Rank 1
Chandler
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
Sebastian
Telerik team
Share this question
or