Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to have different editor templates for the same Kendo UI Grid?

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?

like image 591
Marius Avatar asked Aug 24 '12 12:08

Marius


People also ask

What is client template in kendo grid?

Define the client template using Kendo UI Template syntax. The context of the template is the Category entity to which the current Grid row is bound. The template itself contains another Grid which is bound to the Products_Read action.

How do I make my Kendo grid editable?

editable Boolean|Object|String (default: false) If set to true the user would be able to edit the data to which the grid is bound. By default editing is disabled. Can be set to a string ("inline", "incell" or "popup") to specify the editing mode. The default editing mode is "incell".

What is dataItem in kendo grid?

Returns the data item to which the specified table row is bound. The data item is a Kendo UI Model instance.

What is selectable in kendo grid?

selectable Boolean|String|Object (default: false) "row" - the user can select a single row. "cell" - the user can select a single cell. "multiple, row" - the user can select multiple rows. "multiple, cell" - the user can select multiple cells.


1 Answers

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.

like image 140
Adrian Avatar answered Oct 11 '22 17:10

Adrian