Telerik Forums / UI for ASP.NET MVC Forum / ListView /

Listview Selection - On Click / mousedown

Telerik UI for ASP.NET MVC
Resources Buy Try

17 posts, 1 answers

Rene

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
Dimiter Madjarov
Admin

2311 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!
Rene

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
Rene

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/
Rene

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...
Rene

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.
Dimiter Madjarov
Admin

2311 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!

ListViewCustomSelection.zip
Rene

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.
Answer
Rene

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!
André

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?
Dimiter Madjarov
Admin

2311 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.
André

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?
Dimiter Madjarov
Admin

2311 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.
Trustteam

13 posts

Member since:
Apr 2010

Posted 18 May 2016 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!
Dimiter Madjarov
Admin

2311 posts

Posted 18 May 2016 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
Trustteam

13 posts

Member since:
Apr 2010

Posted 18 May 2016 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.
Dimiter Madjarov
Admin

2311 posts

Posted 18 May 2016 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