Apply minimum column width during column resize

Thread is closed for posting
1 posts, 0 answers
  1. AA935EF1-0CA8-4FFB-84B0-095C38A68F6E
    AA935EF1-0CA8-4FFB-84B0-095C38A68F6E avatar
    165 posts
    Member since:
    Aug 2011

    Posted 29 Jul 2014 Link to this post

    Requirements

    Telerik Product and Version

    Kendo UI 2013.3.+

    Supported Browsers and Platforms

    all

    Components/Widgets used (JS frameworks, etc.)



    PROJECT DESCRIPTION 
    The code snippet below demonstrates how to use the internal Grid column resizing API to enforce a minimum column width during column resize. When the user starts resizing, a "start" event is fired and some references are saved. Then they are used in the "resize" event, which is fired continuously during resizing. The new column width is periodically checked and if decreases below the set minimum width, the minimum column width is enforced back. Since the Grid table(s) also receive a width style during resizing, it is overridden as well, when needed. A similar logic can be used to enforce a maximum width.

    $(function(){
       
    $("#grid").kendoGrid({
       /* widget configuration here */
    });
      
    var minTableWidth;
    var minColumnWidth = 100;
    var th;
    var idx;
    var grid;
       
    $("#grid").data("kendoGrid").resizable.bind("start", function(e) {
       th = $(e.currentTarget).data("th");
       idx = th.index();
       grid = th.closest(".k-grid").data("kendoGrid");
    });
      
    $("#grid").data("kendoGrid").resizable.bind("resize", function(e) {
       if (th.width() >= minColumnWidth) {
          minTableWidth = grid.tbody.closest("table").width();
       }
       
       if (th.width() < minColumnWidth) {
          // the next line is ONLY needed if Grid scrolling is enabled
          grid.thead.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);
       
          grid.tbody.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);
       }
    });
       
    });

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.