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

call RadGrid Selectedindex change on keypress

1 Answer 44 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Kishor
Top achievements
Rank 2
Kishor asked on 19 Aug 2014, 10:53 AM
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

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 22 Aug 2014, 07:13 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Upload (Obsolete)
Asked by
Kishor
Top achievements
Rank 2
Answers by
Konstantin Dikov
Telerik team
Share this question
or