Grid view page navigation using keyboard left and right key

As shown in one of my previous article, we can use jQuery Slider control to augment grid view paging, today we will continue in same spirit and give our grid view ability to navigate pages using keyboard's left and right key.

Buttons on this page is just an added functionality for user if they want to use buttons instead of keyboard to navigate.

ASPX Code:

<asp:ScriptManager ID="ScriptManager1" runat="server" >

 

</asp:ScriptManager>

 

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

 

<asp:GridView ID="GridView1" runat="server" AllowPaging="True"

AutoGenerateColumns="False" CellPadding="4" DataKeyNames="ProductID"

DataSourceID="SqlDataSource1"

EmptyDataText="There are no data records to display." ForeColor="#333333"

GridLines="None" Width="600px">

<AlternatingRowStyle BackColor="White" />

<Columns>

<asp:BoundField DataField="ProductID" HeaderText="Product ID" ReadOnly="True"

SortExpression="ProductID" HeaderStyle-HorizontalAlign="Left" />

<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" HeaderStyle-HorizontalAlign="Left" />

<asp:BoundField DataField="ProductNumber" HeaderText="Product Number"

SortExpression="ProductNumber" HeaderStyle-HorizontalAlign="Left" />

<asp:BoundField DataField="StandardCost" HeaderText="StandardCost"

SortExpression="StandardCost" HeaderStyle-HorizontalAlign="Left" />

</Columns>

 

<EditRowStyle BackColor="#2461BF" />

<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />

<RowStyle BackColor="#EFF3FB" />

<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

<SortedAscendingCellStyle BackColor="#F5F7FB" />

<SortedAscendingHeaderStyle BackColor="#6D95E1" />

<SortedDescendingCellStyle BackColor="#E9EBEF" />

<SortedDescendingHeaderStyle BackColor="#4870BE" />

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:DemoConnection %>"

ProviderName="<%$ ConnectionStrings:DemoConnection.ProviderName %>"

SelectCommand="SELECT ProductID, Name, ProductNumber, StandardCost FROM SalesLT.Product"

>

</asp:SqlDataSource>

 

</ContentTemplate>

</asp:UpdatePanel>

 

Navigational button images:

<div id="navDiv" style="width:600px; text-align:center; vertical-align:middle;">

<img id="leftNav" src="Images/LeftArrow.png" style="float:left;" />

<img id="rightNav" src="Images/RightArrow.png" style="float:right;"/>

</div>

 

JavaScript for navigation using keyboard:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.js"></script>

<script type="text/javascript">

$(function () {

//Get current page index and add 1(one) to it because by default index start from 0

var currentPageNumber = parseInt('<%=GridView1.PageIndex +1 %>');

 

// Get total number of pages for grid view

var maxPages = parseInt('<%= GridView1.PageCount %>');

 

$('#leftNav').click(

function () {

if (currentPageNumber <= 1) {

currentPageNumber = maxPages;

}

//Call to ASP.NET PostBack function

__doPostBack('<%= GridView1.UniqueID %>', 'Page$' + (currentPageNumber--));

}

);

$('#rightNav').click(

function () {

if (currentPageNumber > maxPages) {

currentPageNumber = 1;

 

}

//Call to ASP.NET PostBack function

__doPostBack('<%= GridView1.UniqueID %>', 'Page$' + (currentPageNumber++));

}

);

 

 

//Adding keyboard navigation on document (if you want you can change this to target your gridview just by replacing document to the id of Gridview)

//Note: Key Code 37 represent left key and 39 right key on keyboard so we are just trapping those but if you like you can put any pair of key code

 

$(document).keydown(function (event) {

if (event.keyCode == '37') {

$('#leftNav').click();

}

else if (event.keyCode == '39') {

$('#rightNav').click();

}

});

});

</script>

 

This function also detect if you are on last page or on first page so if you are on last page and hit right arrow key to navigate it will take you to very first page or grid view that way you are always cycling through all the pages.

When you browse the page it will look like this:

Tags: , , ,

AJAX | ASP.NET | jQuery