Select/Highlight row on template control focus

2 posts, 0 answers
  1. Mike
    Mike avatar
    3 posts
    Member since:
    May 2015

    Posted 04 Aug Link to this post

         We have a RadGrid with a RadNumericTextBox in a GridTemplateColumn.  How can we have the grid highlight the row where the keyboard focus is?  So as the user Tabs to the next RadNumericTextBox in the next row, the highlighted row of the grid should change.
  2. Attila Antal
    Admin
    Attila Antal avatar
    426 posts

    Posted 07 Aug Link to this post

    Hi Mike,

    By default the TAB key is not included in the KeyBoard nagivation functionality of the grid, and so, this needs to be implemented additionally.

    You can try to wire up the onFocus client-side event to the numeric box and in the event handler, using some JavaScript/jQuery, mark the current row as active using the set_activeRow() method.

    RadNumericTextBox in the ItemTemplate of a Template column:

                        <telerik:GridTemplateColumn>
                            <ItemTemplate>
                                <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server">
                                    <ClientEvents OnFocus="NumericTextBoxOnFocus" />
                                </telerik:RadNumericTextBox>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>

    onFocus event handler:

            <script type="text/javascript">
                function NumericTextBoxOnFocus(sender, args) {
                    // get reference to the current RadGrid
                    var grid = sender.get_element().closest('.RadGrid').control;
                    // get reference to the current row (TR) element
                    var currentRowElement = sender.get_element().closest('tr');
                    // set the row as active
                    grid.set_activeRow(currentRowElement);
                }
            </script>

     

    Kind regards, Attila Antal
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top