This is a migrated thread and some comments may be shown as answers.

Listview Selection - On Click / mousedown

16 Answers 277 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Rene
Top achievements
Rank 1
Rene asked on 11 Sep 2013, 09:58 PM
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

16 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 13 Sep 2013, 11:57 AM
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!
0
Rene
Top achievements
Rank 1
answered on 13 Sep 2013, 07:57 PM
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
0
Rene
Top achievements
Rank 1
answered on 13 Sep 2013, 08:22 PM
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/
0
Rene
Top achievements
Rank 1
answered on 13 Sep 2013, 08:28 PM
If I set IE 10 to compatibility mode - it works.  However, can't expect end users to do this...
0
Rene
Top achievements
Rank 1
answered on 13 Sep 2013, 10:12 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 16 Sep 2013, 10:24 AM
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!
0
Rene
Top achievements
Rank 1
answered on 16 Sep 2013, 01:17 PM
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.
0
Accepted
Rene
Top achievements
Rank 1
answered on 16 Sep 2013, 01:40 PM
Thank you for help on this Dimiter.  Great service as usual!
0
André
Top achievements
Rank 1
answered on 05 Jun 2014, 04:28 PM
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?
0
Dimiter Madjarov
Telerik team
answered on 06 Jun 2014, 08:10 AM
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.

 
0
André
Top achievements
Rank 1
answered on 06 Jun 2014, 08:57 AM
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?


0
Dimiter Madjarov
Telerik team
answered on 09 Jun 2014, 01:47 PM
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.

 
0
Trustteam
Top achievements
Rank 2
answered on 18 May 2016, 09:50 AM

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!

0
Dimiter Madjarov
Telerik team
answered on 18 May 2016, 11:59 AM

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
0
Trustteam
Top achievements
Rank 2
answered on 18 May 2016, 12:50 PM

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.

 


0
Dimiter Madjarov
Telerik team
answered on 18 May 2016, 01:03 PM

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
Tags
ListView
Asked by
Rene
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Rene
Top achievements
Rank 1
André
Top achievements
Rank 1
Trustteam
Top achievements
Rank 2
Share this question
or