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

Grid Row DoubleClick (or keypress)

19 Answers 1453 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dr.YSG
Top achievements
Rank 2
Dr.YSG asked on 27 Jun 2012, 08:38 PM
I have an application that has one split window where side A is a GoogleMap and side B is a Grid.
The grid is selectable:"multiple, row", and selections show small red footprints on the map when the item in the row is selected (in other words, item select in the grid will show up as a red bounding box in the map).

All this is working fine.

But sometimes the row-item selected is off screen on the map, and USERS are asking for the the ability to "click" on a row and have the map window scroll to center on that item.

Since row select (and thus <TR onclick() > is being used I was considered using jQuery to add:

$("#grid tr[data-uid]").dblclick( function(e) {panTo(e)});

To each of the 500+ data rows in the Grid (I have group headings also). I could also handle .keypress().

1 is this nuts, or is there more efficient or better way to do this? (i.e some sort of custom row editor? even though the grid is read-only)?
2. Which is better doubleclick or keypress?

19 Answers, 1 is accepted

Sort by
0
GungFooMon
Top achievements
Rank 1
answered on 28 Jun 2012, 08:52 AM
Doesn't sound too bad..
but why not assign the handler in a single call?

$('#grid tbody > tr').dblclick(panTo);

Regards!
0
Dr.YSG
Top achievements
Rank 2
answered on 28 Jun 2012, 02:18 PM
I would still have to filter out the group header TR rows:

$('#grid tbody > tr[data-uid]').dblclick(panTo);

But I am also trying to get an idea from TELERIK if doing this would be broken by future releases. I.e. do they plan to use DoubleClick for something in the future?

Other concerns are:

  1. Does DoubleClick also fire the Select Row (I would not really want that)
  2. Does DoubleClick interfere with Select Row with a single click?
  3. Would a Keypress be better?
  4. Am I attaching too many event handlers? (sometimes there can be 5K rows in the grid?) and would making things virtual help or worsen the issue?

Without inside knowledge of what is going on in the Grid it is a little hard to know the answers here.

0
Accepted
Iliana Nikolova
Telerik team
answered on 02 Jul 2012, 05:54 AM
Hi guys,

@Yechezkal

We do not plan to add a DoubleClick event handler in our framework, because there is a corresponding DOM event. You could easily handle dbclick event using jQuery delegates. For example: 
$("#grid").delegate("tbody>tr", "dblclick", function(){alert("Double Click!");});

To your other questions: 
  1. Yes. If the grid is selectable -> a DoubleClick also fires Select Row;
  2. No. DoubleClick does not interfere with a single click of the row; 
  3. This is a question I can not answer to. This will depend on the end-user requirements;
  4. When the delegate is used, there will not be many event handlers. Also, for this scenario I will recommend to make your grid pageable.
     

I hope this information helps.
 
Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dr.YSG
Top achievements
Rank 2
answered on 04 Jul 2012, 04:23 PM
Just one more detail for readers of this thread:

As of JQuery 1.7 delegate has been superseded by .on() and .click() and .dlbclick are just shorthands for .on()

Query.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
 
    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        if ( fn == null ) {
            fn = data;
            data = null;
        }
 
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
 
    if ( jQuery.attrFn ) {
        jQuery.attrFn[ name ] = true;
    }
 
    if ( rkeyEvent.test( name ) ) {
        jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
    }
 
    if ( rmouseEvent.test( name ) ) {
        jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
    }
});
0
Apostolos
Top achievements
Rank 1
answered on 12 Mar 2013, 08:54 AM
Hello, i followed the suggestion for double click which is posted here: http://stackoverflow.com/questions/14254013/change-single-click-editing-to-double-click-in-grid

Although the code seems to work without any problem, on Firefox there is always an error
comming up in the console every time i double click.

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLInputElement.setSelectionRange]
[Break On This Error]  
settings = extend({}, kendo.Template, that.options.templateSettings),
kendo.web.js (line 18954)


NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLInputElement.setSelectionRange]
[Break On This Error]  
element.setSelectionRange(position, position);
kendo.web.js (line 29562)


The error message does not appear in IE and Chrome.  Any suggestions of what this could be
or how to fix that ? 

0
Saul
Top achievements
Rank 1
answered on 11 Feb 2014, 01:48 PM
Hi 

I have problem with my Telerik Grid. when i add Selectable() property its just select one click but i want to select elements with double click

Please give me advice how can i do it?

I'm using MVC elements 
0
Iliana Nikolova
Telerik team
answered on 14 Feb 2014, 02:31 PM
Hi Saul,

This scenario is not supported by Kendo UI Grid out-of-the-box, however you could try a custom implementation. As a possible approach I can suggest the following:
  • Disable the Grid selection;
  • In the dblclick event add a "k-state-selected" class to the double-clicked row.
Keep in mind in this case you won't be able to use the built-in select() method, but you could achieve the same and retrieve the selected rows by the k-state-selected class.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Garry
Top achievements
Rank 2
Veteran
answered on 20 May 2014, 09:17 AM
This is the 20th request I have found on your web site for the same thing, yet still the answer is incomplete!

We want:
a. The Javascript code to add a row double click handler
b. Code demonstrating how to get at the data for the row which is double clicked

Not too much to ask eh?
0
Iliana Nikolova
Telerik team
answered on 23 May 2014, 07:09 AM
Hi Garry,

Straight to the questions
a. You can handle the dblclick() event: 
$("#grid").on("dblclick", " tbody > tr", function () {
    //....
});
b. You can get the row data via the dataItem method: 
$("#grid").on("dblclick", " tbody > tr", function () {
    var grid =  $("#grid").data("kendoGrid");
    console.log(grid.dataItem($(this)));
});

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Garry
Top achievements
Rank 2
Veteran
answered on 23 May 2014, 08:31 AM
Thanks you Iliana
Now KendoUI customers have some actual working code allowing them to get at the data row.

Kind Regards, Garry.
0
ajith
Top achievements
Rank 1
answered on 01 May 2015, 04:02 AM

Hi all,

 First of all thank you so much. Is it possible to dblClick for a single cell?

0
Iliana Nikolova
Telerik team
answered on 05 May 2015, 03:28 PM
Hi Ajith,

The following code snippet should help to achieve the expected result: 
$("#grid").on("dblclick", " tbody > tr > td", function () {
   //....
});

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ajith
Top achievements
Rank 1
answered on 13 May 2015, 04:13 AM

Hi Iliana Nikolova,

  Thank you, is it possible to specify cell name like model.name, and can set trigger this event only for that cell? 

 

0
Iliana Nikolova
Telerik team
answered on 15 May 2015, 02:27 PM

Hi Ajith,

For this requrement you could set set some attrubutes to a particular column and use it in the selector: 

$("#grid").kendoGrid({
  //....
  columns: [{
     //....
     }, {
     attributes: {
         "class": "customClass"
     }
     }, {
     //....
  }]
});
 
$("#grid").on("dblclick", " tbody > tr > td.customClass", function () {
   //....
});

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ajith
Top achievements
Rank 1
answered on 18 May 2015, 03:43 AM

Hi Iliana Nikolova.

        Thank you so much. I have another query. i want to update two model properties with a selected row values of popup grid. I successfully popup window with a grid. But i cant update the model with the selected row values. Please Help Me

<a id="window"></a>
@(Html.Kendo().Grid<IBATechnologies.IBA.Web.Models.AssetLocationViewModel>()
            .Name("AssetlocationGrid")
           .Columns(columns =>
    {
        //columns.Bound(p => p.UserId).Width(125);
        columns.Bound(p => p.CampanyCode).Width(125);
        columns.Bound(p => p.location1code).Width(165).Filterable(false);
        columns.Bound(p => p.location2code).Width(150).Filterable(false);
        columns.Bound(p => p.locationCode).Width(125);
        columns.Bound(p => p.Name).Width(150);
        columns.Bound(p => p.ShortName).Width(150);
        columns.Bound(p => p.CreatedBy).Width(150);
        columns.Bound(p => p.ModifyBy).Width(150);
          
         
        //columns.Bound(p => p.Designation).Width(150);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable()
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )))
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
          
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.locationCode))
        .Create(update => update.Action("AssetLocEditingPopup_Create", "Location"))
            .Read(read => read.Action("AssetLocationEditingPopup_Read", "Location"))
            .Update(update => update.Action("AssetLocEditingPopup_Update", "Location"))
              
            .Destroy(update => update.Action("AssetLocEditingPopup_Destroy", "Location"))
    )
      
      
      
  
)
  
  
  
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
      
    });
  
      
    function onRowSelected() {
          
        var grid = $("#popupGrid").data("kendoGrid");
        var selectedItem = grid.dataItem(grid.select());
          
        var loc = selectedItem.Name
          
      var grid=  $("#AssetlocationGrid").data("kendoGrid").onRowSelected.add('location1code',loc);
        
//here i  want the code to update mode property
        alert(loc)
    }
      
</script>
@{Html.Kendo().Window()
.Name("locapopupWindow")
.Title("Select Location")
.Draggable()
.Width(500)
.Height(300)
.Actions(actions => actions
    .Custom("custom")
    .Minimize()
    .Maximize()
    .Close()
  
    )
    .Content(@<text>
  
   @{Html.Kendo().Grid<IBATechnologies.IBA.Web.Models.AssetLocationViewModel>()
    .Name("popupGrid")
  
           .Columns(columns =>
           {
               columns.Bound(p => p.CampanyCode).Width(125).Visible(false);
               columns.Bound(p => p.location1code).Width(165).Visible(false);
               columns.Bound(p => p.location2code).Width(150).Visible(false);
               columns.Bound(p => p.Name).Width(150);
               columns.Bound(p => p.ShortName).Width(150);
               columns.Bound(p => p.CreatedBy).Width(150).Visible(false);
               columns.Bound(p => p.ModifyBy).Width(150).Visible(false);
  
           })
    .Pageable()
    .Sortable()
    .Scrollable()
  
    .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Row))
          
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            )))
    .HtmlAttributes(new { style = "height:250px;" })
      
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
  
        //.Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.location1code))
  
        .Create(update => update.Action("Level2LocEditingPopup_Create", "Asset"))
            .Read(read => read.Action("Level2LocationEditingPopup_Read", "Location"))
  
  
    )
      
    .Render();
      
    }
<script>
  
    $("#popupGrid").data("kendoGrid").bind("change", onRowSelected);
</script>
 </text>
    )
      
       .Render();
         
         
       }
  
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
      
      
</script>

0
Iliana Nikolova
Telerik team
answered on 19 May 2015, 10:07 AM

Hi Ajith,

It is accepted to post different questions in separate threads - this will make tracking / handling your support history much easier. As this question is not related to the initial one in this thread I would like to ask you to open a new support conversation for it. Thank you in advance for your understanding and cooperation.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Erik
Top achievements
Rank 2
answered on 13 Sep 2015, 01:33 PM

Hello all,

 

All this did not work for me, because of late binding I guess.

I think that the .on() event description gets lost after refresh.

I subscribed in the grid dataBound event like this:

dataBound: function (e) {
    this.table.on("dblclick", " tbody > tr", gridRowDblClick);
}

This will call 'gridRowDblClick' when double clicking. (you need jQuery)

 

Regards,

Erik

0
Bob
Top achievements
Rank 1
answered on 13 Dec 2016, 01:09 AM

I know this is an old post, but it is the most recent I've found.

It appears this will also fire when you double-click on the footer. (Aggregates)

I can easily ignore if a row isn't actually selected, but if a row is selected double-clicking the footer will return the selected row.

How can I exclude the footer? 

0
Dimiter Topalov
Telerik team
answered on 16 Dec 2016, 06:53 AM
Hello Bob,

If the event is attached to the Grid's tbody, the footer will not be affected. If you want to further exclude the group footers as well, you can add additional logic for the '.k-group-footer' elements in the event handler, e.g.:

http://dojo.telerik.com/IfubOH

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Dr.YSG
Top achievements
Rank 2
Answers by
GungFooMon
Top achievements
Rank 1
Dr.YSG
Top achievements
Rank 2
Iliana Nikolova
Telerik team
Apostolos
Top achievements
Rank 1
Saul
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
ajith
Top achievements
Rank 1
Erik
Top achievements
Rank 2
Bob
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or