2
Answers

Nested Gridview button click event

Photo of Kranthi Vardhan Kolluru

Kranthi Vardhan Kolluru
7y
314
1
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <style>  
  5.         .GrowStyle  
  6.         {  
  7.             padding: 0px;  
  8.             margin: 0px;  
  9.         }  
  10.         .leftpnl  
  11.         {  
  12.             padding: 10px;  
  13.             background-color: #cad5e2;  
  14.             height: 250px;  
  15.             border-radius: 10px;  
  16.         }  
  17.         .rightpnl  
  18.         {  
  19.             padding: 10px;  
  20.         }  
  21.         .divHead  
  22.         {  
  23.             border-radius: 10px;  
  24.             background-color: #333;  
  25.         }  
  26.         .tableR  
  27.         {  
  28.             padding: 0px;  
  29.             margin: 0px;  
  30.         }  
  31.         .tableR td  
  32.         {  
  33.         }  
  34.           
  35.         .divRes_Panel  
  36.         {  
  37.             padding: 5px;  
  38.         }  
  39.         .TabelRes_Panel  
  40.         {  
  41.             background-color: #fff; /*box-shadow: 1px 1px 1px #888888;*/  
  42.             -webkit-border-radius: 5px;  
  43.             -moz-border-radius: 5px;  
  44.             border-radius: 5px;  
  45.             -webkit-box-shadow: rgba(0,0,0,0.7) 1px 1px 2px;  
  46.             -moz-box-shadow: 1px 1px 2px #ddd;  
  47.             box-shadow: rgba(0,0,0,0.7) 1px 1px 2px;  
  48.             padding: 20px;  
  49.         }  
  50.         .TabelRes_Panel td  
  51.         {  
  52.             padding: 5px;  
  53.             padding-left: 10px;  
  54.         }  
  55.         .TabelRes_Panel_Head  
  56.         {  
  57.             border-radius: 5px 5px 0 0;  
  58.             background-color: #333;  
  59.             color: #fff;  
  60.         }  
  61.         .Head  
  62.         {  
  63.             background-color: #e5ecf5;  
  64.             padding: 5px;  
  65.         }  
  66.           
  67.         .Body  
  68.         {  
  69.             background-color: transparent;  
  70.         }  
  71.     </style>  
  72.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>  
  73.                                 <script language="javascript" type="text/javascript">  
  74.                                     function expandcollapsesub(obj, row) {  
  75.                                         var div = document.getElementById(obj);  
  76.                                         var img = document.getElementById('img' + obj);  
  77.   
  78.                                         if (div.style.display == "none") {  
  79.                                             $(div).slideToggle();  
  80.                                             div.style.display = "block"; //SHOW  
  81.   
  82.                                             if (row == 'alt') {  
  83.                                                 img.src = "images/minus.png";  
  84.                                             }  
  85.                                             else {  
  86.                                                 img.src = "images/minus.png";  
  87.                                             }  
  88.                                             img.alt = "Close to view other Customers";  
  89.                                             // return false;  
  90.                                         }  
  91.                                         else {  
  92.                                             $(div).slideUp();  
  93.                                             // div.style.display = "none"; //HIDE  
  94.                                             if (row == 'alt') {  
  95.                                                 img.src = "images/plus.png";  
  96.                                             }  
  97.                                             else {  
  98.                                                 img.src = "images/plus.png";  
  99.                                             }  
  100.                                             img.alt = "Expand to show Orders";  
  101.                                             // return false;  
  102.                                         }  
  103.   
  104.                                     }  
  105.   
  106.          
  107.                                 </script>  
  108. </head>  
  109. <body>  
  110.     <form id="form1" runat="server">  
  111.     <cc1:ToolkitScriptManager ID="scrimngr" runat="server">  
  112.     </cc1:ToolkitScriptManager>  
  113.     <div>  
  114.         <asp:UpdatePanel ID="updatePanel1" runat="server">  
  115.             <Triggers>  
  116.                 <asp:PostBackTrigger ControlID="chkAllQues" />  
  117.                 <asp:PostBackTrigger ControlID="btnshow1" />  
  118.                 <asp:PostBackTrigger ControlID="grdQues" />  
  119.             </Triggers>  
  120.             <ContentTemplate>  
  121.                 <div class="col-lg-12">  
  122.                     <div class="rightpnl">  
  123.                         <div class="table-responsive">  
  124.                             <table class="table divHead tableR" style="padding: 0px; margin-top: 20px; width: 100%">  
  125.                                 <tr>  
  126.                                     <td width="5%" style="color: #f3f3f3; padding: 10px;">  
  127.                                         <asp:LinkButton ID="lnkBack" runat="server" ForeColor="#f3f3f3" Font-Underline="false"  
  128.                                             ToolTip="Back" class="fa fa-2x fa-chevron-circle-left">  
  129.                                         </asp:LinkButton>  
  130.                                     </td>  
  131.                                     <td width="95%" style="border-top: 0px solid #fff">  
  132.                                         <asp:Label ID="lblSurTitle" runat="server" ForeColor="#54bbe7" Text="" Font-Size="25px"></asp:Label><br />  
  133.                                         <asp:Label ID="lbltitle" runat="server" ForeColor="#54bbe7" Text=""></asp:Label>  
  134.                                     </td>  
  135.                                 </tr>  
  136.                                 <tr>  
  137.                                     <td style="background-color: #cad5e2; color: #333; padding: 0px; margin: 0px;" colspan="2">  
  138.                                         <div style="padding: 0px; margin: 0px;">  
  139.                                             <%--#f3f3f3--%>  
  140.                                             <div class="pull-left" style="text-wrap: normal; background-color: #fdfdfd; border-radius: 5px 5px 0 0;  
  141.                                                 padding: 5px; margin-top: 10px; margin-left: 10px; text-align: center;">  
  142.                                                 <div class="fa fa-2x fa-bar-chart">  
  143.                                                 </div>  
  144.                                                 <asp:LinkButton ID="QS" Width="100px" runat="server" Text="Question Summaries" Font-Underline="false"  
  145.                                                     Font-Bold="true" ForeColor="Black"></asp:LinkButton></div>  
  146.                                             <%--<div class="pull-left" style="text-wrap:normal; background-color:#fff; border-radius:5px 5px 0 0; padding:5px; margin-top:10px; margin-left:10px; text-align:center;">  
  147.                                                 <asp:LinkButton ID="DT" runat="server" Text="Data Trends" Font-Underline="false" Font-Bold="false" ></asp:LinkButton></div>  
  148.                                             <div class="pull-left" style="text-wrap:normal; background-color:#fff; border-radius:5px 5px 0 0; padding:5px; margin-top:10px; margin-left:10px; text-align:center;">  
  149.                                                 <asp:LinkButton ID="IR" runat="server" Text="Individual Responses" Font-Underline="false" Font-Bold="false" ></asp:LinkButton></div>--%>  
  150.                                         </div>  
  151.                                     </td>  
  152.                                 </tr>  
  153.                                 
  154.                                 <tr>  
  155.                                     <td style="background-color: #fdfdfd; border-top: 0px solid #f3f3f3; padding: 15px;  
  156.                                         width: 40%;" colspan="2">  
  157.                                         <div style="width: 200px; background-color: skyblue">  
  158.                                             <a href="javascript:expandcollapsesub('div<%# Eval("slno") %>', 'one');" style="font-weight: 600;  
  159.                                                 color: #000;">  
  160.                                                 <img id="imgdiv<%# Eval("slno") %>" alt="Click to show/hide Response <%# Eval("slno") %>"  
  161.                                                     border="0" src="Images/plus.png" /><b style="background-color: skyblue">CUSTOMERS LIST</b></a>  
  162.                                         </div>  
  163.                                         <div id="div<%# Eval("slno") %>" style="display: none; background-color: #ffffff;  
  164.                                             border: 2px solid skyblue; position: relative; left: 0px; overflow: auto; width: 20%;  
  165.                                             padding: 10px;">  
  166.                                             <asp:CheckBox ID="chkAllQues" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="chkAllQues_CheckedChanged"  
  167.                                                 Text="Select All" />  
  168.                                             <asp:Panel runat="server" ID="Panel1" ScrollBars="Vertical" Height="200px">  
  169.                                                 <asp:GridView ID="grdQues" runat="server" AutoGenerateColumns="false" SkinID="myGreen"  
  170.                                                     ShowFooter="true" Width="100%" OnRowDataBound="grdQues_RowDataBound">  
  171.                                                     <Columns>  
  172.                                                         <asp:TemplateField HeaderText="  ">  
  173.                                                             <ItemTemplate>  
  174.                                                                 <asp:CheckBox ID="chkIsQues" runat="server" Checked="true" />  
  175.                                                             </ItemTemplate>  
  176.                                                             <ItemStyle Width="5%" />  
  177.                                                         </asp:TemplateField>  
  178.                                                         <asp:TemplateField>  
  179.                                                             <ItemTemplate>  
  180.                                                                 <asp:Label ID="lblQID" runat="server" Text='<%#Eval("slno") %>'></asp:Label>  
  181.                                                             </ItemTemplate>  
  182.                                                             <ItemStyle Width="1%" />  
  183.                                                         </asp:TemplateField>  
  184.                                                         <asp:TemplateField HeaderText="Questions">  
  185.                                                             <ItemTemplate>  
  186.                                                                 <asp:Label ID="lblDesc" runat="server" Text='<%#Eval("name") %>'></asp:Label>  
  187.                                                                 <asp:Label ID="lblSDQuesId" runat="server" Text='<%#Eval("slno") %>' Visible="false"></asp:Label>  
  188.                                                             </ItemTemplate>  
  189.                                                             <ItemStyle Width="94%" />  
  190.                                                         </asp:TemplateField>  
  191.                                                         <asp:TemplateField>  
  192.                                                             <FooterTemplate>  
  193.                                                                 <asp:Button ID="btnS" runat="server" OnClick="btnshow_Click" Text="ShowUp" />  
  194.                                                             </FooterTemplate>  
  195.                                                         </asp:TemplateField>  
  196.                                                     </Columns>  
  197.                                                     <FooterStyle />  
  198.                                                 </asp:GridView>  
  199.                                             </asp:Panel>  
  200.                                             <br />  
  201.                                             <asp:UpdatePanel ID="Updatepanel2" runat="server">  
  202.                                                 <ContentTemplate>  
  203.                                                     <asp:Button ID="btnshow1" runat="server" Text="Show Report" CssClass="btn"   
  204.                                                         BorderStyle="Double" BorderColor="#f2f2f2" ForeColor="#ffffff" Font-Bold="true" OnClientClick="return btnshow_Click;"  
  205.                                                         BorderWidth="5" Style="padding: 8px; border-radius: 5px; background-color: #54bbe7;  
  206.                                                         color: #323232;" />  
  207.                                                 </ContentTemplate>  
  208.                                             </asp:UpdatePanel>  
  209.                                         </div>  
  210.                                     </td>  
  211.                                 </tr>  
  212.                                 <tr>  
  213.                                     <td>  
  214.                                     <asp:Label ID="lblmsg" runat="server" ForeColor="Red"></asp:Label>  
  215.                                     </td>  
  216.                                 </tr>  
  217.                             </table>  
  218.                         </div>  
  219.                     </div>  
  220.                 </div>  
  221.             </ContentTemplate>  
  222.         </asp:UpdatePanel>  
  223.     </div>  
  224.     </form>  
  225. </body>  
  226. </html>  
code behind is
 
  1. protected void Page_Load(object sender, EventArgs e)  
  2.    {  
  3.        if (!IsPostBack)  
  4.        {  
  5.            BindGrid();  
  6.        }  
  7.    }  
  8.    void BindGrid()  
  9.    {  
  10.        DataTable dt = new DataTable();  
  11.        DataRow dr = null;  
  12.   
  13.        dt.Columns.Add(new DataColumn("slno", typeof(string)));  
  14.        dt.Columns.Add(new DataColumn("Name", typeof(string)));  
  15.        dt.Columns.Add(new DataColumn("Access", typeof(string)));  
  16.        dr = dt.NewRow();  
  17.        dr["slno"] = 1;  
  18.        dr["Name"] = "kranthi";  
  19.        dr["Access"] = string.Empty;  
  20.        dt.Rows.Add(dr);  
  21.        dr = dt.NewRow();  
  22.        dr["slno"] = 2;  
  23.        dr["Name"] = "RAVI";  
  24.        dr["Access"] = string.Empty;  
  25.        dt.Rows.Add(dr);  
  26.        dr = dt.NewRow();  
  27.        dr["slno"] = 3;  
  28.        dr["Name"] = "SASI";  
  29.        dr["Access"] = string.Empty;  
  30.        dt.Rows.Add(dr);  
  31.        ViewState["DT"] = dt;  
  32.        grdQues.DataSource = dt;  
  33.        grdQues.DataBind();  
  34.    }  
  35.    protected void btnshow_Click(object sender, EventArgs e)  
  36.    {  
  37.        //strMultiQues = string.Empty;  
  38.        //foreach (GridViewRow grdrowitem in grdQues.Rows)  
  39.        //{  
  40.        //    CheckBox chkIsQues = (CheckBox)grdrowitem.FindControl("chkIsQues");  
  41.        //    if (chkIsQues.Checked)  
  42.        //    {  
  43.        //        Label lblSDQuesId = (Label)grdrowitem.FindControl("lblSDQuesId");  
  44.        //        strMultiQues = strMultiQues + lblSDQuesId.Text + ",";  
  45.        //    }  
  46.        //}  
  47.   
  48.        //GetResponseData();  
  49.        lblmsg.Text = "Button click event!!";  
  50.    }  
  51.    protected void grdQues_RowDataBound(object sender, GridViewRowEventArgs e)  
  52.    {  
  53.        if (e.Row.RowType == DataControlRowType.DataRow)  
  54.        {  
  55.            e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#EEFFAA';this.style.cursor = 'pointer';");  
  56.            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;this.style.cursor = 'pointer';");  
  57.        }  
  58.    }  
  59.    protected void chkAllQues_CheckedChanged(object sender, EventArgs e)  
  60.    {  
  61.        if (chkAllQues.Checked)  
  62.        {  
  63.            foreach (GridViewRow grdrowitem in grdQues.Rows)  
  64.            {  
  65.                CheckBox chkIsQues = (CheckBox)grdrowitem.FindControl("chkIsQues");  
  66.                chkIsQues.Checked = true;  
  67.            }  
  68.        }  
  69.        else  
  70.        {  
  71.            foreach (GridViewRow grdrowitem in grdQues.Rows)  
  72.            {  
  73.                CheckBox chkIsQues = (CheckBox)grdrowitem.FindControl("chkIsQues");  
  74.                chkIsQues.Checked = false;  
  75.            }  
  76.        }  
  77.    }  
My problem is when i click on button or select checkbox or any other event the nested grid isdclosing automatically. i want  to rise the events if the nested grid is in expand state that would be in expand state only when the button click event raise. I think the Javascript is runnig automatically on every event fired. please help

Answers (2)

0
Photo of Midhun T P
NA 19.7k 281.2k 7y
Hi,
 
The issue is that, when postback happens html controls are going back to the initial state. You may need to call the  expandcollapsesub() function from backend for them to go to open state again.
-1
Photo of Gokhul Varman
NA 10.7k 9.4k 7y
  1. protected void AddRows(object sender, EventArgs e)  
  2. {  
  3.     GridViewRow row = (sender as LinkButton).NamingContainer as GridViewRow;  
  4.     string orderId = (row.FindControl("txtOrderId") as TextBox).Text.Trim().Replace(",", "");  
  5.     string orderDate = (row.FindControl("txtOrderDate") as TextBox).Text.Trim().Replace(",", "");  
  6.     //Write code here to save these two variable data in SQL table  
  7.     Response.Redirect(Request.Url.AbsoluteUri);  
  8. }  
Next Recommended Forum