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

Keyboard Navigation in RadGrid

4 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raji
Top achievements
Rank 1
Raji asked on 16 Aug 2012, 06:07 PM

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

4 Answers, 1 is accepted

Sort by
0
Marin
Telerik team
answered on 21 Aug 2012, 10:13 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Raji
Top achievements
Rank 1
answered on 21 Aug 2012, 06:57 PM
<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

0
Marin
Telerik team
answered on 24 Aug 2012, 12:11 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Raji
Top achievements
Rank 1
answered on 30 Aug 2012, 10:00 PM
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>
Tags
Grid
Asked by
Raji
Top achievements
Rank 1
Answers by
Marin
Telerik team
Raji
Top achievements
Rank 1
Share this question
or