Tabstrip keyboard navigation

[aniko]

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.

[Dimo]

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

[hkdave95]

Hi Dimo

Is this now configurable?

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

Kind Regards

David

[Dimo]

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

[hkdave95]

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

[hkdave95]

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

[Dimo]

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

[hkdave95]

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

[Dimo]

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

 

 

[hkdave95]

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

[Dimo]

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

 

 

[hkdave95]

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