This is a migrated thread and some comments may be shown as answers.

Kendo Grid in DetailrowTemplate

4 Answers 57 Views
Grid
This is a migrated thread and some comments may be shown as answers.
crazy05
Top achievements
Rank 1
crazy05 asked on 09 Mar 2015, 07:38 PM
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>

4 Answers, 1 is accepted

Sort by
0
crazy05
Top achievements
Rank 1
answered on 10 Mar 2015, 12:51 PM
Any help  ?
0
Rosen
Telerik team
answered on 12 Mar 2015, 07:07 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Scott
Top achievements
Rank 1
answered on 16 Sep 2016, 05:34 PM

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?

0
Rosen
Telerik team
answered on 19 Sep 2016, 07:25 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Grid
Asked by
crazy05
Top achievements
Rank 1
Answers by
crazy05
Top achievements
Rank 1
Rosen
Telerik team
Scott
Top achievements
Rank 1
Share this question
or