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

Select/Highlight row on template control focus

1 Answer 19 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 04 Aug 2019, 03:26 PM
     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.

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 07 Aug 2019, 04:47 PM

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.
Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or