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

Resizing column dynamically

3 Answers 719 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 01 Jun 2015, 05:13 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Shawn
Top achievements
Rank 1
answered on 02 Jun 2015, 02:58 PM

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.

0
Pierre
Top achievements
Rank 1
answered on 02 Jun 2015, 04:45 PM

Thanks Shawn ! It works like a charm !

0
Jammer
Top achievements
Rank 1
answered on 02 Sep 2020, 08:18 AM
You are the best!!
Tags
Grid
Asked by
Pierre
Top achievements
Rank 1
Answers by
Shawn
Top achievements
Rank 1
Pierre
Top achievements
Rank 1
Jammer
Top achievements
Rank 1
Share this question
or