Kendo grid - How to open popup edit window with JavaScript

Question

I have custom buttons in my Kendo grid defined as

 columns.Template(t => t.id).ClientTemplate(
                       "<button style='margin:2px' type='button' class='btn btn-success btn-xs' data-toggle='tooltip' data-placement='left' title='Izmeni' onclick=\"OpenPopUp()\"><span class='glyphicon glyphicon-edit'></span></button>&nbsp;" +
                       "<button style='margin:2px' type='button' style='margin-left:2px' class='btn btn-danger btn-xs' data-toggle='tooltip' data-placement='left' title='Obrisi' onclick=\"modal_xxx_edit(#: id#, 'delete')\"><span class='glyphicon glyphicon-remove-sign'></span></button></div>").Title("Operacije").HeaderHtmlAttributes(new { style = "text-align:center;  font-weight: bold" }).HtmlAttributes(new { style = "text-align:center;" }).Width(100);

Grid edit mode is defined as PopUp. How to open PopUp window for particular row in the grid with JavaScript?

How about this? demos.telerik.com/aspnet-mvc/grid/custom-command — Stefano Magistri
Do you want the default kendo popup for editing a grid or do you want to have your own popup window? — chiapa

Dion Dirza Dion Dirza · Accepted Answer · 2015-09-03T10:12:14

You can use Grid's method editRow. Try this code below:

button template

<button style='margin:2px' type='button' class='btn btn-success btn-xs' 
    data-toggle='tooltip' data-placement='left' title='Izmeni' 
    onclick=\"OpenPopUp(this);\">
<span class='glyphicon glyphicon-edit'></span></button>&nbsp;

Notice changes at onclick value, you have to pass current element object as parameter to your function using this keyword.

javascript

function OpenPopUp(e) {
    var grid = $("#grid").getKendoGrid(),
        selectedRow = $(e).closest("tr");

    grid.editRow(selectedRow);
}

editRow need grid row element as parameter to know which record is user intend to edit.

sample in Dojo

Kendo grid - How to open popup edit window with JavaScript

1 Answers