We're currently out of support. I don't know if Bug reports are being monitored here.

Please see REPL: https://netcorerepl.telerik.com/QekyEebS14OOdCp509

Problem: Drag&Drop of Row (Reorderable) not working because Grid inside TabStrip.

Hi, Recently I started migrating a .Net MVC project with Kendo to .Net Core MVC. Most of the things went smooth but I'm badly stuck on one thing.

Below is my code where I have a Kendo tabstrip that has three tabs. The last two has Html.Partial in their Content which is working fine. The First one has @RenderSection("HomeTab", false) which I can't get to work. Doesn't RenderSection work with .Net Core MVC?

I have tried removing all of my code and tried just adding a test div inside this section but nothing works. If I move the content of my HomeTab section to another view and try Html.Partial it works but RenderSection doesn't. The tabstrip is inside a Layout page and the content of the HomeTab section is in a different view that also have other sections that are rendering completely fine. I'm badly stuck in this and need help please.

section id="main" class="PageSection">
            @(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Events(events => events
            .Select("onTabSelected")
            .Activate("onTabActivated")
            .ContentLoad("onTabContentLoaded")
            .Error("onTabError")
        )
        .Animation(animation =>
        {animation.Enable(false);})
        .Items(tabstrip =>
        {
            if (!ViewBag.isOffline)
            {
                tabstrip.Add().Text("Home")
                .HtmlAttributes(new { id = "hometabid" })
                .Selected(true)
                .ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
                .Content(@<text>
                            @RenderSection("HomeTab", false)
                        </text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
            }
            tabstrip.Add().Text("Lead Search")
                .HtmlAttributes(new { id = "LeadSearchtabid" })
                .Selected((bool)ViewBag.isOffline).ContentHtmlAttributes(new { @style = "overflow: auto;" })
                .ImageUrl(Url.Content("~/Content/Images/search-lead-icon.png")).ImageHtmlAttributes(new { id = "leadsearchtabimgid" })
                .Content(@<text>
                    @Html.Partial("LeadSearching")
                </text>);
           if (ViewBag.isOffline)
            {
                tabstrip.Add().Text("VoiceMail")
                .HtmlAttributes(new { id = "vmtabid" })
                .Selected(false)
                .ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
               .Content(@<text>
                            @Html.Partial("VoiceMail")
                </text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
            }
        }))
            @RenderBody()
            <div id="dvNotification"></div>
        </section>

Hi,

I upgraded Telerik version in our project (Telerik.UI.for.AspNet.Core nuget) from version 2021.2.616 to version 2023.1.425 and since then is for TabStrip component not working LoadContentFrom.

I have in my controller method like this:

public IActionResult GetProductListPartial()
{
     return PartialView("_ProductList");
}

And in my View I have code like this:

 @(Html.Kendo().TabStrip()
                .Name("tabstrip")
                .Items(tabstrip =>
                {
                    tabstrip.Add()
                            .Text(@Localizer["Menu.ProductList"])
                            .Selected(true)
                            .LoadContentFrom("GetProductListPartial", "ProductList")
                            .ContentHtmlAttributes(new { @class = "product-list-tab" });
                }))

When I reworked implementation in the View, then it started to work again:

 @(Html.Kendo().TabStrip()
              .Name("tabstrip")
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text(@Localizer["Menu.ProductList"])
                      .Selected(true)
                       //.LoadContentFrom("GetProductListPartial", "ProductList")
                      .Content(@<text>@await Html.PartialAsync("_ProductList")</text>)
                      .ContentHtmlAttributes(new { @class = "product-list-tab" });
              }))

I have a tab strip with several tabs that contains various input fields for a user to modify and I'd like to show some sort of "edit" icon in the header of those tabs which have been modified to give the user a more visual indication of what has been changed before they save any changes.

I can see from the docs that you can set "ImageUrl" or "SpriteCssClasses" on a tab header when setting it up, but in this case, I'm looking at adding/removing images based on changed events from the widgets contained within the tab and can't seem to find any documented way of doing this.

Playing around with things I can do something like the following (where #TabStrip is the name given to my tab strip widget) to add a pencil icon to the header:

$("#TabStrip-tab-1 .k-link").prepend("<span class=\"k-icon k-i-edit\"></span>")

Which will give the following:

This is what I'm after, but I'm ideally looking for a way that is more "official" and supported rather than having to poke around inside the DOM of the tab strip itself.

Is there anything that could be used here or is that JS snippet above the best way to do this?

Hi all,

I'm having an issue with my TabStrip code.

Basically, .Selected and .SelectedIndex do not work to open the given tab when the page loads. I have to manually click on a tab to display it, and there is some strange formatting that makes it seem like the desired tab was selected but it was never displayed (borders around the tab etc).

I can pinpoint precisely the version of the NuGet package where this problem is introduced, and can confirm it exists up to the latest.

Code excerpt:

@(Html.Kendo().TabStrip()
    .Name(Model.SessionId + "_SessionPanelTabStrip")
    .Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In)))
    .Items(ts =>
    {
        ts.Add().Text("General")
            .Selected(true)
            .LoadContentFrom("SessionPanelGeneral", "Sessions", new {sessionId = Model.SessionId});

Scenario and Issue:

I had a Tabstrip with three tabs,

in each tab there are four DropDownList and four line charts.

However, If I bind all the data once (Include DropDownLists and Line Charts in three tabs),

the page would rendered slowly and caused some of the data loss binding.

Question1 :

I'm wondering if it's possible to render Line Chart before data binding?

then I'll data bind it after DropDownList Select event was triggered.

Or is there any other alternative ways?

What I've Tried

The TabStrip is in a partialview,

once a button was clicked the partialview will be load with javascript function by.
 $("#myHtmlElementId").load('@Url.Action("MyAction","MyController")', params)

The complicated part is the line chart in initial tab strip was data binded with local binding the data passed by ViewBag.

And if I try to render the other line chart while the second or third TabStrip Item was selected.

It's logic would be conflict, if the user clicked the first TabStrip again.

Since the line chart were data binded with local data by ViewBag,

and the others in 2nd or 3rd TabStrip were renderd while the TabStrip item was selected,

And the selected event would call a javascript function to render another partial view to fill content into the TabStrip.

Is there something like TabStrip initial event? 

So that I could also fill the first Tabstrip item contents same as the 2nd or 3rd TabStrip.

We are using Kendo-Scheduler in an Asp.net core app.

The problem we are having is that our events don't display on the calendar.

It looks like the issue is due to having the calendar inside of a "kendo-tabstrip". Our calendar tab is the second of 4. It looks like this is keeping the events from display.

When I try using the kendo-scheduler in a separate "test" app with no "kendo-tabstrip", it works as expected.

Has anyone else had a problem using kendo-scheduler inside of a kendo-tabstrip?

If so, is there a solution?

I would like to retain the selected tab when refreshing the page, or when navigating back from another page.  I have some code to capture the currently selected tab:

function onSelect(e) {
            console.log(e.item.innerText)
            
            $.ajax({
                type: "POST",
                url: "/Customers?handler=SelectTab&SelectedTab=" + e.item.innerText,
                beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
                }
            });
        }

And I am using the following when the page loads, in order to set the selected tab on page load, but it doesn't show the tab properly (being called from $(document).ready):

function selectTab(tab) {
            var tabStrip = $("#customer-tabstrip").data("kendoTabStrip");
            var t = $("li:contains('" + tab + "')");
            tabStrip.select(t);
            tabStrip.activate(t);
        }

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.

I was converting HtmlHelps to TagHelpers because the formatting in my code files is getting out of control. I realized that some Kendo controls are not that straightforward to convert.

This works fine:

@(Html.Kendo().TabStrip()
      .Name("tabStrip1")
      .SelectedIndex(0)
      .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
      .Items(items =>
      {
	      items.Add().SpriteCssClasses("fa-duotone fa-clock-rotate-left").Text("History").Content(@<text>@Html.DisplayFor(m => m.History, "LetterHistory")</text>);
	      items.Add().SpriteCssClasses("fa-duotone fa-thumbs-up").Text("Approvers").Content(@<text>@Html.DisplayFor(m => m.Approvers, "LetterApprovers")</text>);
	      items.Add().SpriteCssClasses("fa-duotone fa-magnifying-glass").Text("Details").Content("");
		  items.Add().SpriteCssClasses("fa-duotone fa-link").Text("Attachments").Content(@<text>@await Component.InvokeAsync(viewName, new { LetterGuid = Model.IdCode.ToString() })</text>);
      })
)

In TagHelper format, content is not shown for any tabs:

<kendo-tabstrip name="tabStrip">
	<popup-animation>
		<open effects="fade:in" />
	</popup-animation>
	<items>
		<tabstrip-item text="History" icon-class="fa-duotone fa-clock-rotate-left" selected="true">
			<content>@Html.DisplayFor(m => m.History, "LetterHistory")</content>
		</tabstrip-item>

		<tabstrip-item text="Approvers" icon-class="fa-duotone fa-thumbs-up">
			<content></content>
		</tabstrip-item>

		<tabstrip-item text="Details" icon-class="fa-duotone fa-magnifying-glass">
			<content>@Html.DisplayFor(m => m.Approvers, "LetterApprovers")</content>
		</tabstrip-item>

		<tabstrip-item text="Attachments" icon-class="fa-duotone fa-link">
			<content>@await Component.InvokeAsync(viewName, new { LetterGuid = Model.IdCode.ToString() })</content>
		</tabstrip-item>
	</items>
</kendo-tabstrip>