Edit this page

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

Your project might require you to 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.

To achieve this behavior: 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.
Example
    <div id="example">
      <div id="grid"></div>

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

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

          var grid = $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              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){
              setGridWidth(e);
            },
            columnShow: function(e){
              setGridWidth(e);
            },
            columnHide: function(e){
              setGridWidth(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
            }
                     ]
          }).data('kendoGrid');

          initialGridWidth = grid.wrapper.width();
        });
      </script>
    </div>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy