data attribute not working in kendo-tabstrip-tab

[Akash]

Adding different way but not able to see in browser.

Let me know If I miss anything. 

 

[Martin]

Hi Akash,

Thank you for the provided details.

The <kendo-tabstrip-tab> component isn't rendered in the DOM. Instead, the tabs are transpired as an unordered list (ul) with <li> tags inside, and only the supported properties are taken into consideration.

Please could you provide some more details about the desired end goal, and how the attribute is going to be used so to that we can think of a way to provide an alternative solution. Thank you in advance.

Regards,
Martin
Progress Telerik

[Akash]

Thanks Martin 

My goal is to add unique id inside <kendo-tabstrip-tab> so QA can use it that unique id in Automation testing. I am thinking to add data attribute inside the <kendo-tabstrip-tab>

Example:

[Martin]

Hi Akash,

Thank you for providing additional context about this case.

A possible approach to distinguish the tabs is by using specific CSS selectors such as:

- kendo-tabstrip li:nth-of-type(1) -  select tab by index

- kendo-tabstrip li[.="Paris"] -> select tab by rendered text inside

Alternatively, you can set a specific id to the <li> elements by using custom JavaScript code:

const items = Array.from(
      document.querySelectorAll(
        '.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items > li'
      )
    );
    items.forEach((el, index) => {
      el.setAttribute('id', `my-index-${index}`);
    });

Here is an example

https://stackblitz.com/edit/angular-cvn2t9?file=src%2Fapp%2Fapp.component.ts

I hope this sheds some light on the case.

Regards,

Martin

 

[Akash]

It is helpful. 

Thanks Martin.