Home » Asp.net » Gridview » Gridview with Detailsview in ModelPopupExtender in asp.net with c#-Example

Gridview with Detailsview in ModelPopupExtender in asp.net with c#-Example

in , - on 5/13/2013 - No comments

Introduction:-

In this example if i have multiple columns in Database Table but it looks massive in Gridview. so it is very useful example.
Detailsview is one of Data Control in asp.net, it is used to display information. here i have put the detailview in ModelPopupExtender which is Ajax Control. my logic behind this example is that i will display only important fields in gridview and rest of the fields are display when you click on View link button in Gridview when you. when you click link button it will display all the fields of selected records in grid view.


Source Code(in asp.net):-


<%@ page language="C#" autoeventwireup="true" codefile="GridWithDetailsView.aspx.cs"
    inherits="GridWithDetailsView" %>

<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .ModalPopupBG
        {
            background-color: #C0C0C0;
            filter: alpha(opacity=50);
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <cc1:toolkitscriptmanager id="ToolkitScriptManager1" runat="server">
        </cc1:toolkitscriptmanager>
        <asp:gridview id="GridView1" runat="server" autogeneratecolumns="False" cellpadding="4"
            forecolor="#333333" gridlines="None">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <Columns>
                <asp:TemplateField HeaderText="Pid">
                    <ItemTemplate>
                        <asp:Label ID="lpid" runat="server" Text='<% #Eval("pid")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="lpname" runat="server" Text='<% #Eval("pname")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Description">
                    <ItemTemplate>
                        <asp:Label ID="ldes" runat="server" Text='<% #Eval("des")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lbview" runat="server" OnClick="lbview_Click" CommandArgument='<%#Eval("pid") %>'>View</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:gridview>
        <cc1:modalpopupextender id="ModalPopupExtender1" runat="server" popupcontrolid="PopupTable"
            targetcontrolid="HiddenField1" cancelcontrolid="btn_close" backgroundcssclass="ModalPopupBG">
        </cc1:modalpopupextender>
        <table id="PopupTable" style="display: none">
            <tr>
                <td>
                    <asp:button id="btn_close" runat="server" text="Close" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:detailsview id="DetailsView1" runat="server" height="50px" width="125px" autogeneraterows="False">
                        <Fields>
                            <asp:BoundField DataField="pid" HeaderText="Product Id" />
                            <asp:BoundField DataField="pname" HeaderText="Product Name" />
                            <asp:BoundField DataField="des" HeaderText="Product description" />
                        </Fields>
                    </asp:detailsview>
                </td>
            </tr>
        </table>
        <asp:hiddenfield id="HiddenField1" runat="server" />
        <%--it is not used it is just give id to model popup--%>
    </div>
    </form>
</body>
</html>

Code Behind(in C#):-


using System;
using System.Collections.Generic;
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
public partial class GridWithDetailsView : System.Web.UI.Page 
{    
    DataClassesDataContext dc = new DataClassesDataContext();
    SqlFun.SqlFun sqlobj = new SqlFun.SqlFun();
   
    protected void Page_Load(object sender, EventArgs e)    
    {        
        if (!IsPostBack)        
        {            
            grbind();        
        }    
    }    
    protected void grbind()    
    {        
        GridView1.DataSource = dc.aby_Productnews;//this is my Linq object otherwise you ncan use select query        
        GridView1.DataBind();    
    }    
    protected void lbview_Click(object sender, EventArgs e)    
    {        
        LinkButton lb = (LinkButton)sender;        
        DetailsView1.DataSource = (from p in dc.aby_Productnews 
                                   where p.pid == Convert.ToInt32(lb.CommandArgument) select p).ToList();        
        DetailsView1.DataBind();        
        ModalPopupExtender1.Show();    
    } 
}
Labels: ,

Post a Comment