This is a migrated thread and some comments may be shown as answers.

RadGrid navigation with arrow keys

7 Answers 323 Views

Grid

This is a migrated thread and some comments may be shown as answers.

bhargav asked on 05 Jan 2011, 07:45 AM

Hi,
I am developing a RadGrid in asp.net Ajax which has features same as that of the RadGrid of the Silverlight component. i have comboboxes as cells in my grid and have a code to navigate the grid with arrow keys.

<telerik:RadGrid AllowMultiRowSelection="True" ID="RadGrid1" runat="server"

DataSourceID="AccessDataSource1" GridLines="None"

OnPreRender="RadGrid1_PreRender" AllowFilteringByColumn="True"

AllowPaging="True" AllowSorting="True" PageSize="5"

AutoGenerateEditColumn="True">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="AccessDataSource1">

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns> <%-- removed onkeydown event from all text boxes --%>

<telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"

SortExpression="CustomerID" UniqueName="CustomerID">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName"

UniqueName="CompanyName">

<ItemTemplate>

<telerik:RadComboBox ID="RadComboBox1" Runat="server"

DataTextField="CompanyName" AllowCustomText="True"

DataValueField="CompanyName"

Text="select value" AutoPostBack="True"

>

<Items>

<telerik:RadComboBoxItem runat="server" Text="arr" Value="arr" />

<telerik:RadComboBoxItem runat="server" Text="dep" Value="dep" />

</Items>

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName"

UniqueName="ContactName">

<ItemTemplate>

<asp:TextBox ID="box2" runat="server"

Text='<%#Eval("ContactName") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle"

UniqueName="ContactTitle">

<ItemTemplate>

<asp:TextBox ID="box3" runat="server"

Text='<%#Eval("ContactTitle") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Address" HeaderText="Address" SortExpression="Address"

UniqueName="Address">

<ItemTemplate>

<asp:TextBox ID="box4" runat="server"

Text='<%#Eval("Address") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="City" HeaderText="City" SortExpression="City"

UniqueName="City">

<ItemTemplate>

<asp:TextBox ID="box5" runat="server"

Text='<%#Eval("City") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

/Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" />

<ClientEvents OnKeyPress="keyPress" OnGridCreated="gridCreated" OnRowSelecting="rowSelecting" />

</ClientSettings>

<EditItemStyle BackColor="Yellow" />

</telerik:RadGrid>

<script type="text/javascript">

var RadGrid1;

var columnCounter = 0;

var rowCounter = 0;

var currentCell = null;

function getCell(grid) {

var cell;

var columnName = grid.get_masterTableView().get_columns()[columnCounter].get_uniqueName();

var row = grid.get_masterTableView().get_dataItems()[rowCounter];

cell = grid.get_masterTableView().getCellByColumnUniqueName(row, columnName);

return cell;

}

function getColumnName(grid) {

return grid.get_masterTableView().get_columns()[columnCounter].get_uniqueName();

}

function handleKeyPress(keyCode) {

if (keyCode == 39) {

if (columnCounter < RadGrid1.get_masterTableView().get_columns().length - 1) {

if (currentCell != null) {

currentCell.className = "";

}

columnCounter++;

currentCell = getCell(RadGrid1);

currentCell.className = "class1";

if (getColumnName(RadGrid1) == "CustomerID") {

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CompanyName") {

$telerik.findElement(currentCell, "RadComboBox1").focus();

}

if (getColumnName(RadGrid1) == "ContactName") {

$telerik.findElement(currentCell, "box2").focus();

}

if (getColumnName(RadGrid1) == "ContactTitle") {

$telerik.findElement(currentCell, "box3").focus();

}

if (getColumnName(RadGrid1) == "Address") {

$telerik.findElement(currentCell, "box4").focus();

}

if (getColumnName(RadGrid1) == "City") {

$telerik.findElement(currentCell, "box5").focus();

}

if (getColumnName(RadGrid1) == "Region") {

$telerik.findElement(currentCell, "box6").focus();

}

if (getColumnName(RadGrid1) == "PostalCode") {

$telerik.findElement(currentCell, "box7").focus();

}

if (getColumnName(RadGrid1) == "Phone") {

$telerik.findElement(currentCell, "box8").focus();

}

if (getColumnName(RadGrid1) == "Fax") {

$telerik.findElement(currentCell, "box9").focus();

}

else if (keyCode == 37) {

if (currentCell != null) {

currentCell.className = "";

}

if (columnCounter > 0) {

columnCounter--;

currentCell = getCell(RadGrid1);

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CustomerID") {

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CompanyName") {

$telerik.findElement(currentCell, "RadComboBox1").focus();

}

if (getColumnName(RadGrid1) == "ContactName") {

$telerik.findElement(currentCell, "box2").focus();

}

if (getColumnName(RadGrid1) == "ContactTitle") {

$telerik.findElement(currentCell, "box3").focus();

}

if (getColumnName(RadGrid1) == "Address") {

$telerik.findElement(currentCell, "box4").focus();

}

if (getColumnName(RadGrid1) == "City") {

$telerik.findElement(currentCell, "box5").focus();

}

if (getColumnName(RadGrid1) == "Region") {

$telerik.findElement(currentCell, "box6").focus();

}

if (getColumnName(RadGrid1) == "PostalCode") {

$telerik.findElement(currentCell, "box7").focus();

}

if (getColumnName(RadGrid1) == "Phone") {

$telerik.findElement(currentCell, "box8").focus();

}

if (getColumnName(RadGrid1) == "Fax") {

$telerik.findElement(currentCell, "box9").focus();

}

else if (keyCode == 38) {

if (rowCounter > 0) {

if (currentCell != null) {

currentCell.className = "";

}

rowCounter--;

currentCell = getCell(RadGrid1);

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CustomerID") {

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CompanyName") {

$telerik.findElement(currentCell, "RadComboBox1").focus();

}

if (getColumnName(RadGrid1) == "ContactName") {

$telerik.findElement(currentCell, "box2").focus();

}

if (getColumnName(RadGrid1) == "ContactTitle") {

$telerik.findElement(currentCell, "box3").focus();

}

if (getColumnName(RadGrid1) == "Address") {

$telerik.findElement(currentCell, "box4").focus();

}

if (getColumnName(RadGrid1) == "City") {

$telerik.findElement(currentCell, "box5").focus();

}

if (getColumnName(RadGrid1) == "Region") {

$telerik.findElement(currentCell, "box6").focus();

}

if (getColumnName(RadGrid1) == "PostalCode") {

$telerik.findElement(currentCell, "box7").focus();

}

if (getColumnName(RadGrid1) == "Phone") {

$telerik.findElement(currentCell, "box8").focus();

}

if (getColumnName(RadGrid1) == "Fax") {

$telerik.findElement(currentCell, "box9").focus();

}

else if (keyCode == 40) {

if (rowCounter < RadGrid1.get_masterTableView().get_dataItems().length - 1) {

if (currentCell != null) {

currentCell.className = "";

}

rowCounter++;

currentCell = getCell(RadGrid1);

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CustomerID") {

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CompanyName") {

$telerik.findElement(currentCell, "RadComboBox1").focus();

}

if (getColumnName(RadGrid1) == "ContactName") {

$telerik.findElement(currentCell, "box2").focus();

}

if (getColumnName(RadGrid1) == "ContactTitle") {

$telerik.findElement(currentCell, "box3").focus();

}

if (getColumnName(RadGrid1) == "Address") {

$telerik.findElement(currentCell, "box4").focus();

}

if (getColumnName(RadGrid1) == "City") {

$telerik.findElement(currentCell, "box5").focus();

}

if (getColumnName(RadGrid1) == "Region") {

$telerik.findElement(currentCell, "box6").focus();

}

if (getColumnName(RadGrid1) == "PostalCode") {

$telerik.findElement(currentCell, "box7").focus();

}

if (getColumnName(RadGrid1) == "Phone") {

$telerik.findElement(currentCell, "box8").focus();

}

if (getColumnName(RadGrid1) == "Fax") {

$telerik.findElement(currentCell, "box9").focus();

}

function textBoxKeyPress(e) {

var evt = e ? e : window.event;

//focus next control in the cell

//or if not any, continue to next cell.

handleKeyPress(e.keyCode);

}

function keyPress(sender, args) {

var keyCode = args.get_keyCode();

handleKeyPress(keyCode);

}

function gridCreated(sender, args) {

RadGrid1 = sender;

currentCell = RadGrid1.get_masterTableView().getCellByColumnUniqueName(RadGrid1.get_masterTableView().get_dataItems()[0], "CustomerID");

currentCell.className = "class1";

}

function rowSelecting() {

return false;

}

my problem is that on focus of the combobox, i want to navigate through the items in the combobox or in case of a text box edit the item, but as per above code when i press the arrow key i am moved onto next cell. can you please help me out with this?

an alternative solution that would be helpful:
in simple terms i want to have a radGrid in asp.net which has features of the silverlight radgrid controls. that is what i am trying to achieve through above code. A sample code for the same will be very helpful.

7 Answers, 1 is accepted

answered on 10 Jan 2011, 08:54 AM

Hi Bhargav,

You could try finding the target element when the key is pressed into the keyPress event. If the target is not input then execute the logic for navigation. In this way when the focus is on the RadComboBox and the user presses a key then it will navigate through the items in the combo box. For example:

function keyPress(sender, args)

{

if(args.target.tagName.toUpperCase() != "INPUT")

{

var keyCode = args.get_keyCode();

handleKeyPress(keyCode);

}

Please give it try and let me know if you experience any problems.

All the best,
Radoslav
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 13 Jan 2011, 10:19 AM

Hello Bhargav,

Could you please try using the following code and let me know if it helps you:

function keyPress(sender, args)

{

var evt = args.get_domEvent();

var keyCode = args.get_keyCode();

if (evt.target.tagName.toUpperCase() != "INPUT")

{

...

handleKeyPress(keyCode);

}

else if (keyCode == 27)

{

handleKeyPress(39);

}

All the best,
Radoslav
the Telerik team

answered on 18 Jan 2011, 02:14 PM

Video.zip

Hi Bhargav,

I am sending you a small video which demonstrates key navigation in the project based on your code. Once the focus is inside second column pressing escape navigates to the other columns.

Have in mind that your implementation might not properly work in all browsers.

Greetings,
Radoslav
the Telerik team