I ve got a kendo grid and i want to a dblclick event on each row
$('tr').dblclick(function() { alert('hola'); }); But this doesnt work. If i want a dobleclick event o all table i can use$('table').dblclick(function() { alert('hola'); }); and this works. What is it the problem? I try to debug javascript y chrome and the first code ( $('tr').dblclick(function() { alert('hola'); }); ) works and can select different rows.The same problem ocurrs with click event.
5 Answers, 1 is accepted
0
Accepted
Ricardo
Top achievements
Rank 1
Rank 1
answered on 11 Apr 2012, 07:47 PM
Hi Asad.
hello assad
this code is for a grid and when we double click on any row launches the same alert.
<html><head> <title>Selection</title> <script src="jquery.min.js"></script> <script src="kendo.web.min.js"></script> <script src="console.js"></script> <link href="kendo.common.min.css" rel="stylesheet" /> <link href="kendo.metro.min.css" rel="stylesheet" /></head><body> <script src="people.js"></script> <div id="example" class="k-content"> <h3>Grid with multiple row selection enabled</h3> <div id="rowSelection" style="width:600px;"></div> <script> $(document).ready(function() { $("#rowSelection").kendoGrid({ dataSource: { data: createRandomData(10), pageSize: 5 }, selectable: "multiple", pageable: true, scrollable: false, navigatable: true, columns: [ { field: "FirstName", title: "name", format: "{0:c}", type:"String",editable: false, width: "150px" }, { field: "City", title: "city", editable:true, type:"Number", validation: { min: 1, required: true },width: "150px" }, {field: "BirthDate", title: "date",type:"String",editable:true,width:"150px"}, { command: ["add"], title: "add", width: "210px" }], editable: true }); $(".k-content").dblclick(function() { alert('dblclick'); }); }); </script> </div></body></html>
Greetings! 0
Ricardo
Top achievements
Rank 1
Rank 1
answered on 10 Apr 2012, 06:16 PM
hi asad.
to activate the alert when you select the grid
$('#tr').dblclick(function () {
alert('hola');
});
but this will give active as double-click the grid
to be in each row perhaps serve you
events
Greetings!
to activate the alert when you select the grid
$('#tr').dblclick(function () {
alert('hola');
});
but this will give active as double-click the grid
to be in each row perhaps serve you
events
Greetings!
Asad
commented on 11 Apr 2012, 09:58 AM
Top achievements
Rank 1
Rank 1
The following code works perfeclty.
<html><head><script src="jquery-1.7.1.min.js" type="text/javascript"></script></head><body><div><table border="1"><tbody><tr><td>cell 1</td></tr><tr><td>cell 2</td></tr></tbody></table></div><script type="text/javascript"> $(document).ready(function () { $('tr').dblclick(function() { alert('dblclick'); }); });</script></body></html>
But if i create a kendogrid and add the dblclick event like the example doesn't work. My "kendo code" is the following. It is a view with Razor engine in ASP.NET MVC 3
<script type="text/javascript">
$(document).ready(function () {
$("#usergrid").kendoGrid({
columns: [
{ field: "Id", title: "Id" },
{ field: "FirstName", title: "Fist Name" },
{ field: "LastName", title: "Last Name"}
],
dataSource: {
type: "json",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
allowUnsort: true,
pageSize: 2,
transport: {
read: {
url: "@Url.Action("LoadGrid", "User")",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
parameterMap: function(options) {
return JSON.stringify(options);
}
}
},
pageable: true,
sortable: true,
filterable: true,
selectable: true,
scrollable: {
virtual: true
},
change: function() {
var text = "";
var grid = this;
grid.select().each(function() {
var dataItem = grid.dataItem($(this));
text += "Id: " + dataItem.Id + "\n";
});
}
});
$('.k-grid-content tr').dblclick(function() { alert('dblclick'); });
$(".k-list-container .k-item").addClass("k-font-small");
});
</script>
Changing the selector (.k-grid-content tr') for any other doesn't work.
How can add dblclick event to a kendo grid?
Thank you 0
Ujjwal
Top achievements
Rank 1
Rank 1
answered on 20 Apr 2012, 01:47 PM
/*Adding double click event handler on kendo grid row.*/var dataSource = new kendo.data.DataSource({ data: createRandomData(10), autoload: true });$("#grid").kendoGrid({ dataSource: dataSource, height: 360, groupable: true, scrollable: true, sortable: true, pageable: true, columns: [ { field: "Id", width: 40 }, { field: "FirstName", width: 100, title: "First Name" }, { field: "LastName", width: 100, title: "Last Name" }, { width: 100, field: "City" }, { field: "Title", width: 200 }, { field: "BirthDate", title: "Birth Date", width: 150, template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' }, { width: 50, field: "Age" } }); /* Add Event handler*/ /* When the event handler is added - if the grid has not been already loaded then the bind event will not have any effect*/ /* Either rewire the even handler after the datasource is loaded or just use live method from Jquery.*/ $('#grid table tr').live('dblclick', function () { alert(' grid dbl clicked'); });
-- Ujjwal Karjee
Asad
commented on 20 Apr 2012, 06:41 PM
Top achievements
Rank 1
Rank 1
Thany you too Ujjwal, but how can i see if the datasource is loaded?.
0
Vishwa
Top achievements
Rank 1
Rank 1
answered on 15 Jul 2012, 06:14 PM
You could first write a change event handler to get the selected data :
var data = null;
onChange = function ( e ) {
var grid = this;
grid.select().each( function () {
data = grid.dataItem( $( this ) );
} );
};
and then use it in the dblclick event to act on it as described in the thread
var data = null;
onChange = function ( e ) {
var grid = this;
grid.select().each( function () {
data = grid.dataItem( $( this ) );
} );
};
and then use it in the dblclick event to act on it as described in the thread
Avrohom Yisroel
commented on 22 Jul 2012, 08:08 PM
Top achievements
Rank 1
Rank 1
Hi Vishwa,
Please could you explain where you put this onChange code? I'm very new to KendoUI, and am still finding my way around. I have the double-click working, thanks to this thread, but can't see how to get the ID.
Thanks
Please could you explain where you put this onChange code? I'm very new to KendoUI, and am still finding my way around. I have the double-click working, thanks to this thread, but can't see how to get the ID.
Thanks
0
Daniel
Top achievements
Rank 2
Rank 2
answered on 18 Dec 2012, 12:58 AM
<div id="grid"></div><div class="console"></div><script src="js/app/model/test.js"></script> <script> var ID; function onChange(args) { var model = this.dataItem(this.select()); ID = model.ID; //gets the value of the field "ID" kendoConsole.log("value of ID is " + ID); } function onEdit(e){ } $("#grid").kendoGrid({ change: onChange, edit: onEdit, selectable: "row", editable: "inline", filterable: true, pageable: true, sortable: true, dataSource: getdatasource(), columns: [ { field: "ID" }, { field: "firstName" }, { field: "middleName" }, { field: "lastName" }, { command: ["destroy"]} ]}); $('#grid table tr').live('dblclick', function () { alert(ID); }); </script>
Just combining the onChange event and the doubleclick event described in this thread. This allows us to get any values from the grid onDoubleclick by getting the values first using the onChange event.
I got the dblclick working but i can't figure out how to get the id/value of the selected row.
Can anyone help me with that?
Regards, Sander