Enfocing min width on Kendo Grid (jQuery) when grid has hidden columns

Question

I am trying to enforce a min-width rule for resizable columns in the Kendo Grid. I used the sample that they provided here. In their example all of the columns are being displayed. In my case there are some columns which are hidden. I have a sample here using Kendo's Dojo to illustrate my problem. Any column that comes after the hidden column no longer maintains the min-width rule. Best I can figure is that this is an issue with jQuery and it's interactions with elements that have been set to display:none;.

If there is a work-around to get the min-width to be enforced please let me know.

just so that I am clear, you want to be able to resize the columns but have a minimum width on them is that correct? — Simon Price
Yes, the columns should still be able to be resized. When you look at the example the first column will allow you to resize it, but it stops at the min-width. Any column after the hidden one (index 1) will resize to as small as they can get. — Ricca

Simon Price Simon Price · Accepted Answer · 2018-06-28T07:02:51

I appear to have resolved your issue bu moving where you hide the column.

take a look at https://dojo.telerik.com/ozuGilOy/11

$(function(){

        $("#grid").kendoGrid({
          columns: [
            { field: "foo", minResizableWidth: 100 },               
            { field: "bar", minResizableWidth: 100,  hidden: true },
            { field: "baz", minResizableWidth: 100 },
            { field: "abc", minResizableWidth: 100 },
            { field: "def", minResizableWidth: 100 },
           ],
           dataSource: {
               data: [{foo: "item", bar: "number", baz: "one", abc: "col", def: "umn"}]
           },
           columnMenu: true,
           resizable: true
        });


        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);
           }
        });

      $("#grid").data("kendoGrid").hideColumn(1);

    });

--------------EDIT AFTER ANSWER ACCEPTED--------------

Ricca, this is something that we use in production that shows and hides the columns based on a array of hidden columns recorded in our data base.

It this is what we use for saving the visibililty

var grid = $("#" + gridName).data("kendoGrid");
var columns = grid.columns;
            var hiddenColumns = new Array();

$.each(columns,
      (idx, element) => {
          for (let key in element) {
              if (element.hasOwnProperty(key)) {
                  if (element.hidden !== 'undefined' && element.hidden) {
                     if (key === 'field') {
                         hiddenColumns.push(element[key]);
                         }
                     }
               }
         }
   });

     var jsonObj = {
     gridName: gridName,
     columns: hiddenColumns.join()
   }
   ... more code here that saves back to our DB via Ajax

This is how we load on load

var grid = $("#ProductGridName)").data("kendoGrid");
    for (var key in hiddenColumns) {
        var array = hiddenColumns[key].split(",");
        $.each(array, function (i) {
            grid.hideColumn(array[i].toString().split(" ").join(""));
        });
    }

but in terms of showing hiding dynamically, take another look at the edit at the same url, and I have changed the code in this example too to show columnMenu: true,

Enfocing min width on Kendo Grid (jQuery) when grid has hidden columns

2 Answers