I just performed an upgrade of our Telerik UI for MVC from version 2021.1.119.545 to 2022.3.1109 via the Upgrade Wizard on the VS 2022 Telerik extension. But now some of the javascript code is not working properly, in particular the tabStrip disable function. Here is an example of the code that previously worked fine...
var tabStrip = $("#formTabStrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.disable(tabStrip.tabGroup.children().eq(5)); <== no longer works after upgrade
Any idea why this may be happening?
Thanks!
1 Answer, 1 is accepted
Hello Dave,
The issue is due to the highlighted part:
var tabStrip = $("#formTabStrip").kendoTabStrip().data("kendoTabStrip");It must be removed and you should get a reference to the TabStrip like this:
var tabStrip = $("#formTabStrip").data("kendoTabStrip");If you call .kendoTabStrip() you are reinitializing the component and then getting a reference to it. This is a common mistake known as duplicate initialization: https://docs.telerik.com/kendo-ui/intro/widget-basics/jquery-initialization#duplicate-initialization
Regards,
Ivan Danchev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Ivan- Thanks for the response. Unfortunately, it still doesn't work. I updated the reference...
var tabStrip = $("#formTabStrip").data("kendoTabStrip");
But the disable function is still not working...
tabStrip.disable(tabStrip.tabGroup.children().eq(5));
Thank you!
Hi Ivan- Thanks for the response. Unfortunately, it still doesn't work. I updated the reference...
var tabStrip = $("#formTabStrip").data("kendoTabStrip");
But the disable function is still not working...
tabStrip.disable(tabStrip.tabGroup.children().eq(5));
Thank you!
Dave,
Could you post the declaration of the TabStrip?
Hi Ivan- Here's how we're utilizing the tabStrip...
@(Html.Kendo().TabStrip().Name("formTabStrip")
.Animation(false)
.HtmlAttributes(new { style = "height: 545px; width: 100%;" })
.Events(events => events.Activate("TS_activate"))
.Items(tabstrip =>
{
tabstrip.Add().Text("Rule Information")
.Selected(true)
.Content(
@<div id="ruleInfo1">
<div id="calculationType">
<div class="floatLeft"> @Html.Label("Type: ")</div>
<div class="floatLeft"> @Html.DropDownListFor(model => model.CalcTypeId, new SelectList(Model.calculationTypes, "Value", "Text"), new { id = "calcTypeId", @onchange = "setTabs(this.value, true)" })</div>
@Html.HiddenFor(model => model.CalcTypeId, new { id = "hiddenCalcTypeId" })
<span style="margin-left: 15px;"><b>Initial Export Id:</b> @Model.taxRule.MinExportId <b>Latest Export Id:</b> @Model.taxRule.MaxExportId</span>
@Html.Partial("_RuleInformation", Model.informationVM,
new ViewDataDictionary(ViewData)
{
TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "informationVM" }
})
</div>
</div>
).ContentHtmlAttributes(new { style = "width: 98%; height:500px;" });
tabstrip.Add().Text("Rates")
.Content(
@<div id="rateInfo">
@if (Model.taxRule.TaxRuleId == 0 || Model.taxRule.TaxRuleTypeId != 3)
{
@Html.Partial("_RateInformation", Model.rateVM, new ViewDataDictionary(ViewData)
{
TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "rateVM" }
})
}
</div>
).ContentHtmlAttributes(new { style = "width: 98%; height:470px;" });
tabstrip.Add().Text("Accumulated")
.Content(
@<div id="accumulated">
@if (Model.taxRule.TaxRuleId == 0 || Model.taxRule.TaxRuleTypeId == 13)
{
@Html.Partial("_Accumulated", Model.accumulatedVM, new ViewDataDictionary(ViewData)
{
TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "accumulatedVM" }
})
}
</div>
).ContentHtmlAttributes(new { style = "width: 98%; height:470px;" });
tabstrip.Add().Text("Conditional Jurisdictions")
.Content(
@<div id="ruleInfo2">
@Html.Partial("_ConditionalJurisdictions", Model.condJurVM, new ViewDataDictionary(ViewData)
{
TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "condJurVM" }
})
</div>
).ContentHtmlAttributes(new { style = "width: 98%; height:470px;" });
tabstrip.Add().Text("Qualifying Conditions")
.Content(
@<div id="ruleInfo3">
@Html.Partial("_QualifyingConditions", Model.qualCondVM)
</div>
).ContentHtmlAttributes(new { style = "width: 98%; height:470px;" });
tabstrip.Add().Text("Tax Basis")
.Content(
@<div id="ruleInfo4">
@if (Model.taxRule.TaxRuleId == 0 || Model.taxRule.TaxRuleTypeId == 3)
{
@Html.Partial("_BasisInformation", Model.basisVM, new ViewDataDictionary(ViewData)
{
TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "basisVM" }
})
}
</div>
).ContentHtmlAttributes(new { style = "width: 98%; height:470px;" });
tabstrip.Add().Text("Adjustments")
.Content(
@<div id="ruleInfo5">
@Html.Partial("_AdjustmentRules", Model.taxAdjVM)
</div>
).ContentHtmlAttributes(new { style = "width: 98%; height:470px;" });
tabstrip.Add().Text("Descriptions")
.Content(
@<div id="ruleInfo6">
@Html.Partial("_DescriptionInformation", Model.descriptionVM, new ViewDataDictionary(ViewData)
{
TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "descriptionVM" }
})
</div>
).ContentHtmlAttributes(new { style = "width: 98%; height:470px;" });
})
Dave,
I've tested the tab disabling logic with version 2022.3.1109 and at my end it works as expected. See this runnable example: https://netcorerepl.telerik.com/mGlwwQPB20FkcQSz48
Our REPL sandbox uses ASP.NET Core, but I've also tried it in a standalone ASP.NET MVC project and the behavior is the identical. The 5th tab (Tax Basis) get disabled successfully.
Note that I've simplified the content of the tabs, since there were some missing model field values, but that should not have any effect on disabling the tabs. I am calling the logic in a document.ready handler. If you are calling it in some other place at a point when the TabStrip hasn't been initialized yet that could explain why it doesn't work.
Please take a look at the example and let me know in case I'm missing something with regard to reproducing the issue.