New to Kendo UI for jQuery? Download free 30-day trial

Resize to Match the Visible Column Widths When Hiding or Showing Grid Columns


Product Progress Kendo UI Grid for jQuery
Preferred Language JavaScript


How can I resize the Grid to match the visible column widths when hiding or showing columns while the sum of the column widths is less than the initial width of the Grid?


This approach prevents the appearance of white space in the widget when the sum of the widths of the visible columns is less than the initial width of the Grid.

  1. Store the initial width of the Grid in a variable.
  2. To call the method that performs the necessary calculations, use the dataBound, columnShow, and columnHide events.

To access and loop through the columns, the setGridWidth() method:

  • Uses the columns field of the Grid.
  • Calculates the sum of the visible column widths.
  • Adds the width of the vertical scrollbar when necessary.
    <div id="example">
      <div id="grid"></div>

        $(document).ready(function() {
          var initialGridWidth;
          function setGridWidth(e){
            var cols = e.sender.columns;
            var currentColWidth = cols.reduce(function(prev, cur){
                return prev += cur.width;
              } else {
                return prev;
            }, 0);

            if(currentColWidth > initialGridWidth){
            } else {
              e.sender.wrapper.width(currentColWidth +;

          var grid = $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "//"
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    ShipCountry: { type: "string" },
                    ShipName: { type: "string" },
                    ShipAddress: { type: "string" }
              pageSize: 30,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
            height: 550,
            sortable: true,
            dataBound: function(e){
            columnShow: function(e){
            columnHide: function(e){
            filterable: true,
            columnMenu: true,
            pageable: true,
            columns: [ {
              field: "OrderID",
              title: "Order ID",
              width: 120
            }, {
              field: "ShipCountry",
              title: "Ship Country",
              width: 320
            }, {
              field: "ShipName",
              title: "Ship Name",
              width: 320
            },  {
              field: "ShipAddress",
              filterable: false,
              width: 320

          initialGridWidth = grid.wrapper.width();

See Also

In this article
Not finding the help you need? Improve this article