KendoUI open grid editor on double-click


Sometimes (many) you don’t want to use screen space creating a button for something that you can do with click, pinch, swipe… So, why do not use double click for opening a popup editor for grid entries?

KendoUI open grid editor with double-click

Lets assume that this is the definition of our grid.

var grid = $("#stocks_tbl").kendoGrid({
    dataSource:{
        data:[
            { name:"Apple", symbol:"AAPL" },
            { name:"Amazon", symbol:"AMZN" },
            { name:"Google", symbol:"GOOG" }
        ]
    },
    editable  :"popup",
    columns   :[
        { field:"name", title:"Name" },
        { field:"symbol", title:"Tick" }
    ]
}).data("kendoGrid");

We have to bind a function to double click event on grid rows.

grid.element.delegate("tbody>tr", "dblclick", function () {
    // code to open / enter in editor mode
});

For editing a row (either if it is popup or inline) I need to invoke editRow in the grid with the row to edit as argument. This is simply done as:

grid.element.delegate("tbody>tr", "dblclick", function () {
    grid.editRow($(this));
});

And that’s all. This time it has been pretty simple and fast and it is not required to deep knowledge in JavaScript nor in KendoUI.

Advertisements

One thought on “KendoUI open grid editor on double-click

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s