Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 16 Oct 2020 17:16 by ADMIN
Release R3 2020 SP1
David
Created on: 08 May 2019 14:54
Category: TabStrip
Type: Bug Report
0
Cannot serialize non finite numbers error when hiding a tab on the client and the PerTabScrolling is enabled
We are using the Telerik tabStrip ASP.NET AJAX control.

We have set PerTabScrolling="true" on the tabStrip.

Then we have hidden a tab on the client side that is apart of the tabstrip.

Now when we scroll to the end of the list we receive a JavaScript error: Sys.InvalidOperationException: Cannot serialize non finite numbers.

This only happens when we hide a tab.

 
Attached Files:
3 comments
ADMIN
Rumen
Posted on: 09 May 2019 07:55
Thank you for the finding! I've added it as a comment to the private bug report item in the backlog.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Erich
Posted on: 08 May 2019 15:40
Hi @Rumen, thanks for the answer! Functionally, it works great. As a note for the R3 udpate fix, the "rtsDisabled" class is not applied to the right side arrow when reaching the end. Otherwise, no issues. Thanks again!
ADMIN
Rumen
Posted on: 08 May 2019 14:59
Hi David,

Thank you for reporting this bug!

I debugged the scenario and found that the $telerik.getComputedStyle(tab.get_element(), that._sizeProperty) method returns a string "auto" for the hidden tab inside the _scrollTab() function which of course throws an error when the auto string value goes through the parseFload function:

size += parseFloat($telerik.getComputedStyle(tab.get_element(), that._sizeProperty));

So to fix the error you can apply the following override:

<script type="text/javascript">
 
    function pageLoad(sender, args) {
        // assign the tab
        window.tabs = $find("<%= Tabs1.ClientID%>");
 
        // check if tab exists
        if (tabs) {
            // if it does loop through all tabs
            for (var i = 0; i < tabs.get_tabs().get_count(); i++) {
                // get tab item, 1 at a time
                var tab = tabs.get_tabs().getItem(i);
 
                // if value of tab matches, make it invisible
                if (tab.get_value() == "13") tab.set_visible(false);
                else tab.set_visible(true);
            }
 
        }
    }
 
    var $T = Telerik.Web.UI;
    $T.TabScroller.prototype._scrollTab = function(e) {
        var that = this;
        var roundingCompensation = 1;
        var visibleRight = this._currentPosition + this._scrolledElement[this._offsetSizeField];
        var scrollSize;
        var tabs = this._owner.get_tabs().toArray();
        var nextPosition;
        var size = 0;
 
        if ($(e.target).is(".rtsNextArrow")) {
            visibleRight += roundingCompensation;
 
            $.each(tabs, function (_, tab) {
                if ($telerik.isIE8) {
                    size += parseFloat($(tab.get_element()).css(that._sizeProperty));
                } else {
                    if (that._sizeProperty == "width") {
                        size += parseFloat(tab.get_element().getBoundingClientRect().width);
                    }
                    else {
                        size += parseFloat($telerik.getComputedStyle(tab.get_element(), that._sizeProperty));
                    }
                }
                return Math.floor(size) <= visibleRight;
            });
 
            nextPosition = size - this._scrolledElement[this._offsetSizeField];
        } else {
            scrollSize = this._scrolledElement[this._scrollSizeField] + roundingCompensation;
 
            $.each(tabs.reverse(), function (_, tab) {
                if ($telerik.isIE8) {
                    size += parseFloat($(tab.get_element()).css(that._sizeProperty));
                } else {
                    if (that._sizeProperty == "width") {
                        size += parseFloat(tab.get_element().getBoundingClientRect().width);
                    }
                    else {
                        size += parseFloat($telerik.getComputedStyle(tab.get_element(), that._sizeProperty));
                    }
                }
                return visibleRight <= (scrollSize - Math.floor(size));
            });
 
            nextPosition = scrollSize - (size + this._scrolledElement[this._offsetSizeField]);
        }
 
        nextPosition = Math.round(Math.max(nextPosition, this._minPosition));
        nextPosition = Math.round(Math.min(nextPosition, this._maxPosition));
 
        this._scrollTo(nextPosition);
    }
 
</script>

The side effect is that if you resize again the page, the scroll will go away. This is something that we will research and fix for the R3 2019 release.

We do respect your time and valuable feedback and I updated your Telerik points.

Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category