ASP.NET Core TabStrip Selected tab

[Dave]

I have a serious problem (with code, that is)...

I have a page with a TabStrip control on it.  Using the Selected option on the first tab (set to true) I can't get that tab to be the active tab when the page loads.  After load, clicking on any tab but the first one makes the tab LOOK like it is selected, but the content doesn't change for any tab until I click on that first tab.  In other words, I can't set the active tab using the HTML Helper - with or without the Selected property being set, the tabstrip just doesn't work until I click the first tab.

What I'm trying to do is this: tab 1 has a data grid and tabs 2-4 have charts.  When initially loaded, the grid is displayed.  When one of the other tabs are selected I want to capture that and check the number of categories in the chart.  If there are more than the current window size can handle, I want to manually set the width property of the chart and call the resize method so the user scrolls horizontally (without doing this, there are some charts where the category names look like an ink blot - one in particular can have 387 categories - ick, but what the client wants).

At this point I am not even sure if this will work.  But I know the client will pitch a fit if I can't get that first tab automatically selected when the page loads.  The next fit comes when I can't get the chart resized so it is readable.  FYI, Bootstrap 5's native tabs work but the Kendo TabStrip does not.  If I can't get this working, I will have to go back to that approach to see if I can get the chart to resize.

And FYI, this particular page is not wrapped in any Bootstrap containers, just nested in an Accordian control.

[Mihaela]

Hello Dave,

I have created a demo project based on the described scenario, and it appears that the first tab is selected as expected at my end when the page is loaded. Attached you can find a runnable sample (.NET 6, Telerik UI for ASP.NET Core application) that contains a TabStrip component, which is nested inside a Bootstrap Accordion component. 

The first tab can be initially selected either through the Selected() method of the Items() configuration:

@(Html.Kendo().TabStrip()
              .Name("tabStrip")
              .Items(items =>
              {
                  items.Add().Text("Grid Tab").Selected(true).Content(@<text> ...</text>);
              })
)

or by using the SelectedIndex() method:

@(Html.Kendo().TabStrip()
  .Name("tabStrip")
  .SelectedIndex(0)
  ...
)

 

Regarding the Charts, you could get the current active tab by subscribing to the Activate event of the TabStrip, and resize the respective chart as per the code snippet below:

@(Html.Kendo().TabStrip()
  .Name("tabStrip")
  .Events(ev => ev.Activate("onActivate"))
  ...
)

<script>
    function onActivate(e) {
        console.log($(e.item).find("> .k-link").text());
        if($(e.item).find("> .k-link").text() == "Chart1 Tab") { //check the name of the tab activated tab
            var chart1 = $("#chart1").data("kendoChart"); //get an instance of the Chart on this tab
            var chart1Data = chart1.dataSource.data(); //get the Chart's data (i.e., if the Chart is bound to remote data)
            //check the categories
            $("#chart1").css("width", "500px"); //set the Chart's width
            chart1.resize(); //resize the Chart
        }
    }
</script>

 

The attached demo project contains this example as well. Feel free to modify it as per your setup to replicate the issue you are experiencing, and send it back in this thread. I will observe the behavior locally and follow up with the respective solution.

Regards, Mihaela Progress Telerik

[Dave]

Thanks, Mihaela.  I tried both of those (item level and top level), but neither seemed to work for me.  I ended up just using Bootstrap's native tabs.

As far as the chart goes, what I ended up doing was on the back end I figure out how many categories there are to display.  On most of the client's machines they can safely see about 50 categories before they start running together.  So, making an assumption about what the pixel width is, I calculate from there how large the chart should be and feed that to the front end when displaying the chart.  In the case where there are 387 categories, I calculate that to be around 3500px.  And sure enough, the chart looks good even if there is a LOT of horizontal scrolling to see it.

Yeah, it is an inelegant solution to the problem, but it works and gets me on to the next thing...

[Mihaela]

Thank you for your feedback, Dave.

Regarding the TabStrip, a sample where the issue replicates would be of great help to pinpoint what is causing the behavior.

 

[Daniel]

Hello I'm having the same issue. Code works for older kendo version 2022.2.621 but breaks on 2022.2.802, so I am using older version

[Daniel]

Issue was on my side, I have forget to update kendo.all.min.js to newer version. Now tabstrip works

[Mihaela]

Thank you for the update, Daniel.

If any TabStrip related questions arise, feel free to share them.