Multiple tabs shown when animation is turned on and user double clicks

2 posts, 0 answers
  1. Frederick
    Frederick avatar
    11 posts
    Member since:
    Jun 2013

    Posted 02 Jul 2013 Link to this post

    Consider the following cshtml file.  I have changed the style for the tab to hide the tabstrip item headers and added previous/next buttons to the page to simulate a wizard.  If I don't turn off animation for the tabstrip and the user double clicks on the previous or next button the contents of two tabs will be shown stacked on top of one another.  Is there anything I can do about this or is this a bug?

    @{
        ViewBag.Title = "About";
    }
    <hgroup class="title">
        <h1>@ViewBag.Title.</h1>
        <h2>@ViewBag.Message</h2>
    </hgroup>
    <button id="Previous" class="toggleTab k-button" onclick="moveToTab(-1);return true;">
        Previous</button>
    <button id="Next" class="toggleTab k-button" onclick="moveToTab(1);return true;">
        Next</button>
    @(Html.Kendo().TabStrip()
              .Name("tabstrip")
              .Animation( false)
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Paris")
                      .Selected(true)
                      .Content(@<text>
                                    Paris
                                </text>);

                  tabstrip.Add().Text("New York")
                      .Content(@<text>
        New York
    </text>);

                  tabstrip.Add().Text("Moscow")
                      .Content(@<text>
    Moscow
    </text>);

                  tabstrip.Add().Text("Sydney")
                      .Content(@<text>
    Sydney
    </text>);
        tabstrip.Add().Text("Fort Worth")
                      .Content(@<text>
    Fort Worth
    </text>);
              })
        )
    <script>

        var currentIndex = 0;
        var maxIndex;
        var tabStrip;
        
        function moveToTab(increment) {

            if (increment > 0) {
                if (currentIndex < maxIndex) {
                    currentIndex++;
                    tabStrip.select(currentIndex);
                }
            } else {
                if (currentIndex > 0) {
                    currentIndex--;
                    tabStrip.select(currentIndex);
                }
            }

        }

        $(document).ready(function () {

            tabStrip = $("#tabstrip").data("kendoTabStrip");
            maxIndex = tabStrip.items().length - 1;
        });
    </script>

    <style scoped>
        #tabstrip ul.k-tabstrip-items {
        display: none;
    }
    </style>
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 04 Jul 2013 Link to this post

    Hi Frederick,

     
    Basically current behavior is expected and you should handle this behavior using custom code. For example you can disable the buttons during the animation - please check the updated code below:

    <script>
        var currentIndex = 0;
        var maxIndex;
        var tabStrip;
     
        function disableButton(element) {
            element.attr("disabled", "disabled");
        }
     
        function enableButton(element) {
            element.removeAttr("disabled");
        }
         
        function moveToTab(increment) {
     
            disableButton($("#Previous"));
            disableButton($("#Next"));
     
            if (increment > 0) {
                if (currentIndex < maxIndex) {
                    currentIndex++;
                    tabStrip.select(currentIndex);
                }
            } else {
                if (currentIndex > 0) {
                    currentIndex--;
                    tabStrip.select(currentIndex);
                }
            }
     
            setTimeout(function () {
                enableButton($("#Previous"));
                enableButton($("#Next"));
            }, 500) //set the time of the animation
        }
     
        $(document).ready(function () {
            tabStrip = $("#tabstrip").data("kendoTabStrip");
            maxIndex = tabStrip.items().length - 1;
        });
    </script>
    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top