Handling Tabbing With Enabled Frozen Columns

Thread is closed for posting
1 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 28 Oct 2015 Link to this post

    Requirements

    Telerik Product and Version

    		 Q3 2015 and above

    Supported Browsers and Platforms

    		 All currently supported browsers by the suite, but with some limitations in IE, Firefox and Safari

    Components/Widgets used (JS frameworks, etc.)

    Project Description

    This Code Library demonstrates how to use an extension to the RadGrid functionality that will handle tabbing through input elements in the data items and enabled frozen columns.

    A common scenario is to put all items in edit mode and allow the user to change multiple values in multiple rows before saving the changes, but if you have frozen columns, the tabbing will be handled by the browser and will break the scrolling of the control. Due to the nature of this scenario it is not possible to handle all browsers and all scenarios, especially in regards of SHIFT+TAB (which should focus the previous element), but the attached extension will move the scrollbar correctly when you press the tab key and will not hide the frozen columns (which is the normal behavior with frozen columns). 

    Implementation

    To enable the tabbing with frozen columns you just need to include the attached .js file in your project and pass the Grid object to the RadGridFrozenColumnsExtension.Apply method with the grid's OnGridCreated event handler:

    <script src="gridTabbingWithFrozenColumns.js"></script>

    The markup:
    <telerik:RadGrid ID="RadGrid1" runat="server" ....
    ...
        <ClientSettings>
            <ClientEvents OnGridCreated="OnGridCreated" />
            ...

    And the JS:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function OnGridCreated(sender, args) {
                RadGridFrozenColumnsExtension.Apply(sender);
            }
        </script>
    </telerik:RadCodeBlock>


    Limitations

    SHIFT+TAB will work only in Chrome and in all other browsers tabbing back is disabled. However, If you have input elements in your frozen columns you could enable the tabbing back by removing the following lines from the gridTabbingWithFrozenColumns.js file:
    if (e.shiftKey && ($telerik.isIE || $telerik.isFirefox)) {
        return false; //In IE and Firefox, SHIFT+TAB will not work with frozen column
        //remove the line above if you have an INPUT element within your frozen columns!!!
    }



Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.