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

Hide Group Columns When Grid is Grouped Initially


Product Progress® Kendo UI® Grid for jQuery


I have enabled the hideOnGroup option, but the column is still visible when the Grid is loaded initially. How can I hide the grouped column when the dataSource is grouped initially?

By design, the hideOnGroup option specifies if the column will be hidden when the Grid is grouped upon user interaction. For this reason, even if the dataSource is grouped initially using the group option, the respective column is visible in the table.

The example below demonstrates how the grouped column can be hidden initially.


  1. Handle the dataBound event.
  2. Retrieve the Grid groups using the dataSource group method.
  3. Use the Grid hideColumn method.
    <div id="grid"></div>
      $(document).ready(function() {
          dataSource: {
            type: "odata",
            group: { field: "ShipCity" },
            transport: {
              read: ""
            schema: {
              model: {
                fields: {
                  OrderID: { type: "number" },
                  Freight: { type: "number" },
                  ShipName: { type: "string" },
                  OrderDate: { type: "date" },
                  ShipCity: { type: "string" }
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          height: 550,
          filterable: true,
          groupable: true,
          pageable: true,
          columns: [
              filterable: false
              field: "OrderDate",
              title: "Order Date",
              format: "{0:MM/dd/yyyy}"
            }, {
              field: "ShipName",
              title: "Ship Name"
            }, {
              field: "ShipCity",
              title: "Ship City",
              hideOnGroup: true

        var grid = $("#grid").data("kendoGrid"); //get a reference to the already initialized Grid"dataBound", function(e){ //handle its DataBound event one (the event handlers that are attached with "one" will be executed only once.)
          var grid = e.sender;
          var gridGrouping =; //Get the Grid's groups

          if(gridGrouping.length > 0) { //if there are initial groupings
            for(var i = 0; i < gridGrouping.length; i++) { //loop through them 
              grid.hideColumn(gridGrouping[i].field); //and hide the respective columns

See Also

In this article