5

Kendo UI Grid をよく使用する MVC 3 プロジェクトがあります。

典型的なビューは次のようになります。

@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"))
))

ビューモデルのカスタム エディター テンプレートを定義する必要があることがよくあります。これらは Kendo UI の編集ポップアップで使用されます。

Kendo UI グリッドでは、要素を作成、更新、および削除できます。edit と create のポップアップは、デフォルトで同じエディター テンプレートを使用します。編集用と削除用に 2 つの個別のエディター テンプレートを用意する簡単な方法はありますか?

4

1 に答える 1

8

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.

于 2012-10-03T19:15:39.477 に答える