TabStrip touch events

9 posts, 0 answers
  1. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 13 Aug 2014 Link to this post

    I'm using a TabStrip in the middle of a page's content to programmatically switch some views which are basically divs that I toggle visibility on.  That works fine and all but I notice if I am scrolling down the page and tap and hold and the tabstrip happens to be under my finger the tabstrip registers that as a "click" and immediately changes.  Is there anyway to avoid this?  Could the Touch widget possibly solve this problem?

    Scott
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Aug 2014 Link to this post

    Hi,

    the Tabstrip widget uses the touchstart event, following the iOS component equivalent behavior, which means that you can't use it in a scrolling container. A workaround I may suggest is to use a couple of mobile buttons or regular elements with custom styling and the Touch widget. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 17 Aug 2014 in reply to Petyo Link to this post

    I'm curious what is the benefit of using the touchstart event when it seems like the tap event would work just fine?
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Aug 2014 Link to this post

    Hi,

    the touchstart event is much more "responsive" than the touchend one. Like I said, this is how the native tabbar behaves.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 18 Aug 2014 in reply to Petyo Link to this post

    Okay, it just doesn't seem like having it more "responsive" is of any real benefit when the widget could be made more useful in other scenarios, but okay I accept that.  That being said I've created a custom widget based on the documentation and it seems to work fairly well.  I'm having one issue though.  So what happens is if you have click on a tab and the content extends down the screen and you scroll down the page and switch to another tab that has content that doesn't extend beyond the bottom of the page the click event will actually cause buttons above to be clicked.  This probably sounds confusing so I've worked up an example.

    http://example.rengr.co/home/tabswitcher

    To reproduce the issue visit the above link on a smartphone.  Click on tab 3, scroll down until the tab switcher bar is above where the button labeled "Random Button" would be if the page was scrolled all the way up to the top, then click on tab 1.  The tab switcher successfully changes the view to the first view however it will also cause the random button to be clicked as well.  How do I prevent this from happening?


  7. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 18 Aug 2014 Link to this post

    Also here is the code for the custom widget.

    (function ($) {
        var kendo = window.kendo,
            ui = kendo.ui,
            Widget = ui.Widget
     
        var TabSwitcher = Widget.extend({
            init: function (element, options) {
                var that = this;
                var $element = $(element);
     
                Widget.fn.init.call(that, element, options);
                $element.addClass("km-widget km-tabstrip");
     
                $.each($element.find("a"), function (i, val) {
                    var $item = $(val);
                    $item.addClass("km-button");
     
                    var text = $item.text();
                    $item.text("");
     
                    if ($item.data("icon")) {
                        $item.append("<span class='km-icon km-" + $item.data("icon") + "'></span>");
                    }
     
                    $item.append("<span class='km-text'>" + text + "</span>");
     
                    if (that.options.selectedIndex == i) {
                        $item.addClass("km-state-active");
                    }
                });
     
                if (that.options.viewContainer) {
                    that._showView(that.options.viewContainer, that.options.selectedIndex);
                }
     
                $element.kendoTouch({
                    filter: ".km-button",
     
                    tap: function (e) {
                        var index = e.touch.target.index();
                        var $buttons = $element.find("a");
                        $buttons.removeClass("km-state-active");
                        $buttons.eq(index).addClass("km-state-active");
     
                        if (that.options.viewContainer) {
                            that._showView(that.options.viewContainer, index);
                        }
     
                        if (that.options.selected) {
                            that.options.selected({
                                index: index
                            })
                        }
                    }
                });
            },
     
            options: {
                name: "TabSwitcher",
                selectedIndex: 0,
                selected: null,
                viewContainer: null
            },
     
            _showView: function (viewContainer, index) {
                viewContainer.children().hide();
                viewContainer.children().eq(index).show();
            }
        });
     
        ui.plugin(TabSwitcher);
    })(jQuery);
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 20 Aug 2014 Link to this post

    Hi,

    the problem you experience is due to the delayed DOM click event on mobile devices. There are plenty of articles  available online which explain the specifics of this case.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 20 Aug 2014 in reply to Petyo Link to this post

    I was not aware of the 300ms delay for the tap event on mobile devices, now the use of the touchstart event to make the TabStrip more responsive makes sense to me.  Okay, so I added e.preventDefault() to the end of the tap event handler of the kendoTouch widget in my custom widget and it seems to be working.  Do you see any potential downside to this?
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Aug 2014 Link to this post

    Hello,

    Your approach looks valid. Please use it and let us know in case you experience any issues.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready