Apply minimum column width during column resize

Thread is closed for posting
1 posts, 0 answers
  1. Kendo UI
    Kendo UI avatar
    165 posts
    Member since:
    Aug 2011

    Posted 29 Jul 2014 Link to this post


    Telerik Product and Version

    Kendo UI 2013.3.+

    Supported Browsers and Platforms


    Components/Widgets used (JS frameworks, etc.)

    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.

       /* 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

Back to Top

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