Tabstrip keyboard navigation

12 posts, 0 answers
  1. aniko
    aniko avatar
    1 posts
    Member since:
    Jul 2012

    Posted 06 May 2013 Link to this post

    Hi!

    We noticed that you are able to use keyboard navigation for changing the tabs in the tabstrip control.
    This is useful for left and right direction but really confusing for the up and down directions.
    We would like to keep the original functionality in the browser of the up and down arrows (which is scrolling through the content). Is there a way to configure which direction key does what, or at least turning this feature off? 

    We are using the version 2012.3.1114, although as far as I know neither of the later versions provide this option.

    A.
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 May 2013 Link to this post

    Hi Aniko,

    Indeed, the TabStrip also handles up/down arrows. I am afraid this is currently not configurable. You can modify the widget behavior if you edit the source and remove keys.UP and keys.DOWN handling in the _keydown method.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 22 Jan 2015 in reply to Dimo Link to this post

    Hi Dimo

    Is this now configurable?

    I would like the up / down keys to scroll through content rather than switching tabs.

    Kind Regards

    David
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Jan 2015 Link to this post

    Hello all,

    Please refer to the following new documentation article that we have just produced:

    http://docs.telerik.com/kendo-ui/web/tabstrip/how-to/vertical-keyboard-scroll

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 24 Jan 2015 in reply to Dimo Link to this post

    Hi Dimo

    It looks good and I had high hopes, however I am using ASP.NET MVC and it does not work fully in that scenario.

    I looked at your example in dojo and all is as expected.

    When I try and run it in my project no go. The scroll position changes, however, the propagation seems to continue causing the tabs to increment.

    Any ideas?

    Below is the HTML Markup.
    @(
     Html.Kendo().TabStrip()
        .Name("ProductsTabStrip")
        .HtmlAttributes(new { style = Heron9.Classes.Configuration._sFontFamily })
        .Animation(false)
        .Events(E => E.Activate("ProductsTabStripActivate"))
        .Items(items =>
        {
            items.Add()
                .Text(Heron9.OpenAccess.Classes.Dictionary.LookupText(Heron9.Classes.Configuration._eDefaultCountry, "litdareBirthday", "dareBirthday"))
                .HtmlAttributes(new { style = Heron9.Classes.Configuration._sFontFamily + " max-height: 660px;" })
                .Selected(true)
                .Content(@<text>
                        @Html.Raw(Heron9.Classes.HelperLibrary.GetBulletin("[sPage]=[Products][sSub]=[dareBirthday]*"))
                    </text>
                ).ContentHtmlAttributes(new { style = "max-height: 670px; overflow-y: auto;" });
            items.Add()
                .Text(Heron9.OpenAccess.Classes.Dictionary.LookupText(Heron9.Classes.Configuration._eDefaultCountry, "litdareCount", "dareCount"))
                .HtmlAttributes(new { style = Heron9.Classes.Configuration._sFontFamily + " max-height: 660px;" })
                .Content(@<text>
                    @Html.Raw(Heron9.Classes.HelperLibrary.GetBulletin("[sPage]=[Products][sSub]=[dareCount]*"))
                </text>
                ).ContentHtmlAttributes(new { style = "max-height: 670px; overflow-y: auto;" });
            items.Add()
                .Text(Heron9.OpenAccess.Classes.Dictionary.LookupText(Heron9.Classes.Configuration._eDefaultCountry, "litdareOutlookTemplate", "dareOutlookTemplate"))
                .HtmlAttributes(new { style = Heron9.Classes.Configuration._sFontFamily + " max-height: 660px;" })
                .Content(@<text>
                    @Html.Raw(Heron9.Classes.HelperLibrary.GetBulletin("[sPage]=[Products][sSub]=[dareOutlookTemplate]*"))
                </text>
                ).ContentHtmlAttributes(new { style = "max-height: 670px; overflow-y: auto;" });
        })
    )

    ScrollTabStripFunction:
    function ScrollTabStrip(sTabStrip)
    {
        $("#" + sTabStrip).on("keydown", function (e) {
            if (e.keyCode == kendo.keys.DOWN || e.keyCode == kendo.keys.UP) {
                var visibleContainer = $("#" + sTabStrip).data("kendoTabStrip").wrapper.children(".k-content").filter(":visible");
                if (e.keyCode == kendo.keys.DOWN) {
                    visibleContainer.scrollTop(visibleContainer.scrollTop() + 50);
                }
                else {
                    visibleContainer.scrollTop(visibleContainer.scrollTop() - 50);
                }
                e.stopImmediatePropagation();
                e.preventDefault();
            }
        });
    }

    ActivateFunction:
    function ProductsTabStripActivate() {
        ScrollTabStrip("ProductsTabStrip");
        $("#ProductsTabStrip").focus();
    }

    I hope this gives you enough to go on.

    Kind Regards

    David

  7. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 27 Jan 2015 in reply to hkdave95 Link to this post

    Hi Dimo

    I first of all implemented the example almost exactly the same as you show in your example, however, I became more creative as I tried different things to make it work.

    I hope all is well.

    David
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 27 Jan 2015 Link to this post

    Hi David,

    As demonstrated in the documentation example, the keydown handler must be attached before the TabStrip is initialized. Attaching it in a TabStrip's activate handler won't work.

    There are two ways to attach an event handler before a widget is initialized:

    + wrap the code in a document.ready handler, which is placed before the widget
    + do not wrap the code in document.ready at all

    Let me know if you have further questions.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 27 Jan 2015 in reply to Dimo Link to this post

    Hi Dimo

    Please navigate to dare-it. When you get there navigate further to What we do -> Products.

    What you should find is that the up and down keys affect the scroll bars however, the propagation is not being stopped so the tabs still cycle.

    NB: I reverted my project to that which most resembles your example.

    Kind Regards

    David A. Robertson
    t/a D.A.R. Enterprsies
  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Jan 2015 Link to this post

    Hello David,

    Thanks for the live URL. The website code reveals that the keydown handler is attached AFTER the TabStrip is initialized, while it should be attached BEFORE that. Please see the attached screenshot and refer to my previous reply. Let me know if there is anything unclear.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 28 Jan 2015 in reply to Dimo Link to this post

    Hi Dimo

    Thanks for the screen shot.

    I shall try deferred loading and see if that solves the issue, unless you know of another way of attaching the handler before the MVC helper is initialised?

    Either way I shall report back.

    Kind Regards

    David
  12. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Jan 2015 Link to this post

    Hi David,

    >> "unless you know of another way of attaching the handler before the MVC helper is initialized?"

    Yes, I outlined two ways to achieve this result above. If the TabStrip is loaded with Ajax, I recommend you to use the first one (move the custom Javascript code before the widget), because in this case the document.ready event has already been fired and all new document.ready handlers will be executed immediately.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 28 Jan 2015 in reply to Dimo Link to this post

    Hi Dimo and for anybody else reading the post.

    Deferred loading of the control was what I went for in the end. Please See code snippet.

    @(
     Html.Kendo().TabStrip()
        .Name("ProductsTabStrip")
        .HtmlAttributes(new { style = Heron9.Classes.Configuration._sFontFamily })
        .Animation(false)
        .Deferred(true)
        .Items(items =>
        {
            items.Add()
                .Text(Heron9.OpenAccess.Classes.Dictionary.LookupText(Heron9.Classes.Configuration._eDefaultCountry, "litdareBirthday", "dareBirthday"))
                .HtmlAttributes(new { style = Heron9.Classes.Configuration._sFontFamily + " max-height: 660px;" })
                .Selected(true)
                .Content(@<text>
                        @Html.Raw(Heron9.Classes.HelperLibrary.GetBulletin("[sPage]=[Products][sSub]=[dareBirthday]*"))
                    </text>
                ).ContentHtmlAttributes(new { style = "max-height: 670px; overflow-y: auto;" });
            items.Add()
                .Text(Heron9.OpenAccess.Classes.Dictionary.LookupText(Heron9.Classes.Configuration._eDefaultCountry, "litdareCount", "dareCount"))
                .HtmlAttributes(new { style = Heron9.Classes.Configuration._sFontFamily + " max-height: 660px;" })
                .Content(@<text>
                    @Html.Raw(Heron9.Classes.HelperLibrary.GetBulletin("[sPage]=[Products][sSub]=[dareCount]*"))
                </text>
                ).ContentHtmlAttributes(new { style = "max-height: 670px; overflow-y: auto;" });
            items.Add()
                .Text(Heron9.OpenAccess.Classes.Dictionary.LookupText(Heron9.Classes.Configuration._eDefaultCountry, "litdareOutlookTemplate", "dareOutlookTemplate"))
                .HtmlAttributes(new { style = Heron9.Classes.Configuration._sFontFamily + " max-height: 660px;" })
                .Content(@<text>
                    @Html.Raw(Heron9.Classes.HelperLibrary.GetBulletin("[sPage]=[Products][sSub]=[dareOutlookTemplate]*"))
                </text>
                ).ContentHtmlAttributes(new { style = "max-height: 670px; overflow-y: auto;" });
        })
    )
    <script type="text/javascript">
        $(document).ready(function () {
            ScrollTabStrip("ProductsTabStrip");
            $("#ProductsTabStrip").kendoTabStrip();
            $("#ProductsTabStrip").focus();
        });
    </script>


    I tried your second option by placing the handler hook outside the document ready and that did not work. I did not wish to cut my page up and place things above and below others as it would detract from my overall program design and readablity. So I did not want to use your first suggestion. To tell you the truth I did not try it except partially, so am unsure whether that would work either.

    Thank you as always for helping me to see the light.

    Kind Regards

    David A. Robertson
Back to Top
Kendo UI is VS 2017 Ready