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

[Andrew]

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]

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]

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]

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.