RadTabStrip producing JS Errors

3 posts, 1 answers
  1. Thirumoorthi
    Thirumoorthi avatar
    3 posts
    Member since:
    Jan 2021

    Posted 06 Jan Link to this post

    Hi,

         

  2. Thirumoorthi
    Thirumoorthi avatar
    3 posts
    Member since:
    Jan 2021

    Posted 06 Jan in reply to Thirumoorthi Link to this post

    Hi, 

          Sorry, Accidentally submitted empty post. In my project I'm using .NET for Ajax 2018. Recently I updated it to telerik 2020 (2020.3.1021.45) trial version to test the compatibility of telerik with the application.

          The upgrade process was successful. I'm able to run the application. But none of the dropdowns worked and many javascript codes are broken. I can see 2 Javascript errors in console. The error is as follows. (Attached a picture of the console errors)

    1.Uncaught TypeError: Cannot read property 'get_visible' of undefined - this one is caused by Radtabstrip "ReorderTabsOnSelect" Attribute.

    2.Uncaught TypeError: Cannot read property 'get_visible' of undefined - this one is caused by Radtabstrip "Align" attribute

     

    After Removing "ReorderTabsOnSelect", "Align" attributes from RadTabStrip everything working fine. there is no errors.
    Is this a breaking change in Telerik 2020? How i can solve this problem ? Because i need those 2 attributes in RadTabStrip.

     

    The code:

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Orange" MultiPageID="RadMultiPage1" SelectedIndex="0" Align="Justify" ReorderTabsOnSelect="true" Width="250px" EnableEmbeddedSkins="False">
      <Tabs>
        <telerik:RadTab Text="Tab Title">
        </telerik:RadTab>
      </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="pageView">
      <telerik:RadPageView ID="RadPageView1" runat="server" height="720px">
        <div>Content</div>
      </telerik:RadPageView>
    </telerik:RadMultiPage>
  3. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    911 posts

    Posted 06 Jan Link to this post

    Hello,

    Thank you for reporting this issue and sharing your solution.

    There is indeed a small regression in the TabStrip regarding this exact property, and when it is set, there is a JavaScript error in the browser console that is actually breaking the normal behavior. 

    This issue is already fixed in the source code and will be available in the next official release.

    In the meantime, you can place the following script under the ScriptManager and before any RadTabStrip instances and this will fix the issue for all pages without removing the property.

    if(Telerik.Web.UI.RadTabStrip){
         Telerik.Web.UI.RadTabStrip._getTabGroups = function(listElement, sizeProperty)
        {
            var groups = [];
            var currentGroup = [];
            currentGroup.size = 0;
            Array.add(groups, currentGroup);
    
            var listItems = $telerik.getChildrenByTagName(listElement, "li");
            for (var i = 0; i < listItems.length; i++)
            {
                if (listItems[i].className == "rtsBreak")
                {
                    currentGroup = [];
                    currentGroup.size = 0;
                    Array.add(groups, currentGroup);
                    continue;
                }
    
                var sizeToAdd;
    
                //In all browsers exept IE8 and above the actual size contains fractions of a pixel which are rounded when offsetWidth/offsetHeight properties are used.
                //Use getComputedStyle instead to sum the actual size and then round it up, otherwise the last tab will fall on the next row.
                if (!($telerik.isIE7 || $telerik.isIE8)) {
                    var computedStyles = getComputedStyle(listItems[i]),
                        computedStyle = 0;
    
                    // invisible items break logic as .width returns "auto"
                    if (computedStyles && $(listItems[i]).is(":visible")) {
                        computedStyle = sizeProperty == "offsetWidth" ? (parseFloat(computedStyles.width) + parseFloat(computedStyles.paddingLeft)) : parseFloat(computedStyles.height);
                    }
    
                    sizeToAdd = computedStyle;
                } else {
                    sizeToAdd = listItems[i][sizeProperty];
                }
    
                currentGroup.size += sizeToAdd;
    
                Array.add(currentGroup, listItems[i]);
            }
    
            if (!($telerik.isIE7 || $telerik.isIE8)) {
                Array.forEach(groups, function(group) {
                    group.size = Math.ceil(group.size);
                });
            }
    
            return groups;
        };
    }

    Let me know if you have any further questions.

    Regards,
    Peter Milchev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top