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

Change column widths after grid created

9 Answers 4842 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 30 Jan 2013, 09:56 PM
Suppose I have a data source supplying fields x, y, z and I use
$('#grid').kendoGrid ({
...
  columns: [
    { field:'x', title:'X Coordinate', width:'40px' }
  , { field:'y', title:'Y Coordinate', width:'40px' }
  , { field:'z', title:'Z Coordinate', width:'40px' }
  ]
...
})
and get everything looks ok.

Now suppose there is a button that when clicked should set all the column widths to 80px.

$('#button').click(function() {
??? what goes here ???
})

9 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
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]);
        }
    }
});

0
Alexander Valchev
Telerik team
answered on 01 Feb 2013, 03:27 PM
Hi Richard,

This functionality is not supported out of the box.

Currently the Grid provides opportunity to resize the columns only by drag-n-drop (demo). Generally speaking in order to change the width of the column with JavaScript you should modify the width of the corresponding <col> element of the content and header table. Here is a small example.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Greg
Top achievements
Rank 1
answered on 22 Jul 2016, 02:15 PM

Alexander/Telerik,

Is your statement from Feb 2013: 

"This functionality is not supported out of the box. "

still correct?

If so is the example you provided still the recommended way to resize columns from JavaScript?

Thanks,

Greg.

0
Scott
Top achievements
Rank 2
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");
        }
    }
}

0
Alexander Valchev
Telerik team
answered on 26 Jul 2016, 08:27 AM
Hello Greg,

Yes my statement from Feb-2013 is still correct. There is no build-in API method that will allow you to resize the columns via JavaScript.

Regards,
Alexander Valchev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Greg
Top achievements
Rank 1
answered on 26 Jul 2016, 02:43 PM

Scott,

Thanks for sharing that - Great idea and I'm going to give it a try!

 

Alexander, Thanks for the confirmation.

 

-Greg

0
Marc
Top achievements
Rank 1
answered on 27 Sep 2016, 11:58 AM
Will this ever be implemented? I have a grid, which I autosize all columns on the databound listener. After this, some of my columns are not too small, as grid.autoFitColumn does not take into account a row filter box. Thanks!
0
Alexander Valchev
Telerik team
answered on 29 Sep 2016, 08:04 AM
Hi Marc,

The implementation of this feature is not in our immediate plans. I suggest to submit a feature request at Kendo UI Feedback portal. In this way the idea will be reviewed by other users, if it turns out to be popular we will consider it for one of our future releases.

Regards,
Alexander Valchev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Joey
Top achievements
Rank 1
answered on 16 Feb 2017, 08:49 AM
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Alexander Valchev
Telerik team
Greg
Top achievements
Rank 1
Scott
Top achievements
Rank 2
Marc
Top achievements
Rank 1
Joey
Top achievements
Rank 1
Share this question
or