TabStrip - set the focus() and/or tabindex to a specific element in the partial view - when tab is selected

[Jonathan]

I have a Kendo tabstrip with partial views. When I click on the tab, the partial views are loaded. But I need to set the focus() and/or tabindex to a specific element in the partial view, for example the first text box. I tried setting the tabindex to 1 in the partial view. But that does Not seem to work.

There seems to be 2 TabStrip methods for loading a partial views ?

.LoadContentFrom("CustomerEdit"... and .Content(@<text> @Html.Partial("OrdersEdit"

I think the LoadContentFrom is Ajax.

Using Content(@<text> @Html.Partial("OrdersEdit"**... how can I set the focus to my first textbox on the the OrdersEdit.. I tried setting tabindex =1 and tried this:

 $(document).ready(function () {
    $('#firstTextBox').focus();
}

But does not work.

[Anton Mironov]

Hello Jonathan,

Thank you for the details provided.

Yes, you are totally correct - the LoadContentFrom is Ajax.

In order to achieve the desired behavior, I would recommend using a moment to focusing an element when it is available in the DOM tree.

This moment could be the "ContentLoad" Event of the TabStrip.

Feel free to choose from the available events of the Component:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events

Give a try to the approach above. If additional assistance is needed - send me a runnable sample of your application, a REPL, or a dojo example and I will try my best to achieve the desired result.

 

Kind Regards,
Anton Mironov
Progress Telerik