call RadGrid Selectedindex change on keypress

[Kishor]

Hello

as shown in attached image

 I want to call Radgrid  SelectedIndexChange event on arrow key press

ie I want to display selected row value in corresponding textbox.

as i navigate to another row , the text in textbox should change.


Thanks
Kishor Dange

[Konstantin Dikov]

Hi Kishor,

Initiating a postback with keyboard navigation is not a recommended approach and I will suggest that you use client-side logic for this (if it could still meet your requirements).

For your convenience, following is a simple example demonstrating how to handle the client-side OnRowSelected event of the grid and using the selected data item getDataKeyValue() method to retrieve the value and set it to a TextBox control:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function rowSelected(sender, args) {
            var selectedValue = args.get_gridDataItem().getDataKeyValue("Name");
            document.getElementById("TextBox1").value = selectedValue;
        }
    </script>
</telerik:RadCodeBlock>

<asp:TextBox runat="server" ID="TextBox1"/>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView ClientDataKeyNames="Name"></MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true">
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnRowSelected="rowSelected" />
    </ClientSettings>
</telerik:RadGrid>

And the code-behind:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Name", typeof(string));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i, "Name" + i);
    }

    (sender as RadGrid).DataSource = table;
}

Additionally, if you decide to handle this on server-side you will have to handle again the client-side OnRowSelected event and using setTimeout() function with some delay, fire custom command through the MasterTableView, which will force the SelectedIndexChange to fire:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function rowSelected(sender, args) {
            setTimeout(function () {
                sender.get_masterTableView().fireCommand("customCommand", "");
            });
        }
    </script>
</telerik:RadCodeBlock>

Nevertheless, as I have mentioned, the above will break the keyboard navigation functionality, so it is not recommended approach.

Hope this helps.


Regards,
Konstantin Dikov
Telerik