Grid Row DoubleClick (or keypress)

[Dr.YSG]

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?

[GungFooMon]

Doesn't sound too bad..
but why not assign the handler in a single call?

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

Regards!

[Dr.YSG]

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.

[Iliana Dyankova]

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

[Dr.YSG]

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;

    }

});

[Apostolos]

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 ? 

[Saul]

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 

[Iliana Dyankova]

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

[Garry]

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?

[Iliana Dyankova]

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

 

 

[Garry]

Thanks you Iliana
Now KendoUI customers have some actual working code allowing them to get at the data row.

Kind Regards, Garry.

[ajith]

Hi all,

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

[Iliana Dyankova]

Hi Ajith,

The following code snippet should help to achieve the expected result: 

$("#grid").on("dblclick", " tbody > tr > td", function () {
   //....
});

Regards,
Iliana Nikolova
Telerik

 

 

[ajith]

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? 

 

[Iliana Dyankova]

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

 

 

[ajith]

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>

[Iliana Dyankova]

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

 

 

[Erik]

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

[Bob]

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? 

[Dimiter Topalov]

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