Resizing column dynamically

4 posts, 1 answers
  1. Pierre
    Pierre avatar
    11 posts
    Member since:
    May 2015

    Posted 01 Jun 2015 Link to this post


    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 ?



    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,


  2. Answer
    Shawn avatar
    13 posts
    Member since:
    Mar 2015

    Posted 02 Jun 2015 in reply to Pierre Link to this post

    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")
            .css({ width: width });

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

    This is triggered in the change event in the dataSource.

  3. Pierre
    Pierre avatar
    11 posts
    Member since:
    May 2015

    Posted 02 Jun 2015 in reply to Shawn Link to this post

    Thanks Shawn ! It works like a charm !

  4. Jammer
    Jammer avatar
    1 posts
    Member since:
    Jul 2017

    Posted 02 Sep 2020 Link to this post

    You are the best!!
Back to Top