Double click on a row in kendo grid

5 Answers 7378 Views
Grid
Asad
Top achievements
Rank 1
Asad asked on 10 Apr 2012, 04:27 PM
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.
Sander
Top achievements
Rank 1
commented on 24 Apr 2012, 08:08 AM

Hi guys,

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

5 Answers, 1 is accepted

Sort by
0
Accepted
Ricardo
Top achievements
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
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!
Asad
Top achievements
Rank 1
commented on 11 Apr 2012, 09:58 AM

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
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
Top achievements
Rank 1
commented on 20 Apr 2012, 06:41 PM

Thany you too Ujjwal, but how can i see if the datasource is loaded?.
0
Vishwa
Top achievements
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
Avrohom Yisroel
Top achievements
Rank 1
commented on 22 Jul 2012, 08:08 PM

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
0
Daniel
Top achievements
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.
Tags
Grid
Asked by
Asad
Top achievements
Rank 1
Answers by
Ricardo
Top achievements
Rank 1
Ujjwal
Top achievements
Rank 1
Vishwa
Top achievements
Rank 1
Daniel
Top achievements
Rank 2
Share this question
or