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

问题

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.

回答1:

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,

回答2:

I figured out the problem with this after going back and taking another look. The problem is that when a column is hidden in the Kendo Grid the <th> element is set to style="display:none;" but the <col> element is actually removed. This means that the number of <th> elements does not match the number of <col> elements, so the index value for the <col> is off when the width is being set. To get the correct index you must get the index of the <th> element within the :visible subset of the total <th> elements.

来源：https://stackoverflow.com/questions/51072738/enfocing-min-width-on-kendo-grid-jquery-when-grid-has-hidden-columns

标签

jquery

css

kendo-ui

kendo-grid