Click here to Skip to main content
Click here to Skip to main content
Go to top

Selectable GridView with WaitBox

, 16 Oct 2008
Rate this:
Please Sign up or sign in to vote.
This article describes how to implement a selectable GridView control in ASP.NET.
WaterGrid.JPG

Introduction

In this article, I will present to you an extension of the GridView control built using the AJAX Control Toolkit in ASP.NET. This Web Control allows you to select a single row, and you can manage the data by selecting commands from the context menu. Additionally, while a Web request will be processing, a simple wait-box will be displayed.

Background

The aim of this project is to deliver a selectable GridView with some nice, visual effects. It's based on HoverMenuControl and AlwaysVisibleControl from the AJAX Control Toolkit. It's free to use, and very nice and simple to implement in Web applications. By adding a JavaScript, the user is able to make a selection on the GridView.

Using the Code

The data displayed in the GridView comes from ObjectDataSource filled up with data from an XML file. The column headers are static, and have to be adapted each time you change the data source. For selecting rows, you have to register the JavaScript when the actual rendering is performed. Rendering happens every time as a response to a Web Request. So you have to distinguish the current mode of the application, because if the user chooses a row to edit data, the JavaScript cannot be registered; otherwise, he won't be able to put data in the selected row.

protected void RegisterJavaScript(object sender, GridViewRowEventArgs e)
{
    if (CurrentMode != Mode.Describe)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onmouseover"] = 
                  "this.style.cursor='hand';";
            e.Row.Attributes.Add("onclick",
            Page.ClientScript.GetPostBackEventReference((Control)sender, 
                 "Select$" + e.Row.RowIndex.ToString()));
        }
    }
}

You can edit or delete the data from the GridView by using the context menu. Within the GridView, you can define an ItemTemplate which tells which controls will be used to display the data. In this case we use only Labels. The EditItemTemplate holds the definition of controls which will be used while editing data in the GridView (labels and textboxes).

Usually, you want to let the user know that an AJAX update has been initiated and that the request is in progress. This approach can be realized by using the AJAX Control Toolkit, and by registering events of the PageRequestManager. When the request is initiated, a WaitBox will be shown by changing the style sheet of this control. When the request is completed, we will change the stylesheet once again and hide the control.

Please notice, that the JavaScript block has to be defined below the ScriptManager definition and not in the header section.

The code below is from Default.aspx:

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"; 
}

History

  • 12th October, 2008: Initial post
  • 13th October, 2008: Screen shot added

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.

Comments and Discussions

 
Generalcute.... PinmemberBAIJUMAX12-Oct-08 19:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

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