This is a migrated thread and some comments may be shown as answers.

Change column widths after grid created

9 Answers 5170 Views

Grid

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

answered on 01 Feb 2013, 02:44 PM

This is what I have come up with, not sure how robust it is. Feedback is appreciated.

Presume
grid is id "grid"
getSettings returns a JSON such as
{ field-name-1: width-1
, field-name-2: width-2
...
, field-name-n: width-n
}

$.ajax({url: getSettingsUrl, data:{property:"column-widths"}})

.done (function(data){

var

field, th, index,

headerTable = $('#grid'.k-grid .k-grid-header table'),

contentTable = $('#grid'.k-grid .k-grid-content table'),

;

for (field in data) {

th = $(headerTable).find('th[data-field="'+field+'"]');

if (th.length) {

index = $.inArray(th[0], th.parent().children(":visible"));

col = headerTable.find('colgroup col:eq('+index+')')

.add (contentTable.find('colgroup col:eq('+index+')'))

;

col.css('width', data[field]);

}

});

answered on 22 Jul 2016, 11:57 PM

I look forward to hearing if there is a better way, but just this week I solved this using code similar to the above. First, I added a new value to every column definition called minWidth, for example:

{

field: "Comment",

title: "Comments",

required: false,

width: 150,

minWidth: 80,

attributes: { class: "editable-cell" },

}

And then I set resizeable true, and defined the columnResize listener like this:

columnResize: function(e)

{

var columns = $("#grid").data("kendoGrid").columns;

var headerTable = $('.k-grid .k-grid-header table');

var contentTable = $('.k-grid .k-grid-content table');

var columnDefs = $(".k-grid-content colgroup:first col");

for (var i = 0; i < columns.length; i++)

{

var minWidth = columns[i].minWidth;

var currentWidth = parseInt(columnDefs[i].style["width"], 10);

if (minWidth > currentWidth)

{

// Reset the headers and columns to the same minimum width

var col = headerTable.find('colgroup col:eq('+i+')')

.add(contentTable.find('colgroup col:eq('+i+')'));

col.css('width', minWidth + "px");

}