how to access controls in kendoTabContent on click of kendo-tab-strip tab

[Bharat]

Bharat
Posted on: 32 minutes ago

I have implemented kendo-tabstrip and it has different templates for KendoTabContent.
So I want to focus(Cursor) control in each template when each tab is clicked. But not able to access controls in KendoTabContent template and its controls when the tab is clicked. I want to focus controls like input and kendo-multiselect
So on click of each tab, some control from each tab content should be focused so that the user has better experience to type directly instead of handling it using a mouse.
Attached is the image of HTML I am using.

 

 

[Bharat]

The solution provide by Telerik for this issue 
https://stackblitz.com/edit/angular-cpbk57?file=app%2Fapp.component.ts

[Ivan]

Hello Bharat,

It is perfectly doable with KendoLayout for Angular, you can subscribe for tabSelect event and use document.querySelector in order to get the input and focus it.

Please refer to this stackblitz sample which demonstrates this approach.

I hope this will help you.

Regards,
Ivan
Progress Telerik

[Bharat]

Hi Ivan,

is this possible using Angular directive? Can  you please help me with that..?

[Martin Bechev]

Hi Bharat,

The same functionality can be achieved by using ViewChild Angular decorator:

 <kendo-tabstrip-tab
        [title]="'Tab 1'"
        #kendoTabStripTabInstance="kendoTabStripTab"
        [selected]="true"
      >
        <ng-template kendoTabContent>
          <p>Tab 1 Content</p>
          <kendo-multiselect #multiple [data]="[1, 2]"> </kendo-multiselect>
        </ng-template>
      </kendo-tabstrip-tab>

  @ViewChild("multiple", { static: false }) public msInput: MultiSelectComponent;

Then the developer can utilize the built-in focus method of the MultiSelect component. Please check the updated example:

https://stackblitz.com/edit/angular-gwwqv9-fxppes?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik