Double click on a row in kendo grid

10 posts, 1 answers
  1. Asad
    Asad avatar
    3 posts
    Member since:
    Mar 2012

    Posted 10 Apr 2012 Link to this post

    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.
  2. Ricardo
    Ricardo avatar
    23 posts
    Member since:
    Feb 2012

    Posted 10 Apr 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Asad
    Asad avatar
    3 posts
    Member since:
    Mar 2012

    Posted 11 Apr 2012 Link to this post

    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
  5. Answer
    Ricardo
    Ricardo avatar
    23 posts
    Member since:
    Feb 2012

    Posted 11 Apr 2012 Link to this post

    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!
      
  6. Ujjwal
    Ujjwal avatar
    2 posts
    Member since:
    Aug 2012

    Posted 20 Apr 2012 Link to this post

    /*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
  7. Asad
    Asad avatar
    3 posts
    Member since:
    Mar 2012

    Posted 20 Apr 2012 Link to this post

    Thany you too Ujjwal, but how can i see if the datasource is loaded?.
  8. Sander
    Sander avatar
    8 posts
    Member since:
    Jan 2012

    Posted 24 Apr 2012 Link to this post

    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
  9. Vishwa
    Vishwa avatar
    4 posts
    Member since:
    Dec 2011

    Posted 15 Jul 2012 Link to this post

    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
  10. Avrohom Yisroel
    Avrohom Yisroel avatar
    35 posts
    Member since:
    Jan 2011

    Posted 22 Jul 2012 Link to this post

    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
  11. Daniel
    Daniel avatar
    36 posts
    Member since:
    Apr 2009

    Posted 17 Dec 2012 Link to this post

    <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.
Back to Top
Kendo UI is VS 2017 Ready