Javascript Open Kendo UI Grid Editor Manually with Custom Button

Question

Is there a way to force open the Editor that Kendo UI Grid uses?? What I mean by force opening it is that I have a grid, it can add, create and delete rows, but this is done using the in-built buttons of the Kendo grid when I initialize it.

Is there a way or a function where I can call that opens the editor so I can attach it onto my custom made button??

Here's the code I have to create the grid. (Please note I took out the edit because I don't want single row editing)

$("#userTable").kendoGrid({
        dataSource:{
            data: this.myCollection,
            schema: {
                model:{
                    fields:{
                        UserId: {type: "number"},
                        Firstname: {type: "string"},
                        Surname: {type: "string"},
                        Team: {type: "string"}
                    }
                }
            },
            pageSize: 5
        },
        change: this.OnChange,
        selectable: "multiple",
        pageable: true,
        editable: "popup",
        toolbar: ["create"],
        messages:{
            commands:{
                create: "Create"
            }
        },
        columns:[
            {field: "UserId", title: "User Id"},
            {field: "Firstname", title: "Firstname"},
            {field: "Surname", title: "Surname"},
            {field: "Team", title: "Team"}
    });

Any help or advice on this would be greatly appreciated.

Thanks,

Answer 1

using Custom command and editRow method

...
command: { text: "Edit", click: customEdit }
...

function customEdit(e) {
   e.preventDefault();
   this.editRow($(e.currentTarget).closest("tr"));
}

Demo

Answer 2

$("#btn").on("click", function() { 
var grid  = $("#userTable").data("kendoGrid");
grid.editRow(grid.select()); })

Above will let you edit the selected grid row programmatically