Grid Row DoubleClick (or keypress)

18 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 27 Jun 2012 Link to this post

    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?

  2. GungFooMon
    GungFooMon avatar
    17 posts
    Member since:
    Apr 2012

    Posted 28 Jun 2012 Link to this post

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

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

    Regards!
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 28 Jun 2012 Link to this post

    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.

  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 02 Jul 2012 Link to this post

    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!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 04 Jul 2012 Link to this post

    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;
        }
    });
  7. Apostolos
    Apostolos avatar
    3 posts
    Member since:
    Feb 2013

    Posted 12 Mar 2013 Link to this post

    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 ? 

  8. Saul
    Saul avatar
    8 posts
    Member since:
    Jan 2014

    Posted 11 Feb 2014 Link to this post

    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 
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 14 Feb 2014 Link to this post

    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!
  10. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 20 May 2014 in reply to Iliana Nikolova Link to this post

    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?
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 23 May 2014 Link to this post

    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!
     
  12. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 23 May 2014 in reply to Iliana Nikolova Link to this post

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

    Kind Regards, Garry.
  13. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 30 Apr 2015 in reply to Iliana Nikolova Link to this post

    Hi all,

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

  14. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 05 May 2015 Link to this post

    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!
     
  15. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 12 May 2015 in reply to Iliana Nikolova Link to this post

    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? 

     

  16. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 15 May 2015 Link to this post

    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!
     
  17. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 17 May 2015 in reply to Iliana Nikolova Link to this post

    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>

  18. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 19 May 2015 Link to this post

    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!
     
  19. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 13 Sep 2015 Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready