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
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
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
http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/
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.
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
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.
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?
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.
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?
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.
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!
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
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.
Hello Trustteam,
The ListView widget cannot be initialized from a select element.
Regards,Dimiter Madjarov
Telerik