Check radgrid item checkbox if its details table items checkbox is checked.

[Swetha]

Hi

I have Radgrid with two checkboxes and details table with checkbox in one column and repeater and checkbox in it in another column. When all items in details table is checked then radgrid checkbox should also be checked. similarly if repeater items are checked then radgrid checkbox should be checked. Please suggest how can this be acheived.

<radgrid>

<mastertableview>

<Columns>

<Gridtemplatecolumn>

<checkboxleft>

</Gridtemplatecolumn>

<Gridtemplatecolumn>
<checkboxright>
</Gridtemplatecolumn>

<detailstable>

<gridtableview>

<columns>

<<Gridtemplatecolumn>
<itemcheckboxleft>
</Gridtemplatecolumn>

<<Gridtemplatecolumn>

<repeater>
<itemcheckboxleft>

</repeater>
</Gridtemplatecolumn>

</columns>

</detailstable>

</columns>

</radgrid>

 

 

 

 

 

 

 

 

 

 

[Tsvetomir]

Hi Swetha,

In order to change the check state of a CheckBox control, you have to add two events - one for the check box in the MasterTableView and one to the check box in the DetailTable. You can then customize the behavior of the check boxes depending on your requirements using JavaScript functions. 

If the check box in the MasterTableView is checked, then you should access the check boxes in the detail table and set their Checked property to true. Similarly, if a check box in the detail table is checked then you have to access the one in the master table and set its state to checked.

You can find more information on how to use the findElement() and findControl() methods in the Access Telerik Controls on Client-Side help article.

Addionally, I have created a sample project which reflects the suggestions above. You can find it attached in the corresponding section.

Kind regards,
Tsvetomir
Progress Telerik

[Swetha]

Thanks for your reply. Functions that you provided will work only on those click events. But in my case I wanted those checkboxes checked/unchecked as soon as the page loads/ by default. So I tried writing javascript on document.ready function I was able to loop through  each master table row in it loop again detail table and get checkbox in details table and check/uncheck mastertable item. on left side. For right side I have a repeater in details table which has checkbox. I am having hard time accessing it. Can you please suggest how that can be done. Below is my javascript code(repeater is the class name that I gave to repeater table)(Code is working fine except at repeatertable where its always accessing first repeater in first row even though it loops through 3rd row.

$telerik.$(document).ready(function () {
           
          var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
          var count = masterTable.get_dataItems().length;
            var checkall;
            var checkalternatives;
          var item;
          
         for (var i = 0; i < count; i++) {
            item = masterTable.get_dataItems()[i];
             checkall = item.findElement("checkAll");
             checkalternatives = item.findElement("checkAllAlternates");
             var nestedView = item.get_nestedViews()[0];
             var checkeditems = 0;
             var checkedrepeateritems = 0
           var repeatercount = 0
             for (var j = 0; j < nestedView.get_dataItems().length; j++) {
                var repeatertable = 0
                if (nestedView.get_dataItems()[j].findElement("cbSelected").checked == true)
                {
                    checkeditems = checkeditems + 1;
                 }
                 repeatertable = nestedView.get_dataItems()[j].findElement("repeater")
                if (repeatertable != null) {
                    repeatercount++;
                    
                   if ($telerik.$('repeatertable input[type="checkbox"]').is(':checked')) {
                   
                            checkedrepeateritems = checkedrepeateritems + 1;
                     
                    }
                }
              
             }
             var length = nestedView.get_dataItems().length;
            if (checkeditems == nestedView.get_dataItems().length) {
                checkall.checked = true;
             }
             if (repeatercount!=0) {
             if (checkedrepeateritems == repeatercount) {
              checkalternatives.checked = true;
            }}
            }
        });

[Tsvetomir]

Hi Swetha,

Thank you for the provided code snippet and elaborated details on your scenario.

If the "repeater" and "checkAllAlternates" controls do not have the required runat="server" attribute, unexpected behavior might occur. Please ensure that it is set.

Furthermore, you can try using the built-in .findElement() method to access the repeater and see if that works for you. To get a reference you can either use the Page load event as shown in the example below, or subscribe the grid to its OnGridCreated client-side event and run the logic there.

$telerik.$(document).ready(function () {
    // ...
    for (var i = 0; i < count; i++) {
        // ...
        for (var j = 0; j < nestedView.get_dataItems().length; j++) {
            // ...
            repeatertable = $telerik.findElement(nestedView.get_dataItems()[j], "repeater”);
            // ...
        }
        // ...
    }
});

More information on accessing controls and elements could be found here: Access Telerik Controls on Client-Side.

I have noticed that for each iteration you are setting the repeatertable to "0" and after that in the if clause you are comparing the repeatertable to a null value. I would suggest you to be setting the repeater to "null" rather than "0". 

Please implement the aforementioned suggestions and get back to us to share the outcome. 

Kind regards,
Tsvetomir
Progress Telerik