call RadGrid Selectedindex change on keypress

Thread is closed for posting
2 posts, 0 answers
  1. Kishor
    Kishor avatar
    82 posts
    Member since:
    Oct 2012

    Posted 19 Aug 2014 Link to this post


    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.

    Kishor Dange
  2. Konstantin Dikov
    Konstantin Dikov avatar
    1755 posts

    Posted 22 Aug 2014 Link to this post

    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;
    <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" />

    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", "");

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

    Hope this helps.

    Konstantin Dikov

    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.

  3. DevCraft R3 2016 release webinar banner
Back to Top