Select/Highlight row on template control focus

[Mike]

     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.

[Attila Antal]

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