John Kattenhorn
John Kattenhorn

Reputation: 839

How to programically collapse or expand Kendo Grid Group by values in row

I have a requirement to default a grouped grid to collapsed state UNLESS it contains a row with a certain value (Status == "Closed").

I got this far but fell down because the dataView only contains an array of rows of the grouped field not the rows as I've seen before.

  function collapse_rows() {
        var grid = this.grid;
        var dataView = this.dataSource.view();

        for (var i = 0; i < dataView.length; i++) {
            if (dataView[i].status == "Closed") {
                var uid = dataView[i].uid;
                $("#userQuestionSetGrid tbody").find("tr[data-uid=" + uid + "]").
                closest("tr.k-grouping-row").each(
                  function (e) {
                      e.collapseRow(this);
                  });

            } else {
                var uid = dataView[i].uid;
                $("#userQuestionSetGrid tbody").find("tr[data-uid=" + uid + "]").
                closest("tr.k-grouping-row").each(
                    function (e) {
                        //e.collapseRow(this);
                    });
            }
        }
    }

Upvotes: 1

Views: 9641

Answers (1)

ezanker
ezanker

Reputation: 24738

The first level of the dataSource is the groups. Then each group has a property called items which is actually the rows in the group. So try this:

  var grid = $("#grid").data("kendoGrid");
  var dataView = grid.dataSource.view();

   for (var i = 0; i < dataView.length; i++) {
      for ( var j = 0; j < dataView[i].items.length; j++) {        
        if (dataView[i].items[j].status == "Closed") {
          var uid = dataView[i].items[j].uid;
          grid.collapseGroup($("#grid").find("tr[data-uid=" + uid + "]").prev("tr.k-grouping-row"));
        }
      }
   }

Grouping rows are at the same DOM level as regular rows, so you need to use prev() instead of closest().

DEMO

Upvotes: 5

Related Questions