the modalpopupextender is within the gridview
Here's the gridview :
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataKeyNames="ClientID" DataSourceID="SqlSourceClientsGrid" GridLines="None"
Font-Names="Verdana" Font-Size="10px" ForeColor="#333333">
<Columns>
<asp:BoundField DataField="ClientID" HeaderText="ClientID" InsertVisible="False"
ReadOnly="True" SortExpression="ClientID" />
<asp:BoundField DataField="FullName" HeaderText="FullName" SortExpression="FullName" />
<asp:BoundField DataField="IsValid" HeaderText="IsValid" SortExpression="IsValid" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton CommandArgument='<%# Eval("FullName") %>' ID="lnkDetails" runat="server"
Text="Details" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="popupDetails" TargetControlID="lnkDetails"
PopupControlID="pnlDetails" PopupDragHandleControlID="pnlHandle" CancelControlID="CancelButton" />
<asp:Panel runat="server" ID="pnlDetails" Style="display: none; background-color: #666666">
<asp:Panel ID="pnlHandle" runat="server" Style="cursor: move;" Width="200px">
<table width="100%" cellpadding="0" cellspacing="0" style="border: solid 1px #666666;">
<tr>
<td style="background-image: url(Images/GridHeaderBg.gif)">
Inspections
</td>
<td style="background-image: url(Images/GridHeaderBg.gif); text-align: right;">
<asp:Button ID="CancelButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<div id="divDetails" style="background-color: #FFFFFF; border: solid 1px gray">
<table>
<tr>
<td>
FullName :
</td>
<td>
<%1: # Eval("FullName")%>
</td>
</tr>
<tr>
<td>
Is Valid :
</td>
<td>
<%1: # Eval("IsValid")%>
</td>
</tr>
</table>
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
The most important port of the code, is the Template Field Below is its code :
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton CommandArgument='<%# Eval("FullName") %>' ID="lnkDetails" runat="server"
Text="Details" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="popupDetails" TargetControlID="lnkDetails"
PopupControlID="pnlDetails" PopupDragHandleControlID="pnlHandle" CancelControlID="CancelButton" />
<asp:Panel runat="server" ID="pnlDetails" Style="display: none; background-color: #666666">
<asp:Panel ID="pnlHandle" runat="server" Style="cursor: move;" Width="200px">
<table width="100%" cellpadding="0" cellspacing="0" style="border: solid 1px #666666;">
<tr>
<td style="background-image: url(Images/GridHeaderBg.gif)">
Inspections
</td>
<td style="background-image: url(Images/GridHeaderBg.gif); text-align: right;">
<asp:Button ID="CancelButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<div id="divDetails" style="background-color: #FFFFFF; border: solid 1px gray">
<table>
<tr>
<td>
FullName :
</td>
<td>
<%1: # Eval("FullName")%>
</td>
</tr>
<tr>
<td>
Is Valid :
</td>
<td>
<%1: # Eval("IsValid")%>
</td>
</tr>
</table>
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
The code in the template field contains, the modalpopupextender as well as the panels and buttons related to it. this makes it a great details window.
Here's the complete code listing:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupExtenderDemo.aspx.cs"
Inherits="ModalPopupExtenderDemo" %>
<!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 runat="server">
<title>Modal Popup Extender Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="script1" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataKeyNames="ClientID" DataSourceID="SqlSourceClientsGrid" GridLines="None"
Font-Names="Verdana" Font-Size="10px" ForeColor="#333333">
<Columns>
<asp:BoundField DataField="ClientID" HeaderText="ClientID" InsertVisible="False"
ReadOnly="True" SortExpression="ClientID" />
<asp:BoundField DataField="FullName" HeaderText="FullName" SortExpression="FullName" />
<asp:BoundField DataField="IsValid" HeaderText="IsValid" SortExpression="IsValid" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton CommandArgument='<%# Eval("FullName") %>' ID="lnkDetails" runat="server"
Text="Details" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="popupDetails" TargetControlID="lnkDetails"
PopupControlID="pnlDetails" PopupDragHandleControlID="pnlHandle" CancelControlID="CancelButton" />
<asp:Panel runat="server" ID="pnlDetails" Style="display: none; background-color: #666666">
<asp:Panel ID="pnlHandle" runat="server" Style="cursor: move;" Width="200px">
<table width="100%" cellpadding="0" cellspacing="0" style="border: solid 1px #666666;">
<tr>
<td style="background-image: url(Images/GridHeaderBg.gif)">
Inspections
</td>
<td style="background-image: url(Images/GridHeaderBg.gif); text-align: right;">
<asp:Button ID="CancelButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<div id="divDetails" style="background-color: #FFFFFF; border: solid 1px gray">
<table>
<tr>
<td>
FullName :
</td>
<td>
<%1: # Eval("FullName")%>
</td>
</tr>
<tr>
<td>
Is Valid :
</td>
<td>
<%1: # Eval("IsValid")%>
</td>
</tr>
</table>
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlSourceClientsGrid" runat="server" ConnectionString="<%$ ConnectionStrings:ClientsConnectionString %>"
DeleteCommand="spDeleteClients" DeleteCommandType="StoredProcedure" SelectCommand="spGetClients"
SelectCommandType="StoredProcedure">
<DeleteParameters>
<asp:Parameter Name="ClientID" Type="Int32" />
</DeleteParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
I'll put the code up for the download soon.
here's the database table used for samples:
the ModalPopupExtender makes it a great and easy way to show the details of a row. Here's a screen shot for what it looks like :
Comments are welcome
No comments:
Post a Comment