Update [April 29th, 2011]:
We’ve refactored the JavaScript, C# and VB.NET code behind files for this blog post’s Code Central sample. Check out the updated code below.
Check out this how-to add keyboard support to an ASP.NET DataView. The keyboard support helps you increase both web site usability and accessibility.
The following sample can also be viewed online here. In fact, you can download it and run it locally using CodeCentral.
To add keyboard support, you’ll need to add some client-side functionality to the ASPxDataView. Specifically, the client-side keydown event.
In the code below, the following keys are processed:
* Left Arrow (activates a previous page)
* Right Arrow (activates the next page)
Add the following script code to the <Head> section of your html page that contains your ASPxDataView. You can also add the code to a separate file but be sure to reference it in the page that contains the ASPxDataView.
Note: The AttachEventToElement method of the ASPxClientUtils class is used to subscribe to a document keydown event. The PerformCallback method call of the ASPxClientDataView class is used to raise the ASPxDataView’s Callback event to change the active page of ASPxDataView on the server side:
function OnInit(s, e) {
AddKeyboardNavigationTo(s);
}
function AddKeyboardNavigationTo(dataViewInstance) {
ASPxClientUtils.AttachEventToElement(document, "keydown",
function(evt) {
return OnDataViewKeyDown(evt, dataViewInstance);
});
}
function OnDataViewKeyDown(evt, dataViewInstance) {
if (typeof (event) != "undefined" && event != null)
evt = event;
if (NeedProcessDataViewKeyDown(evt) && !dataViewInstance.InCallback()) {
if (evt.keyCode == ASPxKey.Left /*37-Left Arrow*/) {
if (dataViewInstance.cpPageIndex > 0)
dataViewInstance.PerformCallback('Prev');
return ASPxClientUtils.PreventEvent(evt);
} else if (evt.keyCode == ASPxKey.Right /*39-Right Arrow*/ && dataViewInstance.cpPageIndex <
dataViewInstance.cpPageCount - 1) {
dataViewInstance.PerformCallback('Next');
return ASPxClientUtils.PreventEvent(evt);
}
}
}
function NeedProcessDataViewKeyDown(evt) {
var evtSrc = ASPxClientUtils.GetEventSource(evt);
if (evtSrc.tagName == "INPUT")
return evtSrc.type != "text" && evtSrc.type != "password";
else
return evtSrc.tagName != "TEXTAREA";
}
Attach the ‘AddKeyboardNavigationTo’ method to the ASPxDataView’s Init event within the ASPxDataView's markup:
using System;
using DevExpress.Web.ASPxDataView;
using DevExpress.Web.ASPxClasses;
public partial class _Default : System.Web.UI.Page {
protected void dataView_DataBound(object sender, EventArgs e) {
ASPxDataView dv = (ASPxDataView)sender;
SaveJsProperties(dv);
}
protected void dataView_CustomCallback(object sender, CallbackEventArgsBase e) {
ASPxDataView dv = (ASPxDataView)sender;
switch (e.Parameter) {
case "Next":
dv.PageIndex += 1;
break;
case "Prev":
dv.PageIndex -= 1;
break;
}
SaveJsProperties(dv);
}
private void SaveJsProperties(ASPxDataView dv) {
dv.JSProperties["cpPageCount"] = dv.PageCount;
dv.JSProperties["cpPageIndex"] = dv.PageIndex;
}
}
Finally, be sure that the ASPxDataView's ClientInstanceName property is defined and the ASPxDataView's client-side API is available:
<form id="mainForm" runat="server">
<div>
<dx:ASPxDataView ID="dataView" runat="server" DataSourceID="dataSource" RowPerPage="1"
ClientInstanceName="clientDataView""dataView_CustomCallback"
"dataView_DataBound">
<ItemTemplate>
<b>EmployeeID</b>:
<asp:Label ID="EmployeeIDLabel" runat="server"
Text='<%# Eval("EmployeeID") %>' />
<br />
<b>LastName</b>:
<asp:Label ID="LastNameLabel" runat="server"
Text='<%# Eval("LastName") %>' />
<br />
<b>FirstName</b>:
<asp:Label ID="FirstNameLabel" runat="server"
Text='<%# Eval("FirstName") %>' />
<br />
<b>Title</b>:
<asp:Label ID="TitleLabel" runat="server"
Text='<%# Eval("Title") %>' />
<br />
</ItemTemplate>
<ClientSideEvents Init="OnInit" />
</dx:ASPxDataView>
</div>
<asp:AccessDataSource ID="dataSource" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT * FROM [Employees]"></asp:AccessDataSource>
</form>
Try the sample online at CodeCentral.
This great keyboard functionality is also built-in to the ASPxTreeList and ASPxGridView.
Drop me a line below with any questions. Thanks!
DXperience? What's That?
DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/