Selectable GridView with WaitBox

• Download source code - 545.01 KB

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

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