I have 2 grids. Parent Grid has 2 checkbox fields and nested grid has multiple columns with similar 2 checkbox fields. Checkbox field names, Referred and Excluded When the user selects parent row checkbox, I would like to select all the corresponding checkboxes in nested grid. For example, If user selects Referred checkbox, check all the Referred checkboxes in the corresponding nested grid. Also, on check/uncheck of these boxes, I am firing a javscript method to save the value to database.

This is the designer code,

<asp:GridView ID="agVendorExcl" runat="server" 
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:Image ID="imgDocPlus" ImageUrl="../../../images/grid/plus_crop.png" runat="server"/>
            <asp:Panel ID="pnlVendorAssociates" runat="server" CssClass="ExclAssoContainer" style="display: none">
                <asp:GridView runat="server" ID="agVendorExclAssociates" 
                    <Columns>
                        <asp:TemplateField HeaderText="Referred">
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:CheckBox ID="chkAssoPreferred" runat="server" Checked='<%# ((bool)Eval("PreferredInd")) == true %>' />
                                </div>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Excluded">
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:CheckBox ID="chkAssoExcluded" runat="server" Checked='<%# ((bool)Eval("ExcludedInd")) == true %>' />
                                </div>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </asp:Panel>
        </ItemTemplate>
        <ItemStyle Width="23px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Referred" SortExpression="PreferredInd">
        <ItemTemplate>
            <div style="text-align: center">
                <asp:CheckBox ID="chkPreferred" runat="server" Checked='<%# ((bool)Eval("PreferredInd")) == true %>'  />
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Excluded" SortExpression="ExcludedInd">
        <ItemTemplate>
            <div style="text-align: center">
                <asp:CheckBox ID="chkExcluded" runat="server" Checked='<%# ((bool)Eval("ExcludedInd")) == true %>' OnCheckedChanged="chkExcluded_OnCheckedChanged" AutoPostBack="True"/>
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
</Columns>

On code behind, I am calling the checkedchanged event,

protected void chkExcluded_OnCheckedChanged(object sender, EventArgs e)
{
    CheckBox chkAll = (sender as CheckBox);
    if (chkAll != null)
    {
        GridViewRow row = chkAll.NamingContainer as GridViewRow;
        if (row != null)
        {
            GridView agVendorExclAssociates = (GridView)row.FindControl("agVendorExclAssociates");

            foreach (GridViewRow gvRow in agVendorExclAssociates.Rows)
            {
                CheckBox chkBox = (CheckBox)gvRow.FindControl("chkAssoExcluded");
                chkBox.Checked = true;
            }
        }
    }
}

Issues I am facing,

  1. The postback is causing toggle of nested grid. Event gets triggered, checkboxes get checked, but they are not displayed as checked.

  2. I have added onclick attribute to these checkboxes while binding data to row. On this event, I am saving data to database. But this event is not getting fired now, as I am updating the checkbox from code behind.

  3. Complete Requirement: Display grid. Display child grid. On selecting the parent row checkbox, save the value of parent row to database. On selecting the parent row checkbox, check all the corresponding checkboxes in child grid. On checking any checkbox in child grid, save the value of row to database. Allow collapse/expand of parent row, to display the child grid.

I tried multiple things. Checked any and every solution I could google. Tried javascript/jQuery/Code behind. May be I am missing out on something.

Can anyone please help with this implementation.

Related posts

Recent Viewed