Column Resize - Min Width on Resize

5 posts, 0 answers
  1. John
    John avatar
    17 posts
    Member since:
    Jan 2013

    Posted 25 Feb 2013 Link to this post

    I am trying to prevent a user from resizing a column too small:

    In the demo, if you sort, then resize the sorted column, you can't see the sort arrow or the title

    http://demos.kendoui.com/web/grid/column-resizing.html

    Is there a way to dynamically set the columnWidth?

    I have tried to connect to the columnResize event and check if the newWidth is less than x then set it to y.
    However, the setting of the $el.column.width does not actually redraw it.

    Any suggestions?  Maybe I need to do a refresh after I reset it?  I'd prefer them to not be able to drag past a minimum.

    I also tried setting min-width on all sorts of css:
    .k-grid-header, .k-header, .k-header > a

    -me-
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 27 Feb 2013 Link to this post

    Hello John,

    You are right, that you should bind to the columnResize event of the grid. In the handler, you should check if the width of some <col> element is below the specified value.
    E.g.

    .Events(e => e.ColumnResize("columnResize"))

    function columnResize(e) {
        $("#Grid colgroup col").each(function () {
            if ($(this).width() < 90) {
                $(this).css("width", "90px");
            }
        })
    }

    You could also use the same approach only for a single column if needed
    E.g.
    function columnResize(e){
        $("#Grid colgroup").each(function() {
                if($(this).width() < 90){
                    $(this).find(":nth-child(1)").css("width","90px");
                }
            }
        )
    }

      All the best,
    Dimiter Madjarov
    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. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 20 May 2014 in reply to Dimiter Madjarov Link to this post

    This is an incomplete answer - where do I add the [.Events(e => e.ColumnResize("columnResize"))] code you mentioned above?
    I am using client-side KendoUI and Javascript so the solution needs to fit with the KendoUI philosophy.

    G.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 20 May 2014 Link to this post

    Hello Garry,


    You could take a look at the following documentation page about the columnResize event. It also includes an example demonstrating how to bind to the event in the Kendo UI Web Grid.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Telerik
    Telerik avatar
    4 posts
    Member since:
    Mar 2014

    Posted 18 Mar Link to this post

    Hi

    I have been working on some javascript code that will help achieve this functionality. The motivation behind this was to provide a way in which a command column can be prevented from having its size changed. 

    In one regard, this does act as a minimum size for a column, but if the grid were to increase in size, the original size is enforced. This allows for other grid cells to increase in size by a larger amount.

    Anyway here is a link to a dojo that shows this code in action: http://dojo.telerik.com/@telerik/ikIyU/9

    Note that all columns are required to have a width specified (this effectively becomes a minimum width).

    The browser resize event is used to trigger the size recalculation of the grids.

    This function supports client detail and grouping.

    I have not considered column resizing at this point.

    If you have any ideas for improvements then go for it!
Back to Top
Kendo UI is VS 2017 Ready