How to change edit mode(pop-up+inline) dynamically

Question

I am using mvc4 application .On one of my page i am using kendo grid.I want to add two buttons for editing, one is used for editing in pop-up and other for inline editing.

I want to change the grid edit mode dynamically on click of button.

Can any one help me out ?

Answer 1

If you want to change dynamically the edit mode for all rows in a Grid you can do:

Button and Grid definition:

<a href="#" id="popup" class="k-button">Popup</a>
<a href="#" id="inline" class="k-button">Inline</a>
<div id="grid"></div>

Grid initialization:

var grid = kendoGrid({
    dataSource: dataSource,
    columns: [
        { command: ["edit", "destroy"], title: " " },
        { field: "field1", title: "Field1" },
        { field: "field2", title: "Field2" },
    ],
    editable  : "popup"
}).data("kendoGrid");

Buttons initialization:

$("#popup").on("click", function () {
    grid.options.editable = "popup";
});
$("#inline").on("click", function () {
    grid.options.editable = "inline";
});

When you click on either of these buttons, you select the edit mode as inline or popup.

Answer 2

You cannot have two editing modes at a time.

As a work-around you can use the InLine editing + template column with a button inside which on click opens a window.

You can set the content of the window to be a template and bind it with the dataItem for that row when the buttons is clicked.