As proof of concept I wanted to sort images in a Grid by keyboard. The sort logic needed to be implemented on the server. My solution for this problem is a combination of Javascript and C#.

First add following html to you .aspx. Notice that the body tag has runat=”server” and a ID.

<body<strong> runat="server" ID="bodyTag"</strong>>
<form id="form1" runat="server">
<asp:Button runat="server" Text="Up" ID="UpButton" CommandArgument="up" oncommand="DownButton_Command" />
<br />
<asp:Button runat="server" Text="Left" ID="LeftButton" CommandArgument="left" oncommand="DownButton_Command" />
<asp:Button runat="server" Text="Right" ID="RightButton" oncommand="DownButton_Command" CommandArgument="right" />
<br />
<asp:Button runat="server" Text="Down" ID="DownButton" oncommand="DownButton_Command" CommandArgument="down" /><br />
<asp:Label runat="server" ID="clickedLabel" />
</form>
</body>

Now add the following JavaScript to your page. This script will fetch all keyboard input and press the corresponding button.

<script language="JavaScript">
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
switch (keycode) {
case 37:
var obj = document.getElementById('<%=LeftButton.ClientID%>');
obj.focus();
obj.click();
break;
case 38:
var obj = document.getElementById('<%=UpButton.ClientID%>');
obj.focus();
obj.click();
break;
case 39:
var obj = document.getElementById('<%=RightButton.ClientID%>');
obj.focus();
obj.click();
break;
case 40:
var obj = document.getElementById('<%=DownButton.ClientID%>');
obj.focus();
obj.click();
break;
}

}
</script>

At last we need to add the following C# code to the page.

protected void Page_Load(object sender, EventArgs e)
{
//Ad clientside onkeypress event to the body
bodyTag.Attributes.Add("OnKeyPress", "keyhandlers()");
}

protected void DownButton_Command(object sender, CommandEventArgs e)
{
//Just for testing
clickedLabel.Text = (string)e.CommandArgument;
}

Enjoy, Pieter

Author: Pieter Brinkman (123 Posts)

Pieter is Technical Marketing Manager for Sitecore Netherlands and owner of Gaatverweg.nl. He has more than ten years experience with software developing in multiple programming languages and with different Content Management Systems. Before joining Sitecore Pieter was a lead developer for multiple Sitecore and .Net projects, he joined Sitecore in 2011 as an Solution Architect in The Netherlands, after two years as an Solution Architect he joined the Technical Marketing department. In the role as Techinical Marketing Manager he is responsible for the Global MVP program and the Sitecore technical branding strategy. You can follow Pieter on twitter: @pieterbrink123 or Google+

Related posts