问题
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