Change column widths after grid created

9 posts, 0 answers
  1. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 30 Jan 2013 Link to this post

    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 ???
    })
  2. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 01 Feb 2013 Link to this post

    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]);
            }
        }
    });

  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Feb 2013 Link to this post

    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!
  5. Greg
    Greg avatar
    7 posts
    Member since:
    Jan 2009

    Posted 22 Jul Link to this post

    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.

  6. Scott
    Scott avatar
    9 posts
    Member since:
    Jul 2012

    Posted 22 Jul in reply to Greg Link to this post

    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");
            }
        }
    }

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 26 Jul Link to this post

    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.
     
  8. Greg
    Greg avatar
    7 posts
    Member since:
    Jan 2009

    Posted 26 Jul Link to this post

    Scott,

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

     

    Alexander, Thanks for the confirmation.

     

    -Greg

  9. Marc
    Marc avatar
    9 posts
    Member since:
    Sep 2016

    Posted 27 Sep in reply to Alexander Valchev Link to this post

    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!
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Sep Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready