TabStrip Disable Function after Upgrade

1 Answer 89 Views
TabStrip
Dave
Top achievements
Rank 1
Dave asked on 16 Dec 2022, 07:56 PM

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!

Dave
Top achievements
Rank 1
commented on 21 Dec 2022, 03:01 PM

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!

Ivan Danchev
Telerik team
commented on 21 Dec 2022, 03:06 PM

Dave,

Could you post the declaration of the TabStrip?

 

Dave
Top achievements
Rank 1
commented on 21 Dec 2022, 03:10 PM

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&nbsp;&nbsp; <b>Latest Export Id:</b> @Model.taxRule.MaxExportId</span>&nbsp;
                                @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;" });
            })
Ivan Danchev
Telerik team
commented on 22 Dec 2022, 05:28 PM

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.

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 21 Dec 2022, 01:13 PM

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.

Dave
Top achievements
Rank 1
commented on 21 Dec 2022, 03:01 PM

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!

Tags
TabStrip
Asked by
Dave
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or