Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Selectable GridView with WaitBox

, 16 Oct 2008
This article describes how to implement a selectable GridView control in ASP.NET.
WaterGrid.zip
WaterGrid
App_Code
NewsItems.xss
App_Data
Bin
AjaxControlToolkit.dll
Images
bar_bk.gif
bar_line.gif
bg_nav.gif
Thumbs.db
PreRequisites
AjaxControlToolkit.dll
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>News</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <script type="text/javascript">  
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

            function BeginRequestHandler(sender, args) 
            { 
                var elem = args.get_postBackElement(); 
                var updating = document.getElementById( '<% = updatingProgress.ClientID %>' ); 
                updating.style.display = "block"; 
            } 

            function EndRequestHandler(sender, args) 
            { 
                var updating = document.getElementById( '<% = updatingProgress.ClientID %>' ); 
                updating.style.display = "none"; 
            } 
        </script>

        <div>
            <asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div>
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <asp:Panel ID="alwaysVisibleUpdatingPanel" runat="server">
                                            <ajaxToolkit:AlwaysVisibleControlExtender ID="alwaysVisible" runat="server" TargetControlID="updatingProgress"
                                                VerticalSide="Middle" VerticalOffset="50" HorizontalSide="Center" HorizontalOffset="100"
                                                ScrollEffectDuration=".1" />
                                            <asp:Panel ID="updatingProgress" runat="server" CssClass="UpdatingProgress">
                                                <table>
                                                    <tr>
                                                        <td style="height: 90px; width: 66px;">
                                                        </td>
                                                        <td>
                                                            <asp:Label ID="lWait" runat="server">Loading...</asp:Label>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </asp:Panel>
                                        </asp:Panel>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div style="height: 300px">
                        <table>
                            <tbody>
                                <tr style="border-top-width: 1px; border-left-width: 1px; border-left-color: black;
                                    border-bottom-width: 1px; border-bottom-color: black; border-top-color: black;
                                    border-right-width: 1px; border-right-color: black">
                                    <td style="height: 25px">
                                        <table cellspacing="0" cellpadding="0" width="500">
                                            <colgroup>
                                                <col width="55%" />
                                                <col width="20%" />
                                                <col width="25%" />
                                            </colgroup>
                                            <tbody>
                                                <tr>
                                                    <td class="tableheader borderleft">
                                                        Title</td>
                                                    <td class="tableheader">
                                                        Date</td>
                                                    <td class="tableheader">
                                                        Category</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 800px">
                                        <asp:ObjectDataSource ID="objDsFilters" runat="server" DeleteMethod="Delete" InsertMethod="Insert"
                                            OldValuesParameterFormatString="original_{0}" SelectMethod="Select" TypeName="NewsItemsDataObject"
                                            UpdateMethod="Update">
                                            <DeleteParameters>
                                                <asp:Parameter Name="Original_ItemID" Type="Int32" />
                                            </DeleteParameters>
                                            <UpdateParameters>
                                                <asp:Parameter Name="Title" Type="String" />
                                                <asp:Parameter Name="Category" Type="String" />
                                                <asp:Parameter Name="Original_ItemID" Type="Int32" />
                                            </UpdateParameters>
                                            <InsertParameters>
                                                <asp:Parameter Name="Title" Type="String" />
                                                <asp:Parameter Name="Description" Type="String" />
                                                <asp:Parameter Name="Date" Type="String" />
                                            </InsertParameters>
                                        </asp:ObjectDataSource>
                                        <asp:GridView ID="gridFilters" runat="server" DataSourceID="objDsFilters" OnRowCommand="gridFilters_RowCommand"
                                            GridLines="Horizontal" ShowHeader="False" DataKeyNames="ItemID" AutoGenerateColumns="False"
                                            Width="500px" OnRowDataBound="RegisterJavaScript" AllowPaging="True" BackColor="White">
                                            <Columns>
                                                <asp:TemplateField>
                                                    
                                                    <EditItemTemplate>
                                                        <asp:Panel ID="Panel9" runat="server">
                                                            <table width="100%">
                                                                <tr>
                                                                    <td style="width: 56%;">
                                                                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Title") %>' BorderStyle="None"
                                                                            Width="200px" CssClass="textboxEditMode" /></td>
                                                                    <td style="width: 20%;">
                                                                        <asp:Label ID="TextBox5" runat="server" Text='<%# Eval("Date") %>' Width="80px" /></td>
                                                                    <td>
                                                                        <asp:TextBox ID="txtBoxDescription" runat="server" Text='<%# Bind("Category") %>'
                                                                            Width="100px" CssClass="textboxEditMode" BorderStyle="None" /></td>
                                                                </tr>
                                                            </table>
                                                        </asp:Panel>
                                                        <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="Server" TargetControlID="Panel9"
                                                            PopupControlID="PopupMenu" HoverCssClass="popupHover" PopupPosition="Right" />
                                                        <asp:Panel ID="PopupMenu" runat="server" CssClass="popupMenu">
                                                            <div style="border: 1px outset white">
                                                                <div>
                                                                    <asp:LinkButton ID="LinkButton1" runat="server" OnLoad="LinkBtn_Load" CausesValidation="True"
                                                                        CommandName="Update" Text="Update" /></div>
                                                                <div>
                                                                    <asp:LinkButton ID="LinkButton2" runat="server" OnLoad="LinkBtn_Load" CausesValidation="False"
                                                                        CommandName="Cancel" Text="Cancel" /></div>
                                                            </div>
                                                        </asp:Panel>
                                                    </EditItemTemplate>
                                                    <ItemTemplate>
                                                        <asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server" Width="100">
                                                            <div style="border: 1px outset white; padding: 2px;">
                                                                <div>
                                                                    <asp:LinkButton ID="LinkButton12" runat="server" OnLoad="LinkBtn_Load" CommandName="Edit"
                                                                        CommandArgument='<%# Eval("ItemID") %>' Text="Edit" /></div>
                                                                <div>
                                                                    <asp:LinkButton ID="LinkButton22" runat="server" OnLoad="LinkBtn_Load" CommandName="Delete"
                                                                        CommandArgument='<%# Eval("ItemID") %>' Text="Delete" /></div>
                                                            </div>
                                                        </asp:Panel>
                                                        <asp:Panel ID="Panel9" runat="server">
                                                            <table width="100%">
                                                                <tr>
                                                                    <td style="width: 55%;">
                                                                        <asp:Label Font-Bold="true" ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' /></td>
                                                                    <td style="width: 20%;">
                                                                        <asp:Label ID="Label23" runat="server" CssClass="Erstellungsdatum" Text='<%# Eval("Date")%>' /></td>
                                                                    <td style="width: 25%;">
                                                                        <asp:Label ID="Label7" runat="server" Text='<%# Eval("Category") %>' /></td>
                                                                </tr>
                                                            </table>
                                                        </asp:Panel>
                                                        <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender2" runat="Server" HoverCssClass="popupHover"
                                                            PopupControlID="PopupMenu" PopupPosition="Right" TargetControlID="Panel9" PopDelay="25" />
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                            <SelectedRowStyle BackColor="Transparent" CssClass="selectedRow"></SelectedRowStyle>
                                        </asp:GridView>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <a id="A1"></a>
        </div>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Iwona Les
Software Developer (Junior) Artaker Computersysteme GmbH
Austria Austria
I've began programming at the Warsaw University of Technolog. Currently I'm trying hardly;) to finish a master program at Vienna University of Technology and at the same time I'm working as Software Developer.
I'm interested in Web Development, technologies like AJAX, Silverlight, Semantic Web etc.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 16 Oct 2008
Article Copyright 2008 by Iwona Les
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid