asp.net Show Details of a gridview row using the modalpopupextender: elegant, quick and efficient (without the modal effect)

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

Visual Studio 2005 anecdote (How can we classify this behavior!!!)

at least it's easy to reinstall, I haven't tried yet. I got around this by using visual studio 2008 beta 2 to finish my work. the express version are there also for a temporary alternative. so, plenty of options. it was harder with webmatrix and visual studio 2003.


 
 

asp.net : an alternative to multi-column DropDownList Gridview within dropdownlist / combobox (using the Ajax DropDownExtender)

ListBox Within a dropdownlist Sample Code in C#.rar

Grid within a dropdownlist Sample Code in C# or vb.net.rar

Grid within a dropdownlist Sample Code in C# or vb.net.zip

Often, we need to put more info into the dropdownlist (multi-column). using the popupcontrol extender, a panel, and a gridview, we can have the effect of a gridview within a dropdownlist.

Here's a screen shot :

Before the dropdownextender, two solutions were available :

1. concatenation in the sql query or procedure (ex: Select FirstName + ' ' + LastName as FullName From Person) see this post for details on implementing a multi-column dropdownlist using techniques from SQL and the asp.net dropdownlist
http://forums.asp.net/p/1036228/1432282.aspx 

2. develop or purchase a custom dropdownlist, which is still a good option (Also some information about purchase is available on the post above. Of course, there are many third party component providers to choose from). (in our company we use Telerik components others use easy ListBox).

In one of the applications we developped lately, this method using the Ajax DropDownExtender along with the gridview (SelectedIndexChanged Event or the selection feature) was a great option, since the difficulty level is not that high.

Here's the code for the aspx file:

<asp:ScriptManager runat="server" ID="script1" />
      <asp:Label ID="Label1" runat="server" Text="To select a Client, Please Click here"></asp:Label>
      <ajaxToolkit:DropDownExtender runat="server" ID="popupdropdown" DropDownControlID="pnlGrid"
          TargetControlID="Label1" />

above, we can see how the dropdownextender refers to the label, as well as the panel which hosts the grid.

here's the code for the panel:

<asp:Panel runat="server" ID="pnlGrid" Style="display: none; visibility: hidden">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    DataKeyNames="ClientID" DataSourceID="SqlSourceClientsGrid" GridLines="None"
                    OnRowCommand="GridView1_RowCommand">
                    <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 CommandName="Select" CommandArgument='<%# Eval("FullName") %>' ID="LinkButton1"
                                    runat="server">Select</asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </asp:Panel>
            <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>

notice the panel's visibility set to false intially, then the dropdown extender takes care of hiding and showing the "pnlGrid" control. I personnaly found this technique very useful in many cases.

 

This helps go one step beyond the regular dropdownlist for data entry forms and displaying choice lists to the user, in a flexible manner

Comments are always welcome

asp.net 2.0 and up, C#: User Control within formview (using properties (accessors) and stored procedures)

Many times, we find ourselves developing a formview, with quite a long template (item, edititem and insertitem templates). The Idea here is to include the insert and edit item templates into one user control, and then the item template into another user control. this way, we dramatically reduce the amount of code in the form, and also, get a better grip on the business logic asked for in the form.

We will start with a very simple example. To make things simple, we'll have a Clients table, with three fields. we'll use the SQLDataSource, For binding with the formview, and stored procedures.

Here's the database table :

Note: ClientID is an identity field (with auto-increment, seed 1)

Here is the data entry user control :

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ClientsDataEntry.ascx.cs"
    Inherits="Controls_ClientsDataEntry" %>
<table>
    <tr>
        <td>
            Full Name
        </td>
        <td>
            <asp:TextBox runat="server" ID="txtFullName" />
        </td>
    </tr>
    <tr>
        <td>
            Is Valid
        </td>
        <td>
            <asp:CheckBox runat="server" ID="chkIsValid" />
        </td>
    </tr>
</table>

Code Behind (notice the use of properties to access the data entry controls) :

using System;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

public partial class Controls_ClientsDataEntry : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    public string FullName
    {
        get { return this.txtFullName.Text; }
        set { this.txtFullName.Text = value; }
    }
    public int IsValid
    {
        get
        {
            if (this.chkIsValid.Checked)
                return 1;
            else
                return 0;
        }
        set
        {
            if (value == 1)
                this.chkIsValid.Checked = true;
            else
                this.chkIsValid.Checked = false;
        }
    }
}

Here's the formview :

<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlSourceClients" DefaultMode="Insert"
                         DataKeyNames="ClientID" OnItemInserted="FormView1_ItemInserted" OnItemUpdated="FormView1_ItemUpdated">
                         <EditItemTemplate>
                             <table>
                                 <tr>
                                     <td>
                                         <uc1:ClientsDataEntry ID="ClientsDataEntry1" runat="server" IsValid='<%# Bind("IsValid") %>'
                                             FullName='<%# Bind("FullName") %>'></uc1:ClientsDataEntry>
                                     </td>
                                 </tr>
                                 <tr>
                                     <td colspan="2" align="right">
                                         <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                                             Text="Update" />
                                         <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                                             Text="Cancel" />
                                     </td>
                                 </tr>
                             </table>
                             <asp:HiddenField ID="ClientIDLabel1" runat="server" Value='<%# Bind("ClientID") %>' />
                         </EditItemTemplate>
                         <InsertItemTemplate>
                             <table>
                                 <tr>
                                     <td>
                                         <uc1:ClientsDataEntry ID="ClientsDataEntry2" runat="server" IsValid='<%# Bind("IsValid") %>'
                                             FullName='<%# Bind("FullName") %>'></uc1:ClientsDataEntry>
                                     </td>
                                 </tr>
                                 <tr>
                                     <td colspan="2" align="right">
                                         <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
                                             Text="Insert" />
                                         <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                                             Text="Cancel" />
                                     </td>
                                 </tr>
                             </table>
                         </InsertItemTemplate>
                     </asp:FormView>

notice how the user control is implemented, in both the EditItemTemplate and the InsertItemTemplate, using properties to access the textboxes. this way we don't have validation code and customizations inside our formview.

and the SqlDataSource :

<asp:SqlDataSource ID="SqlSourceClients" runat="server" ConnectionString="<%$ ConnectionStrings:ClientsConnectionString %>"
          InsertCommand="spCreateClients" InsertCommandType="StoredProcedure" SelectCommand="spGetClientsByID"
          SelectCommandType="StoredProcedure" UpdateCommand="spUpdateClients" UpdateCommandType="StoredProcedure">
          <SelectParameters>
              <asp:ControlParameter ControlID="GridView1" DefaultValue="0" Name="ClientID" PropertyName="SelectedValue"
                  Type="Int32" />
          </SelectParameters>
          <UpdateParameters>
              <asp:Parameter Name="ClientID" Type="Int32" />
              <asp:Parameter Name="FullName" Type="String" />
              <asp:Parameter Name="IsValid" Type="Int32" />
          </UpdateParameters>
          <InsertParameters>
              <asp:Parameter Name="FullName" Type="String" />
              <asp:Parameter Name="IsValid" Type="Int32" />
          </InsertParameters>
      </asp:SqlDataSource>

Simplicity, encapsulation, and seperation of concern, make things much easier to maintain.

here's the full code download. the database is included in the appdata folder, a simple view in browser code to the default.aspx will run the sample.

UserControl In Fromview Sample Code in C#.rar


UserControl In Formview Sample Code in C#.zip


Comments are welcome.

asp.net : Add confirm delete to a GridView delete button

C#

OnClientClick='<%# "return confirm(\"do you want to delete " + Eval("Name") + "\")" %>'>

Visual basic

OnClientClick='<%# "return confirm(""do you want to delete " + Eval("Name") + """)" %>'>

using the onclientclick event of the button, linkbutton, or imagebutton control, we can add the confirm javascript function.


for each double quote closing or opening a string, we need to add the escape character \. The Eval function takes as a parameter whichever field name we need to display in the confirm section.





this technique has been around since .net 1.0, implemented in different ways. the onclientclick event is new in .net 2.0 and up, which makes it useful in this situation.

Comments are welcome

asp.net (DataAccess): Filling a DropDownList using a DataReader With the SqlDataSource

the SqlDataSource component, has a property called datasource mode :

 

this property allows retreiving data using "DataSet" mode (the default), or "DataReader" mode.

so, for those who trust the SqlDataSource component, there's one way to bind grids, dropdownlists, formview and other controls. It is suitable for many situations, but not all.

Comments are welcome!