Display ASP.Net GridView row details in AJAX Modal Popup Extender on LinkButton Click using C# and VB.Net

Last Reply 10 days ago By pandeyism

Posted 11 days ago

sir , 

i use this code in my page where i need click linkbutton and get the cell value in modal pop textbox

Use AJAX Modal Popup Extender inside GridView in ASP.Net

my aspx code is 

<div>
    <style>
        .example-modal .modal
        {
            position: relative;
            top: auto;
            bottom: auto;
            right: auto;
            left: auto;
            display: block;
            z-index: 1;
        }
        .example-modal .modal
        {
            background: transparent !important;
        }
    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        List E-Pin Request</h3>
                </div>
                <div class="box-body">
                    <div class="form-group" align="center" style="height: 650PX; overflow: scroll">
                        <asp:ScriptManager ID="ScriptManager1" runat="server">
                        </asp:ScriptManager>
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <asp:GridView ID="GridView1" runat="server" CssClass="table table-hover" EmptyDataText="No Record Found"
                                    DataKeyNames="Id" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
                                    OnPageIndexChanging="OnPageIndexChanging" GridLines="None">
                                    <Columns>
                                        <asp:TemplateField HeaderText="S.No" ItemStyle-Width="50">
                                            <ItemTemplate>
                                                <asp:Label ID="lblRowNumber" Text='<%# Container.DataItemIndex + 1 %>' runat="server" />
                                            </ItemTemplate>
                                            <ItemStyle Width="50px"></ItemStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Request Id" ItemStyle-Width="70">
                                            <ItemTemplate>
                                                <asp:Label ID="lblreqId" Text='<%# Eval("id") %>' runat="server" />
                                            </ItemTemplate>
                                            <ItemStyle Width="70px"></ItemStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="User Id" ItemStyle-Width="100">
                                            <ItemTemplate>
                                                <asp:Label ID="lbluserid" runat="server" readOnly="true" Text='<%# Eval("User_id") %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="100px"></ItemStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Deposite Amount" ItemStyle-Width="130">
                                            <ItemTemplate>
                                                <asp:Label ID="lblamt" runat="server" readOnly="true" Text='<%# Eval("Deposite_amount") %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="130px"></ItemStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Request Date" ItemStyle-Width="100">
                                            <ItemTemplate>
                                                <asp:Label ID="lblrdate" runat="server" readOnly="true" Text='<%# Eval("Request_Date") %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="100px"></ItemStyle>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="Request_Status" HeaderText="Request Status" ItemStyle-Width="100"
                                            SortExpression="Request_Status" ReadOnly="true" />
                                        <asp:TemplateField HeaderText="Remark" ItemStyle-Width="200">
                                            <ItemTemplate>
                                                <asp:Label ID="lblremark" runat="server" readOnly="true" Text='<%# Eval("Remark") %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="200px"></ItemStyle>
                                        </asp:TemplateField>
                                        <asp:TemplateField ItemStyle-Width="30px" HeaderText="E-Pin">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="lnkEdit" runat="server" Text="Generate" OnClick="Edit"></asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                                <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" Style="display: none">
                                    <div class="example-modal">
                                        <div class="modal modal-primary">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h4 class="modal-title">
                                                            Generate E-Pin</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <asp:TextBox ID="txtuserid" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                                                                </div>
                                                                <div class="form-group">
                                                                    <asp:TextBox ID="txtamt" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                                                                </div>
                                                                <div class="form-group">
                                                                    <asp:DropDownList ID="DDLpack" runat="server" CssClass="form-control">
                                                                    </asp:DropDownList>
                                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ForeColor="Red"
                                                                        ErrorMessage="select Package" ControlToValidate="DDLpack" InitialValue="Select Package"
                                                                        ValidationGroup="validateformregis"></asp:RequiredFieldValidator>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <asp:TextBox ID="txtreqid" runat="server" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <div class="input-group-addon">
                                                                            <i class="fa fa-calendar"></i>
                                                                        </div>
                                                                        <asp:TextBox ID="txtdt" runat="server" CssClass="form-control" placeholder="Request Date mm/dd/yyyy"
                                                                            ReadOnly="true"></asp:TextBox>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <asp:TextBox ID="txtpinno" runat="server" CssClass="form-control" placeholder="Enter No of Pins"></asp:TextBox>
                                                                </div>
                                                                <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary pull-right " Text="Generate"
                                                                    OnClick="generate" />
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <asp:Button ID="btnCancel" runat="server" CssClass="btn btn-default pull-left" Text="Cancel"
                                                                OnClientClick="return Hidepopup()" />
                                                            <asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary" Text="save" OnClick="Save" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </asp:Panel>
                                <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
                                <asp:ModalPopupExtender ID="popup" runat="server" DropShadow="false" PopupControlID="pnlAddEdit"
                                    TargetControlID="lnkFake" BackgroundCssClass="modalBackground">
                                </asp:ModalPopupExtender>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="GridView1" />
                                <asp:AsyncPostBackTrigger ControlID="btnSave" />
                                <asp:AsyncPostBackTrigger ControlID="GridView2" />
                                <asp:AsyncPostBackTrigger ControlID="Button1" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

and my code behind is 

    Protected Sub Edit(ByVal sender As Object, ByVal e As EventArgs)
        Dim row As GridViewRow = CType(CType(sender, LinkButton).Parent.Parent, GridViewRow)
        txtreqid.Text = row.Cells(1).Text
        txtuserid.Text = row.Cells(2).Text
        txtamt.Text = row.Cells(3).Text
        txtdt.Text = row.Cells(4).Text
        getpack()
        popup.Show()
    End Sub

 

Posted 10 days ago

Hi yogeshc,

You need to find label control. refer below code will help you out.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .example-modal .modal
        {
            position: relative;
            top: auto;
            bottom: auto;
            right: auto;
            left: auto;
            display: block;
            z-index: 1;
        }
        .example-modal .modal
        {
            background: transparent !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <section class="content">
          <div class="row">
             <div class="col-md-12">            
              <!-- general form elements disabled -->
              <div class="box box-primary">
                <div class="box-header with-border"> 
                 <h3 class="box-title">List E-Pin Request</h3>              
                </div><!-- /.box-header -->
                <div class="box-body">
                    <!-- text input -->                   
                     <div class="form-group" align="center" style="height:650PX; overflow:scroll">
                     <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
                       <asp:GridView ID="GridView1" runat="server"   EmptyDataText="No Record Found"                          DataKeyNames="Id"  
                             AutoGenerateColumns="False"   GridLines="None"   >
                           <Columns>
                           <asp:TemplateField HeaderText = "S.No" ItemStyle-Width="50">
        <ItemTemplate>
            <asp:Label ID="lblRowNumber" Text='<%# Container.DataItemIndex + 1 %>' runat="server" />
        </ItemTemplate>
 
<ItemStyle Width="50px"></ItemStyle>
    </asp:TemplateField>
     <asp:TemplateField HeaderText = "Request Id" ItemStyle-Width="70">
        <ItemTemplate>
            <asp:Label ID="lblreqId" Text='<%# Eval("id") %>' runat="server" />
        </ItemTemplate>
 
<ItemStyle Width="70px"></ItemStyle>
    </asp:TemplateField>
                           
                            <asp:TemplateField HeaderText="User Id" ItemStyle-Width="100" >
                    <ItemTemplate>
                        <asp:Label ID="lbluserid" runat="server" readOnly="true" Text='<%# Eval("User_id") %>'></asp:Label>
                    </ItemTemplate>                   
 
<ItemStyle Width="100px"></ItemStyle>
                </asp:TemplateField>
 
                          
                <asp:TemplateField HeaderText="Deposite Amount" ItemStyle-Width="130">
                <ItemTemplate >
                <asp:Label ID="lblamt" runat="server" readOnly="true" Text='<%# Eval("Deposite_amount") %>'></asp:Label>
                </ItemTemplate>
 
<ItemStyle Width="130px"></ItemStyle>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Request Date" ItemStyle-Width="100">
                <ItemTemplate >
                <asp:Label ID="lblrdate" runat="server" readOnly="true" Text='<%# Eval("Request_Date") %>'></asp:Label>
                </ItemTemplate>
 
<ItemStyle Width="100px"></ItemStyle>
                </asp:TemplateField>
                            <asp:BoundField DataField="Request_Status" HeaderText="Request Status" ItemStyle-Width="100" SortExpression="Request_Status" readOnly="true" />
                           <asp:TemplateField HeaderText="Remark" ItemStyle-Width="200">
                <ItemTemplate >
                <asp:Label ID="lblremark" runat="server" readOnly="true" Text='<%# Eval("Remark") %>'></asp:Label>
                </ItemTemplate>
<ItemStyle Width="200px"></ItemStyle>
                </asp:TemplateField>                         
                             <asp:TemplateField ItemStyle-Width = "30px" HeaderText ="E-Pin">
   <ItemTemplate>
       <asp:LinkButton ID="lnkEdit" runat="server" Text = "Generate" OnClick = "Edit"></asp:LinkButton>
   </ItemTemplate>
</asp:TemplateField>
                           </Columns>
                         </asp:GridView>
 
                         <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" style = "display:none">
<div class="example-modal">
            <div class="modal modal-primary">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title">Generate E-Pin</h4>
                  </div>
                  <div class="modal-body">
                     <div class="row">            
                    <!-- text input -->
                    <div class="col-md-6">
                     <div class="form-group">
                       <asp:TextBox ID="txtuserid" runat="server"  CssClass="form-control" ReadOnly="true"></asp:TextBox>                     
                       </div>
                        <div class="form-group">
                       <asp:TextBox ID="txtamt" runat="server"  CssClass="form-control" ReadOnly="true"></asp:TextBox>                     
                       </div>
                      
                      <div class="form-group">
                       <asp:DropDownList ID="DDLpack" runat="server" CssClass="form-control" >
                       </asp:DropDownList>  
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ForeColor="Red" ErrorMessage="select Package" ControlToValidate="DDLpack" InitialValue="Select Package" ValidationGroup="validateformregis"></asp:RequiredFieldValidator>
                     </div>
                    </div>
                     <div class="col-md-6">
                      <div class="form-group">
                       <asp:TextBox ID="txtreqid" runat="server"  CssClass="form-control" ReadOnly="true"></asp:TextBox>                     
                       </div>
                        <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </div>
                       <asp:TextBox ID="txtdt" runat="server" CssClass="form-control" placeholder="Request Date mm/dd/yyyy" ReadOnly="true"></asp:TextBox>                    
                    </div>                   
                  </div>
                      <div class="form-group">
                        <asp:TextBox ID="txtpinno" runat="server"  CssClass="form-control" placeholder="Enter No of Pins"></asp:TextBox>                       
                  </div> 
                       <asp:Button ID="Button1" runat="server" cssclass="btn btn-primary pull-right " Text="Generate"  />         
                  </div>
                  <asp:Panel ID="Panel2" runat="server" Visible="false" >
                      <div class="col-md-12">
                      <asp:GridView ID="GridView2" runat="server" CssClass="table table-hover" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="user_id" HeaderText="User Id" ItemStyle-Width="100" />
        <asp:BoundField DataField="Request_date" HeaderText="Request Date" ItemStyle-Width="100" />
        <asp:BoundField DataField="EPin" HeaderText="E-Pin" ItemStyle-Width="100" />
        <asp:BoundField DataField="Pin_Price" HeaderText="Pin Price" ItemStyle-Width="100" />
        <asp:BoundField DataField="Generate_date" HeaderText="Generate Date" ItemStyle-Width="100" />
    </Columns>
</asp:GridView>
                      </div>
                      </asp:Panel>
                  </div>
                  <div class="modal-footer">
                  <asp:Button ID="btnCancel" runat="server" cssclass="btn btn-default pull-left" Text="Cancel"  />
                     <asp:Button ID="btnSave" runat="server" cssclass="btn btn-primary" Text="save"   />
                   </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
          </div>
</asp:Panel>
<asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="popup" runat="server" DropShadow="false"
PopupControlID="pnlAddEdit" TargetControlID = "lnkFake"
BackgroundCssClass="modalBackground">
 
</asp:ModalPopupExtender>
 
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "GridView1" />
<asp:AsyncPostBackTrigger ControlID = "btnSave" />
<asp:AsyncPostBackTrigger ControlID = "GridView2" />
<asp:AsyncPostBackTrigger ControlID = "Button1" />
</Triggers>
</asp:UpdatePanel>
                     </div>   
                      
                </div><!-- /.box-body -->
              </div><!-- /.box -->
               <!-- Horizontal Form -->            
            </div>
            
            </div>
              </section>
    </form>
</body>
</html>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id");
        dt.Columns.Add("User_id");
        dt.Columns.Add("Deposite_amount");
        dt.Columns.Add("Request_Date");
        dt.Columns.Add("Request_Status");
        dt.Columns.Add("Remark");
        dt.Rows.Add(1, "u1", "545", "01/02/2019", "0", "no");
        dt.Rows.Add(2, "u2", "545", "01/05/2019", "0", "yes");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
protected void Edit(object sender, EventArgs e)
{
    GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent;
    txtreqid.Text = (row.FindControl("lblreqId") as Label).Text;
    txtuserid.Text = (row.FindControl("lbluserid") as Label).Text;
    txtamt.Text = (row.FindControl("lblamt") as Label).Text;
    txtdt.Text = (row.FindControl("lblrdate") as Label).Text;
    popup.Show();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handle Me.Load
        If Not Me.IsPostBack Then
            Dim dt As DataTable = New DataTable()
            dt.Columns.Add("id")
            dt.Columns.Add("User_id")
            dt.Columns.Add("Deposite_amount")
            dt.Columns.Add("Request_Date")
            dt.Columns.Add("Request_Status")
            dt.Columns.Add("Remark")
            dt.Rows.Add(1, "u1", "545", "01/02/2019", "0", "no")
            dt.Rows.Add(2, "u2", "545", "01/05/2019", "0", "yes")
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub

    Protected Sub Edit(ByVal sender As Object, ByVal e As EventArgs)
        Dim row As GridViewRow = CType((CType(sender, LinkButton)).Parent.Parent, GridViewRow)
        txtreqid.Text = (TryCast(row.FindControl("lblreqId"), Label)).Text
        txtuserid.Text = (TryCast(row.FindControl("lbluserid"), Label)).Text
        txtamt.Text = (TryCast(row.FindControl("lblamt"), Label)).Text
        txtdt.Text = (TryCast(row.FindControl("lblrdate"), Label)).Text
        popup.Show()
End Sub