Listview Selection - On Click / mousedown

17 posts, 1 answers
  1. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 11 Sep 2013 Link to this post

    I have a listivew that has single selection set.

    However, I need part of the template area (div) to not trigger the selection where clicking in inside that div will do something else than cause the onchange to fire.

    How would I do this without using an iframe?

    Thank You in Advance.
    Rene Pilon
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 13 Sep 2013 Link to this post

    Hello Rene,


    To achieve this you could stop the propagation of the mousedown event for the specific part of the template. Here is a short example.
    E.g.
    $("#listView").on("mousedown", "div[role='option'] h1", function (e) {
        //prevent the change event for the title in the div
        e.preventDefault();
        e.stopImmediatePropagation();
     
        console.log("custom action");
    });
     
    function onChange(e) {
        console.log("change event");
    }

    I hope that this approach will work for the current case.

    Regards,
    Dimiter Madjarov
    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
  4. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 13 Sep 2013 Link to this post

    I had something to that effect working for everything but IE ( ie 10).

    I also added :

    e = e || window.event ;

    as the first line and then

    if( e.cancelBubble )
      e.cancelBubble = true;

    but IE seems to pass the mousedown up before the function even completes.

    what you provide works fine for Firefox
  5. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 13 Sep 2013 Link to this post

    I'm going to give this a try and report back.

    http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/
  6. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 13 Sep 2013 Link to this post

    If I set IE 10 to compatibility mode - it works.  However, can't expect end users to do this...
  7. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 13 Sep 2013 Link to this post

    You can see what I'm trying to accomplish - it works fine on everything but IE 10 non compat mode.
    http://www.renepilon.com/Home/Portfolio
    Try clicking on the first item in the listview, it should open up and you can scroll that expanded content / div (using nanoscroller for that div btw).
    Basically, I don't want the div to close up (hide) when clicking inside of it.  I will be adding other functionality to indicate closing the expanded div shortly.
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 16 Sep 2013 Link to this post

    Hello Rene,


    I could not be sure what is the reason for the issue in the live project. For your convenience I prepared a small sample project, which demonstrates that the approach is working as expected in IE 10.

    Please take a look at it. I hope that it covers the current case.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 16 Sep 2013 Link to this post

    I got it working - but I had to create a small state machine.

    The difference:

    On IE 10 (maybe other IE versions also) - the listview onchange is called if the event is cancelled or not.
    On FF, Droid, et al - it's not.
  10. Answer
    Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 16 Sep 2013 Link to this post

    Thank you for help on this Dimiter.  Great service as usual!
  11. André
    André avatar
    7 posts
    Member since:
    Feb 2013

    Posted 05 Jun 2014 Link to this post

    Hello Dimiter,

    I am having the same issue, but the sample project that you prepared is not working. At least in IE11. In IE8, chrome, firefox it works well...

    In IE11, the change event is not fired (the mouse down is).

    Can you help me with this issue please?
  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 Jun 2014 Link to this post

    Hello Andre,


    The Kendo UI version used in the project is Q2 2013, but the official Internet Explorer 11 support was introduced in Q2 2013 SP1. I would suggest you to update the Kendo UI version in order to fix the current issue.

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. André
    André avatar
    7 posts
    Member since:
    Feb 2013

    Posted 06 Jun 2014 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    I have updated Kendo UI of the sample project to 2014.1.528. It still works on other browsers but in IE11 it isn't working.

    Now, when I click in the <h3> tag it fires the two events: the custom action and the change event of the listview (when I click outside the <h3> only change event is fired, which is correct).

    Have you some other suggestion?


  14. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 09 Jun 2014 Link to this post

    Hi Andre,


    Indeed you are correct. Please excuse me for the inconvenience. I would suggest you to also prevent the pointerdown and MSPointerDown events in order to achieve the same behavior in Internet Explorer.
    E.g.
    $("#listView").on("mousedown pointerdown MSPointerDown", "div[role='option'] h3", function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
    });

    I hope this information helps.

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  15. Trustteam
    Trustteam avatar
    13 posts
    Member since:
    Apr 2010

    Posted 18 May in reply to Dimiter Madjarov Link to this post

    Hello Dimiter,

    I still have this issue on IE11, Chrome the listview change event is not fired, only in Firefox seems to be OK. I used Kendo UI v2015.2.624 .

    This is a simple example:

     

     $("#selectNursingHome").kendoListView({
                  template: "<option>#: name#</option>",
                  dataSource: [
                      { name: "John Doe", age: 30 },
                      { name: "Smith Sam", age: 30 }
                  ],
                  selectable: true           
              });
              var listView = $("#selectNursingHome").data("kendoListView");
              // bind to the change event
              listView.bind("change", function(e) {
                  alert("test");
              });

    Thank you!

  16. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 18 May Link to this post

    Hello Trustteam,

    The current implementation attaches a handler to the built in change event of the ListView widget. It is working as expected on my end.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  17. Trustteam
    Trustteam avatar
    13 posts
    Member since:
    Apr 2010

    Posted 18 May in reply to Dimiter Madjarov Link to this post

    Hello Dimiter,

    Thank you for your response!

    The problem is that I used instead of  <div id="selectNursingHome"></div>   a select element <select  name="select" id="selectNursingHome"></select>. In this case we still have problem for IE and Chrome.

     


  18. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 18 May Link to this post

    Hello Trustteam,

    The ListView widget cannot be initialized from a select element.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready