Keyboard Navigation in RadGrid

[Raji]

I would like to know if the below scenerio is possible in RadGrid.
I am getting data from database and populating the RadGrid. One of the columns values in the RadGrid is a link(linkbutton). Clicking on the link will open a new window(webpage). I was able to move through the rows in the Radgrid using keyboard up and down arrows. I will click on the link for the firsttime and open the new window then when I move through the rows in the Radgrid using keyboard up and down arrows the content in the new window should also change. Does any one know how to achive this? Any help will be appreciated.

Thanks,
Raji

[Marin]

Hello,

 You can handle the grid's OnKeyPress client-side event and there detect when an up or down arrow is pressed and update the content in the window.

Regards,
Marin
the Telerik team

[Raji]

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
<script type="text/javascript">
function KeyPress(sender, eventArgs)
{
        if (eventArgs.get_keyCode() == 40 ||eventArgs.get_keyCode() == 38)
        {
            if (sender != null)
            {
                var masterTable = sender.get_masterTableView();
                for (i = 0; i < masterTable.get_selectedItems().length; i++)
                {
                    var row =  masterTable.get_selectedItems()[i];
                    var cell = masterTable.getCellByColumnUniqueName(row, "QueueName")
                    window.open('Viewer.aspx?QName=' + cell.innerHTML,'SameWindow');
                    setTimeout("self.focus();",2000);
                }
            }
        }
        else
        {
          return true;
        }


}
</script>
</telerik:RadCodeBlock>




<ClientSettings AllowDragToGroup="true" AllowKeyboardNavigation="True">
                     <ClientEvents OnKeyPress="KeyPress" />
                     <Selecting AllowRowSelect="true" />

                    </ClientSettings>

Hi Marin,

I used the above code and it is working but the row value is the previous row selected. How to make it select the next row? Any sample code will be helpful.

Thanks,
Raji

[Marin]

Hi,

 If you need to access the selected row then it is recommended to handle the client-side onRowSelected event which provides the needed information.

Kind regards,
Marin
the Telerik team

[Raji]

Hi Marin,

Thanks for the help. I was able to make it work. Below is the code.

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
<script type="text/javascript">
var selectedIndex = -1;
function rowSelected(sender, eventArgs)
{
    selectedIndex = eventArgs.get_itemIndexHierarchical();
}
function rowDeselected(sender, eventArgs)
{
    selectedIndex = -1;
}
function KeyPress(sender, eventArgs)
{
        if (eventArgs.get_keyCode() == 40 ||eventArgs.get_keyCode() == 38)
        {
               if (selectedIndex != -1)
                {
                        var grid = $find("<%=RadGridMQConfig.ClientID %>");
                        var row = grid.get_masterTableView().get_dataItems()[parseInt(selectedIndex)+1];
                        var cell = grid.get_masterTableView().getCellByColumnUniqueName(row, "QueueName")
                        window.open('Viewer.aspx?QName=' + cell.innerHTML,'SameWindow');
                        selectedIndex = -1;
                 }
        }
        else
        {
          return true;
        }
}
</script>
</telerik:RadCodeBlock>


<ClientSettings AllowDragToGroup="true" AllowKeyboardNavigation="True">
                        <Selecting AllowRowSelect="true" />
                        <ClientEvents OnRowSelected="rowSelected" OnKeyPress="KeyPress" />
 </ClientSettings>