Click here to Skip to main content
12,299,825 members (58,896 online)
Click here to Skip to main content

Stats

22.2K views
618 downloads
45 bookmarked
Posted

Selectable GridView with WaitBox

, 16 Oct 2008 CPOL
This article describes how to implement a selectable GridView control in ASP.NET.
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)

Share

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.

You may also be interested in...

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