Regarding Kendo grid

[Arun]

Hi, 

 

I have few questions regarding kendo grid, i have implemented kendo grid for three nested levels, in every level it has checkboxes, i want to do if i select the parent level checkbox, it should  expand its child and all child checkboxes should also selected, is it possible in kendo-grid??
if so do you have any demo link?

i have attached the image for you understanding, but in that it has only one level, in my case i have two nested levels

Thank you

[Neli]

Hi Arun,

To acheive the desire behavior you could use the following approach:

- Attach a change event to each checkbox using jQuery inside dataBound.

  dataBound: function () {
            bindCheckboxSelection(this);
 }

- When a parent checkbox is checked, use expandRow() to open the child grid.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/expandrow 

- Then, you can recursively call .select() on each child row and expand further levels.

      // Attach change event to checkbox cells
      function bindCheckboxSelection(grid) {
        grid.tbody.find("tr").each(function () {
          var $row = $(this);
          $row.find("input[type=checkbox]").off("change").on("change", function () {
            var isChecked = $(this).is(":checked");
            var gridInstance = grid;
            var dataItem = gridInstance.dataItem($row);
            if (isChecked) {
              gridInstance.select($row);
              // Expand the row
              gridInstance.expandRow($row);

              // Wait a bit for the child grid to render
              setTimeout(function () {
                var childGrid = $row.next().find(".k-grid").data("kendoGrid");
                if (childGrid) {
                  childGrid.tbody.find("tr").each(function () {
                    var childRow = $(this);
                    childGrid.select(childRow);
                    childGrid.expandRow(childRow);

                    // Third level selection
                    setTimeout(function () {
                      var thirdGrid = childRow.next().find(".k-grid").data("kendoGrid");
                      if (thirdGrid) {
                        thirdGrid.tbody.find("tr").each(function () {
                          thirdGrid.select($(this));
                        });
                      }
                    }, 300);
                  });
                }
              }, 300);
            }
          });
        });
      }

Here is a Dojo example where this is demonstrated - https://dojo.telerik.com/PTTdoayb.

I hope this helps.

Regards,
Neli
Progress Telerik