2012-08-24 33 views
5

我已經有了一個MVC 3項目,我使用Kendo UI Grid非常多。是否有可能爲同一個Kendo UI Grid使用不同的編輯器模板?

的典型視圖看起來是這樣的:

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

我經常要定義自定義編輯模板,我的ViewModels,這些在劍道UI的編輯彈出使用。

在Kendo UI Grid中,可以創建,更新和刪除元素。編輯和創建的彈出窗口默認使用相同的編輯器模板。有沒有一種簡單的方法來編輯和刪除兩個單獨的編輯器模板?

回答

7

UPDATE

爲了避免不必要的downvotes一個4歲的回答,我包括在下面的意見提供的問題@ataravati。去這裏的一個更好的,更現代化的答案:Kendo UI grid - different templates for Edit and Create

OLD答案

這不是一個C#的答案,但它是相關的。我使用JavaScript API並設法找出區分「添加」和「編輯」的方法,並讓彈出編輯器對每個方法作出不同的反應。我的推理是,當添加一個新條目時,所有字段都是可編輯的,但是在編輯現有條目時,我需要將某些字段設置爲只讀。

概括地說,我添加一個jQuery的點擊監聽器的工具欄按鈕,並使用一組if語句,以確定點擊的按鈕是否具有類k-grid-editk-grid-add(或定製類的,如果我使用自定義的我的Grid小部件中的工具欄按鈕)。然後,我存儲的動作類型的數據屬性(「添加」或「編輯」)父網格:

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

...然後我的自定義彈出編輯模板中讀取,以確定是否某些領域應該或不只讀:

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

我也用這個方法來隱藏或者顯示工具欄按鈕根據情況(例如,行內編輯器模式下,保存和取消按鈕應只有在行處於編輯模式時纔可見,所以當用戶選擇Grid中的一行時點擊編輯按鈕,顯示隱藏的默認保存和取消按鈕,其他按鈕被隱藏。編輯操作完成後,用戶單擊保存或取消,然後按鈕切換回初始狀態)。

更多明確的信息,這裏的話題我的劍道UI論壇主題:

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

我張貼一些示例代碼,並命名爲菲利普其他用戶提出了不同的解決方案,到達相同最終結果併發布他的代碼。

因此,要回答你的問題:

號有沒有簡單的方法。 Kendo UI框架目前沒有包含該功能。但是,仍然有可能帶有一些額外的手肘潤滑脂。或咖啡因。 :)

我希望這是有幫助的。

+0

謝謝!不是我希望的答案,但至少我得到了一個答案:) – Marius

+3

如果你再次查看論壇帖子,已經發布了兩個更簡單的(再次使用JavaScript,對不起)答案,利用關於內部工作的知識網格小部件。它涉及找到包含所選行的ID的變量,該行通過事件鏈傳遞。如果它爲空或空白,那麼它是一個插入(添加),如果不是,那麼它是一個更新(編輯)。 http://www.kendoui.c​​om/forums/ui/grid/kendo-grid---how-to-have-different-custom-editor-for-update-and-create.aspx#2325121 – Adrian

+0

這裏是正確的解決方案:http://stackoverflow.com/questions/14321396/kendo-ui-grid-different-templates-for-edit-and-create – ataravati

相關問題