Grid Widths

15 posts, 0 answers
  1. PPCnSEO
    PPCnSEO avatar
    16 posts
    Member since:
    Nov 2011

    Posted 25 Nov 2011 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Nov 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Voss
    Voss avatar
    17 posts
    Member since:
    Jan 2011

    Posted 27 Nov 2011 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Nov 2011 Link to this post

    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!
  6. Voss
    Voss avatar
    17 posts
    Member since:
    Jan 2011

    Posted 28 Nov 2011 Link to this post

    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)?


  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Nov 2011 Link to this post

    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!
  8. Voss
    Voss avatar
    17 posts
    Member since:
    Jan 2011

    Posted 28 Nov 2011 Link to this post

    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.
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Nov 2011 Link to this post

    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!
  10. Voss
    Voss avatar
    17 posts
    Member since:
    Jan 2011

    Posted 29 Nov 2011 Link to this post

    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.
  11. Agnes
    Agnes avatar
    1 posts
    Member since:
    Sep 2008

    Posted 19 Dec 2011 Link to this post

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

    Regards,
    Agnes
  12. David
    David avatar
    2 posts
    Member since:
    Dec 2011

    Posted 08 Feb 2012 Link to this post

    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.
  13. Steve
    Steve avatar
    3 posts
    Member since:
    Jun 2012

    Posted 08 Aug 2012 Link to this post

    Ditto. 

    +1
  14. Chandler
    Chandler avatar
    1 posts
    Member since:
    Jul 2012

    Posted 18 Mar 2013 Link to this post

    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,
  15. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 20 May 2014 in reply to Dimo Link to this post

    URL above is broken.
  16. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 20 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready