Nested GridViews 从父网格中选择嵌套网格中的所有复选框

Question

我有 2 个网格。父网格有 2 个复选框字段，嵌套网格有多个具有类似 2 个复选框字段的列。复选框字段名称，引用和排除当用户选择父行复选框时，我想选择嵌套网格中的所有相应复选框。例如，如果用户选择引用复选框，则选中相应嵌套网格中的所有引用复选框。此外，在选中/取消选中这些框时，我正在触发一个 javscript 方法来将值保存到数据库中。

这是设计器代码，

<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>

在后面的代码中，我调用了checkedchanged事件，

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;
            }
        }
    }
}

我面临的问题，

1. 回发导致嵌套网格切换。事件被触发，复选框被选中，但它们未显示为选中状态。

2. 在将数据绑定到行时，我已将 onclick 属性添加到这些复选框。在此事件中，我将数据保存到数据库。但是这个事件现在没有被触发，因为我正在从后面的代码中更新复选框。

3. 完成要求：显示网格。显示子网格。在选择父行复选框时，将父行的值保存到数据库。在选择父行复选框时，选中子网格中的所有相应复选框。在选中子网格中的任何复选框时，将行的值保存到数据库。允许折叠/展开父行，以显示子网格。

我尝试了多种方法。检查了我可以用谷歌搜索的所有解决方案。试过 javascript/jQuery/Code 后面。可能是我错过了什么。

任何人都可以帮助这个实现。

Answer 1

这可能对你有帮助

.aspx

<asp:GridView ID="agVendorExcl" runat="server" AutoGenerateColumns="false" OnRowDataBound="agVendorExcl_RowDataBound">
<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" AutoGenerateColumns="false">
                    <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_CheckedChanged" AutoPostBack="true"/>
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
</Columns>
</asp:GridView>

<script type="text/javascript">

    // Bear in mind JavaScript will revert once you do post back
    function collapseExpand(imgID, pnlID) {
        var controlImage = document.getElementById(imgID);
        var controlPanel = document.getElementById(pnlID);

        // Check
        if (controlPanel != undefined && controlImage != undefined) {
            var currentDisplay = controlPanel.style.display;

            // Check
            if (currentDisplay == 'none') {
                controlPanel.style.display = ''; // or block

                // controlImage.src = 'CollapseImage';
            }
            else {
                controlPanel.style.display = 'none';
                // controlImage.src = 'ExpandImage';
            }
        }
    }

</script>

.cs

protected void Page_Load(object sender, EventArgs e)
{
    // Check
    if (!IsPostBack)
    {
        // Variable
        DataTable dtParent = new DataTable();
        DataTable dtChild = new DataTable();
        string[] column = { "PreferredInd", "ExcludedInd" };

        // Loop & Create Column
        for (int i = 0; i < column.Length; i++)
        {
            dtParent.Columns.Add(column[i], typeof(bool));
            dtChild.Columns.Add(column[i], typeof(bool));
        }

        // Create Rows
        for(int i = 0; i< 1; i++)
        {
            dtParent.Rows.Add(false, false);
            dtChild.Rows.Add(false, false);
        }

        // ViewState Child DataTable
        ViewState["DataChild"] = dtChild;

        // Bind
        agVendorExcl.DataSource = dtParent;
        agVendorExcl.DataBind();
    }
}

protected void agVendorExcl_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Check
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Find Control
        Image imgDocPlus = e.Row.FindControl("imgDocPlus") as Image;
        Panel pnlVendorAssociates = e.Row.FindControl("pnlVendorAssociates") as Panel;
        GridView agVendorExclAssociates = e.Row.FindControl("agVendorExclAssociates") as GridView;

        // Check
        if (agVendorExclAssociates != null)
        {
            // Bind Sub GridView
            agVendorExclAssociates.DataSource = ViewState["DataChild"] as DataTable;
            agVendorExclAssociates.DataBind();
        }

        imgDocPlus.Attributes.Add("onclick", "collapseExpand('" + imgDocPlus.ClientID + "', '" + pnlVendorAssociates.ClientID + "')");
    }
}

protected void chkExcluded_CheckedChanged(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");
            Panel pnlVendorAssociates = row.FindControl("pnlVendorAssociates") as Panel;

            // Show After Your Value is Checked else Hide
            pnlVendorAssociates.Style.Add(HtmlTextWriterStyle.Display, chkAll.Checked ? "" : "none");

            foreach (GridViewRow gvRow in agVendorExclAssociates.Rows)
            {
                // Find Control
                CheckBox chkBox = (CheckBox)gvRow.FindControl("chkAssoExcluded");

                // Check
                if (chkAll.Checked) chkBox.Checked = true;
                else chkBox.Checked = false;
            }
        }
    }
}