javascript - Debugging an ASP.NET MVC Kendo TabStrip

Question

I've got a Kendo TabStrip

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Events(e => e.Select("onTabSelect"))
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Tab 1")
            .Selected(true)
            .Content(@<text>
                <div class="panel-heading">
                    <h3 class="panel-title">Tab 1</h3>
                </div>
            </text>);
        tabstrip.Add().Text("Tab 2")
            .Content(@<text>
                <div class="panel-heading">
                    <h3 class="panel-title">Tab 2</h3>
                </div>
            </text>);
        tabstrip.Add().Text("Tab 3")
            .Content(@<text>
                <div class="panel-heading">
                    <h3 class="panel-title">Tab 3</h3>
                </div>
            </text>);
        tabstrip.Add().Text("Tab 4")
            .Content(@<text>
                <div class="panel-heading">
                    <h3 class="panel-title">Tab 4</h3>
                </div>
            </text>);
    })
)

The jQuery below fires whenever one of the tabs is selected:

function onTabSelect(e) {
    var tab = $(e.item).find("> k-link");
    if (tab !== null) {
        console.log(tab);
        var tabText = tab.text();
        console.log(tabText);
        if (tabText == "Tab 1") {
            // 
        } else if (tabText == "Tab 2") {
            alert('Tab 2');
        } else if (tabText == "Tab 3") {
            alert('Tab 3');
        } else if (tabText == "Tab 4") {
            alert('Tab 4');
        }
    }
};

The alert() boxes are not being called, so I am debugging this in the Chrome debugger using the two (2) console.log messages.

There are four (4) console writelines shown below from me selecting "Tab 2" and then "Tab 3". The first has data (expanded for the screenshot), the second has nothing, the third has data, and the fourth has nothing:

The first console.log message contains everything I need, but I don't know how to get it.

The second console.log shows my attempt to read the text using var tabText = tab.text(); but it comes back as null.

I don't know how to copy and paste the whole text, but the first message can be expanded to show the context: li.k-item.k-state-default and a long list of properties under it.

If I could scroll down far enough, you would see that I have the innerText item set to what I need to read in.

I tried digging into the context using this:

function onTabSelect(e) {
    var tab = $(e.item).find("> k-link");
    if (tab !== null) {
        console.log(tab);
        var context = tab.context;
        console.log(context);
        var contextText = context.text;
        console.log('context text = ' + contextText);
        var tabText = tab.text();
        console.log('tabText = ' + tabText);

The extra logging above outputs this:

I can see "Tab 2" shown in the context item, but how do I read it in jQuery?

question from:https://stackoverflow.com/questions/65853170/debugging-an-asp-net-mvc-kendo-tabstrip

Answer 1

Waitting for answers