0

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.

1 Answer 1

0

This might help you

.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;
            }
        }
    }
}
1
  • wow..thanx for extensive code. I understood now. What I have done is I have used javascript/jquery to toggle the nested grid panel. Now when I try n use postback on checkbox, it reruns this client side code. This client side code collapse all the rows again. So either I make it completely code behind, or completely client side.
    – anshul
    Nov 2, 2015 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.