Resizing column dynamically

[Pierre]

Hi,

I have a Grid that is generated dynamically in javascript.

The columns are parametered on the server and I received the configuration in Json. Then I build the Grid as scrollable by default because I can't determine it.

On "databound", I used the "autofit" function to resize each columns. But sometimes, the table width is bigger than the sum of the columns'width and I would like to dispatch the empty width on each columns.

 So, is it possible to resize a column dynamically by setting its width such like that ?

myGrid.columns[0].setWidth("500px");

 

Is it possible to dynamically change the behaviour of a scrollable Grid to a non scrollable Grid ( so that column resizing behaves like if it was initially configured as non scrollable ) ?

 

Thanks for your help,

Regards

[Shawn]

I dynamically resize the columns when a user clicks a column header to sort. I append a pill (from Bootstrap) to the column to indicate the order the column is sorted in. Here's my function:

,resizeColumn: function(gridId, field, width) {
    var header = $(gridId + " .k-grid-header-wrap");
    var content = $(gridId + " .k-grid-content");

    var index = header.find("th[data-field='" + field + "']").index();
    
    console.log('resizeColumn for grid: ' + gridId);
    console.log('field: ' + field + ', width: ' + width);
    console.log('column index: ' + index);

    header.find("colgroup col")
        .eq(index)
        .css({ width: width });

    content.find("colgroup col")
        .eq(index)
        .css({ width: width });
}

This is triggered in the change event in the dataSource.

[Pierre]

Thanks Shawn ! It works like a charm !

[Jammer]

You are the best!!