Kendo Grid in DetailrowTemplate

5 posts, 0 answers
  1. crazy05
    crazy05 avatar
    72 posts
    Member since:
    Sep 2014

    Posted 09 Mar 2015 Link to this post

    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>
  2. crazy05
    crazy05 avatar
    72 posts
    Member since:
    Sep 2014

    Posted 10 Mar 2015 Link to this post

    Any help  ?
  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 12 Mar 2015 Link to this post

    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!
     
  5. Scott
    Scott avatar
    3 posts
    Member since:
    Jan 2016

    Posted 16 Sep in reply to Rosen Link to this post

    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?

  6. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 19 Sep Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready