How to execute a command on selectedRow in Kendo UI grid?

Question

I'm using code below to insert a new record at the beginning of the DataSource

dataSource.insert(0, data);

Once the record inserted into dataSource, I need to execute edit command. How can I do that?

I think the scenario is something like below:

1. Get the selected row
2. Execute edit command on it

Note, I don't want to have a edit column/button in every row.

Answer 1

You can try with the below code snippet.

<div id="grid">
</div>
<input type="button" value="set selected row in edit mode" onclick="setEditMode();" />
<script>
    var dataSource = new kendo.data.DataSource({
        data: [
            { Name: "Lisa", Value: 1 },
            { Name: "Dan", Value: 12 },
            { Name: "Ken", Value: 5 },
            { Name: "Arthur", Value: 15 }, 
        ],
        schema: {
            model: {
                fields: {
                    Name: { type: "string" },
                    Value: { type: "number" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        dataBound: function (e) {
        },
        editable: "inline",
        selectable: "single",
        columns: [
            { field: "Name" },
            { field: "Value" }
        ],
        sortable: true
    });
    //by using below code you can convert selected row into edit mode
    function setEditMode() {
        var grid = $('#grid').data('kendoGrid');
        grid.editRow(grid.select());
    }
</script>

Let me know if any concern.