I need to check all the check boxes in one of the cell in the Child rows when a check box in the parent row is checked. I need to get this done using javascript. I am using WebhierarchicalDataGrid 9.2.
I am not familar with the Client methods. I need methods to access WebhierarchicalDataGrid not the UltraWebGrid ( i guess the methods are different)
Thanks,
Hemant
Hello hemant_kg
I’ve written this code a while ago. What the code do is when you check either uncheck a checkbox from parent Row, the code check / uncheck all checkboxes in its child rows.
<script type="text/javascript">
var whdg;
function InitializHandler(sender, args) {
whdg = sender;
}
var isChecked = false;
// Loop through all child island's rows check either uncheck the checkbox according to parent row checkbox state.
function ClickHandler(sender, args) {
isChecked = args.get_item().get_row().get_cell(0).get_element().children[0].checked;
var rowIndex = args.get_item().get_row().get_index();
var childGrids = whdg.get_rows().get_row(rowIndex).get_rowIslands();
for (var j = 0; j < childGrids[0].get_rows().get_length(); j++) {
childGrids[0].get_rows()
.get_row(j).get_cell(0)
.get_element()
.children[0].checked = isChecked;
</script>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server" Height="350px"
AutoGenerateBands="false" AutoGenerateColumns="false" DataMember="Parent" Width="832px"
InitialDataBindDepth="1" InitialExpandDepth="1"
DataKeyFields="id">
<ClientEvents Initialize="InitializHandler" Click="ClickHandler"/>
<Columns>
<ig:TemplateDataField Key="CheckBox">
<ItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" />
</ItemTemplate>
</ig:TemplateDataField>
<ig:BoundDataField Key="id">
</ig:BoundDataField>
<ig:BoundDataField Key="Data">
</Columns>
<Bands>
<ig:Band Key="ChildBand" DataMember="Child">
<Header Text="CheckBox"/>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ig:Band>
</Bands>
</ig:WebHierarchicalDataGrid>
</div>
</form>
Hope this helps