ListView click event does not have stopPropagation function.

5 posts, 0 answers
  1. Aurimas
    Aurimas avatar
    2 posts
    Member since:
    Oct 2013

    Posted 21 Jan 2014 Link to this post

    Hi,

    we're using kendo mobile ListView the same as in following demo:
    http://demos.kendoui.com/mobile/listview/mvvm.html

    Click event does not have stopPropagation function. Are there any other ways to stop event bubbling?

    Aurimas

  2. Aurimas
    Aurimas avatar
    2 posts
    Member since:
    Oct 2013

    Posted 23 Jan 2014 Link to this post

    Hi, 

    thanks for answer.

    Simple example:

    The click on list item results to modal window with button. If a button is located at the same list item area which was clicked, the button is clicked also. I can reproduce it on slower android devices, but not on desktop browser. So it seems, that it bubbles.

    Kendo version: v2013.3.1127

    Best regards,
    Aurimas

      
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 23 Jan 2014 Link to this post

    Hello Aurimas,

    Could you please extract a runnable sample that we can test? Can you reproduce this with the latest version of Kendo UI? What is the test device that you use?

    Thank you in advance for the provided information.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. IE
    IE avatar
    3 posts
    Member since:
    Nov 2014

    Posted 14 Jan 2015 in reply to Kiril Nikolov Link to this post

    Hi,
    I'm having the same problem, e.stopPropagation() is not working for ListView click events.

    I've attached the test code, here is the test in a kendo dojo http://dojo.telerik.com/UHIdO/4

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
      <div id="tabstrip-home"
            data-role="view"
            data-title="Messages"
            data-layout="tabstrip-layout"
            data-model="app.testModel"
            data-show="app.testModel.show"
         
            <ul data-role="listview" data-style="inset" >           
                <div data-bind="source: testDataSource" data-role="listview" data-template="test-template"></div>
             </ul>       
        </div> 
         
    <script id="test-template" type="text/x-kendo-tmpl" >
      <div class="w-item-template">
        <div data-bind="click: onParentClick">
                     Click Parent
            <a data-role="button" data-bind="click: onChildClick"> Child button</a>
        </div>
      </div>
         
    </script>
    <script>
      var app = new kendo.mobile.Application(document.body);
      var TestViewModel,
     
        TestViewModel = kendo.data.ObservableObject.extend({
            testDataSource: null,
             
            init: function () {
                var that = this;
                kendo.data.ObservableObject.fn.init.apply(that, []);
                 
                that.set("testDataSource", []);
            },
          show: function(){
                 
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/Products/Read",
                        dataType: "jsonp"
                    }
                },
                schema: {
                    total: function () { return 77; }
                },
                serverPaging: true,
                pageSize: 2
            });      
            app.testModel.set("testDataSource", dataSource);
          },
          onParentClick: function(){
            console.log('parent');
          },
          onChildClick: function(e){
           // e.stopPropagation(); //<-- This doesn't work
            console.log('child');
           // console.log(e);
             
          }
        });
     
        app.testModel = new TestViewModel(); 
    </script>
     
     
    </body>
    </html>

    Thank you,
    Alex
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 15 Jan 2015 Link to this post

    Hello Ie,

     

    As I explained in the first post - widget events do not have stopPropagation() as they are DOM events. You can implement custom logic to distinct the button from the ListView click event like this:

     

    http://dojo.telerik.com/uvEg

     

    Regards,
    Kiril Nikolov
    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