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