Click here to Skip to main content
15,897,371 members
Articles / Web Development / ASP.NET

Selectable GridView with WaitBox

Rate me:
Please Sign up or sign in to vote.
3.89/5 (9 votes)
16 Oct 2008CPOL2 min read 31.3K   652   45  
This article describes how to implement a selectable GridView control in ASP.NET.
<%@ 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)


Written By
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.

Comments and Discussions