Kendo Grid in DetailrowTemplate

[crazy05]

I am having kendo grid in detailRowTemplate of kendo grid(Primary Grid). In my primary Grid template, I have checkAll Checkbox. If I check that checkbox, I want to check all the checkboxes in the detailGrid related to that particular row. Right now, I am using class to check all checkboxes. So, it is checking all checkboxes for all the rows of the primary Grid. I want to check only the Grid that is related to Primar Grid detail Temlplate. How can I do this ? Below is my code

//Primary Grid
$("#grid").kendoGrid({
        dataSource: dataSource,
        rowTemplate: kendo.template($("#Template").html()),  
        detailTemplate: kendo.template($("#gridtemplate").html()),
        detailInit: detailInit,
        dataBound: function () {
        },
        columns: [
           { field: "Id", hidden: true },
           { field: "Name", title: "Name" },
           { field: "Read", title: "Read" }           
        ]
    });

//Detail Template Grid
detailRow.find(".SiteGrid").kendoGrid({
        dataSource: dataSource,        
        rowTemplate: kendo.template($("#SiteTemplate").html()),   
        columns: [
          { field: "Id", hidden: true },
          { field: "Name", title: "Site", width: 350 },
          { field: "Read", title: "Read", }       
        ]
    });

//Detail Grid Template
<script type="text/x-kendo-template" id="gridtemplate">
    <div class="SiteGrid">
    </div>
</script>

//Primary Grid Template
<script type="text/x-kendo-template" id="Template">
    <tr class="k-master-row k-alt">
        <td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
        <td> #= Name # </td>
        <td><input type="checkbox" name="#: Id #" value="Select All" onclick="CheckCheckboxes(); return true;" /></td>   
    </tr>
</script>

//Detail Grid Template
<script type="text/x-kendo-template" id="SiteTemplate">
    <tr class='k-alt'>
        <td>#: Name #</td>
        <td>
            #if(AccessType == 'Read') { #
            <input type="radio" name="#: Id #" class="read" checked="checked" />
            #}else{#
            <input type="radio" name="#: Id #" class="read" />
            # } #
        </td>      
    </tr>
</script>

//Checking Check boxes
<script>
    function CheckCheckboxes() {    
        $('.read').prop('checked', true);
    }
</script>

[crazy05]

Any help  ?

[Rosen]

Hi,

In order to achieve this you will need to handle the change event of the master checkbox, find the child grid checkboxes and check them. Here is a basic test page which demonstrates a possible implementation.

Regards,
Rosen
Telerik

 

 

[Scott]

This example only works if the row has been expanded before. 

var checkbox = $(this);
var nextRow = checkbox.closest("tr").next(); // find the assosiated detail row
//Note: the row should be expanded at least once as otherwhise there will be no child grid loaded      
      if (nextRow.hasClass("k-detail-row")) {                        
        // and toggle the checkboxes
      nextRow.find(":checkbox")
      .prop("checked", checkbox.is(":checked"));
}

What would be the recommendation if the row has never been expanded?

[Rosen]

Hello Scott,

As mentioned in the sample's code the mentioned approach will indeed work only if the child records exists.

If you want to check the child records if the master checkbox is selected prior to expanding the detail template. You could do so by using the detailInit event to check if the master checkbox is already checked and check the child checkboxes. Here is an updated version of the sample.

Regards,
Rosen
Telerik by Progress