all things Sitecore related

Asp.Net: keyboard sort items

By on September 24, 2010 in ASP.Net, C#, Javascript with 0 Comments

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

Tags: , ,

About the Author

About the Author: 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+ .

Subscribe

If you enjoyed this article, subscribe now to receive more just like it.

Post a Comment

Your email address will not be published. Required fields are marked *

Top