Minimum Width for Grid Columns

6 posts, 0 answers
  1. Bjorn
    Bjorn avatar
    4 posts
    Member since:
    May 2016

    Posted 14 Sep 2016 Link to this post

    This seems to be a pretty good example, but unfortunately it doesn't work:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/apply-minimum-width-during-column-resize

    Is this deprecated? The binding to the resizable-events doesn't seem to work.

     

  2. Bjorn
    Bjorn avatar
    4 posts
    Member since:
    May 2016

    Posted 14 Sep 2016 in reply to Bjorn Link to this post

    OK nevermind, it works!
  3. Patrick
    Admin
    Patrick avatar
    203 posts

    Posted 14 Sep 2016 Link to this post

    Hello Bjorn,

    Glad the example is working for you!  

    Regards,
    Patrick
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  4. Bjorn
    Bjorn avatar
    4 posts
    Member since:
    May 2016

    Posted 14 Sep 2016 Link to this post

    var minColumnWidth,
                th,
                field,
                column,
                idx,
                grid = $('#grid').data('kendoGrid');
     
            grid.resizable.bind("start", function(e) {
                th = $(e.currentTarget).data("th");
                field = th.data("field");
                idx = th.index();
     
                var column = $.grep(grid.columns, function (item) {
                    return item.field === field;
                })[0];
     
                minColumnWidth = parseInt(column.minwidth,10);
            });
     
            me.kendoGridObject.resizable.bind("resize", function(e) {
                if (th.width() < minColumnWidth) {
                    // the next line is ONLY needed if Grid scrolling is enabled
                    grid.thead.closest("table").children("colgroup").find("col").eq(idx).width(minColumnWidth);
                    grid.tbody.closest("table").children("colgroup").find("col").eq(idx).width(minColumnWidth);
                }
            });

     

    This is our solution, maybe this helps somebody. We're now able to configure the minimum column width through

    columns: {
        {
            minwidth:"200px"
        }
    }

  5. Cristian
    Cristian avatar
    1 posts
    Member since:
    Apr 2017

    Posted 04 May in reply to Bjorn Link to this post

    it's throwing a "me is not defined" error to me
  6. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    571 posts

    Posted 08 May Link to this post

    Hi, Christian.

    The reason for the snippet not working is because it's out of context e.g. the me variable is specific for Bjorn's project.

    In his snippet it stands for a cached reference to the grid object, which in our example (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/apply-minimum-width-during-column-resize) we reference by full identifier e.g. $("#grid").data("kendoGrid"). 

    Regards,
    Ivan Zhekov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top