Why is $(this.TabElement).kendoTabStrip(config).data('kendoTabStrip') undefined?

0 Answers 30 Views
General Discussions TabStrip TabStrip (Mobile)
Andrew
Top achievements
Rank 1
Andrew asked on 23 Jun 2021, 03:59 PM | edited on 24 Jun 2021, 01:46 PM

Hello,

 

I'm using LitElement to create a reusable tab component, but when I 'm initializing the kendoTabStrip, the TabStrip property is undefined. 

 

In my firstUpdated function I'm setting the TabElement property:

    firstUpdated (changedProperties) {
        this.TabElement = this.shadowRoot.querySelector('#tabs-container')
    }
   

 

In the parent element, I'm setting the TabConfig property:

    setHtml () {
        const tabs = this.shadowRoot.querySelector('tabs')
       tabs.TabConfig = TabConfig(this)
    }

 

I have a setter in the tabs component that addsTabs after being set:

    set TabConfig (value) {
        const oldValue = this._TabConfig
        this._TabConfig = value
        const self = value.self
        this.addTabs(self, oldValue)
    }

 

I'm initializing the kendoabStrip using the previously set properties (all properties are defined):

    addTabs () {
        this.TabStrip = $(this.TabElement).kendoTabStrip(this.TabConfig).data('kendoTabStrip')

        this.TabConfig.tabs.forEach(tab => {
            if (tab.show) {
                this.TabStrip.append(tab) // This throws an error "Cannot read property append of undefined"
            }
        })
    }

 

I tried initializing the TabStrip property in the setter for the TabConfig, but ended up with the same result. Any idea as to why this.TabStrip is undefined?

Martin
Telerik team
commented on 28 Jun 2021, 09:50 AM

Could you please share a runnable example where I can observe the error? I will debug it and see what is causing it. Thank you in advance!
Andrew
Top achievements
Rank 1
commented on 30 Jun 2021, 01:41 PM | edited

Hi Martin, When I try to recreate this error in dojo, I'm not getting any errors. The append method works perfectly fine.

It is only when I am running it in my application that I am seeing the error.

After setting some breakpoints, I was able to see that $(this.TabElement).kendoTabStrip(this.TabConfig).data() does not have a 'kendoTabStrip' property which is causing this.TabStrip to be undefined. The strange thing is that in Chrome dev tools, I am able to see the kendoTabStrip property when I put $(this.TabElement).data() in the console, but it is not available in the code.

I have no idea what is causing this.
Martin
Telerik team
commented on 05 Jul 2021, 10:17 AM

Unfortunately, without being able to observe the issue, it would be hard for me to say what might be causing the problem. I need to be able to debug and investigate the cause. Could you please let me know if the TabStrip is initialized properly before attempting to use append method? Make sure that the this.TabElement is an appropriate DOM element from which the TabStrip could be initialized. 

No answers yet. Maybe you can help?

Tags
General Discussions TabStrip TabStrip (Mobile)
Asked by
Andrew
Top achievements
Rank 1
Share this question
or