Question

I have have got a MVC 3 Project where I use a Kendo UI Grid quite a lot.

A typical View looks like this:

@using Kendo.Mvc.UI
@model List<ActionViewModel>
@(Html.Kendo().Grid<ActionViewModel>()
.Name("#grid")    
.Columns(columns =>
    {
        columns.Bound(p => p.Name);
        columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create().Text(Resources.Grid.Create))
.Editable(editable => editable.Mode(GridEditMode.PopUp)))
.Sortable()
.Scrollable()
.Filterable(f=>f.Extra(true))
.DataSource(dataSource => dataSource        
    .Ajax() 
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.Id))
    .Create(update => update.Action("Create", "Action"))
    .Read(read => read.Action("Read", "Action"))
    .Update(update => update.Action("Update", "Action"))
    .Destroy(update => update.Action("Delete", "Action"))
))

I often have to define custom editor templates for my viewmodels, these are used in Kendo UI’s edit popup.

In a Kendo UI Grid it is possible to create, update, and delete elements. The popup for edit and create uses the same editor template by default. Is there a simple way to have two separate editor templates for edit and delete?

Answer 1

UPDATE:

To prevent unnecessary downvotes for a 4-year-old answer, I am including the question @ataravati provided in the comments below. Go here for a better and more modern answer: Kendo UI grid – different templates for Edit and Create

OLD ANSWER:

This isn’t a C# answer, but it is relevant. I use the JavaScript API and managed to figure out a way to differentiate between “Add” and “Edit”, and have the popup editor react differently for each. My reasoning was that when Adding a new entry, all fields would be editable, but when Editing an existing entry, I needed to make some fields read-only.

In a nutshell, I add a jQuery click listener for the toolbar buttons and use a set of if statements to determine whether the clicked button has a class of k-grid-edit or k-grid-add (or custom classes if I’m using custom-defined toolbar buttons in my Grid widget). Then, I store the action type (“Add” or “Edit”) in a data-attribute on the parent Grid:

$("#grid").data("action","add");

…which I then read within the custom popup editor template to determine whether certain fields should be read-only or not:

if ($("#grid").data("action") === "add") { /*Do stuff*/ }

I also use this method to hide or show toolbar buttons depending upon the situation (for example, in Inline Editor mode, The Save and Cancel buttons should only be visible while a row is in Edit Mode, so when the user selects a row in the Grid and clicks the Edit button, the hidden-by-default Save and Cancel buttons are shown, and the other buttons are hidden. Once the Edit action is completed and the user clicks on Save or Cancel, then the buttons switch back to their initial states).

For more explicit information, here’s my Kendo UI forum thread on the topic:

http://www.kendoui.com/forums/ui/grid/kendo-grid—how-to-have-different-custom-editor-for-update-and-create.aspx

I posted some sample code, and another user named Philipp came up with a different solution that arrives at the same end result and posted his code as well.

So, to answer your question:

No. There is no simple way. The functionality is not currently included in the Kendo UI framework. It is, however, still possible with a bit of extra elbow grease. Or caffeine. 🙂

I hope this is helpful.