在線編輯劍道mvc剃鬚刀網格，如何通過下拉發送額外的獨特參數EditorFor模板，同時調用動作方法

Question

我正在使用劍道mvc剃鬚刀網格。

版本：2015.1.408.545。

我正在提供內聯編輯。 在這裏它們是有一個下拉列，它通過編輯器爲這樣的模板綁定。

@(Html.Kendo().DropDownList() 
      .Name("ParentGraphicsCategoryID").HtmlAttributes(new { @style = "font-size:12px", id = "ParentGraphicsCategoryID" }) 
      .DataTextField("Text") 
      .OptionLabel("- Select Parent Graphic Category - ") 
      .DataValueField("Value") 
      .DataSource(source => 
      { 
       source.Read(read => 
       { 
        read.Action("GetGraphicCategories", "CommonLookUp"); 
       }); 
      })) 

的問題是：如何通過類似ID的附加參數，它是唯一的每一行，當調用上面的代碼「GetGraphicCategories」的操作方法？

通過以下鏈接：http://www.telerik.com/forums/pass-grid-view-model-data-to-editor-template

@(Html.Kendo().DropDownList() 
       .Name("ParentGraphicsCategoryID").HtmlAttributes(new { @style = "font-size:12px", id = "ParentGraphicsCategoryID" }) 
       .DataTextField("Text") 
       .OptionLabel("- Select Parent Graphic Category - ") 
       .DataValueField("Value") 
       .DataSource(source => 
       { 
        source.Read(read => 
        { 
         read.Action("GetGraphicCategories", "CommonLookUp").Data("getParentID()"); 
        }); 
       })) 

function getParentID() { 
    var row = $(event.srcElement).closest("tr"); 
    var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid"); 
    var dataItem = grid.dataItem(row); 
    //where the OrderID is the model ID 
    return { statusId: dataItem.StatusId } } 

它在上述網址的代碼suggeted。但在調用「Data」方法中的「getParentID（）」時無法獲取行值，因爲它是通過模板的下拉編輯器調用的。所以網格變量值爲null。

代碼創建網格低於：

@(Html.Kendo().Grid<GraphicsCategoryModel>() 
    .Name("GraphicsCategory") 
    .Columns(columns => 
    { 
     columns.Bound(a => a.GraphicsCategoryName).Title("Graphics Category Name").Width(150); 
     columns.Bound(a => a.ParentGraphicsCategoryName).EditorTemplateName("ParentGraphicCategoryList").Title("Parent Graphics Category Name").Width(150); 
     columns.Command(command => { command.Edit(); }).Title("Actions").Width(70); 
    }) 
    .ToolBar(toolbar => toolbar.Create()) 
    .Editable(editable => editable.Mode(GridEditMode.InLine)) 
    .Pageable(pageable => pageable.Enabled(true)) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(10) 
     .Events(events => { events.Error("error_handler"); }) 
     .ServerOperation(true) 
     .Model(model => 
     { 
      model.Id(p => p.GraphicsCategoryID); 
      model.Field(p => p.GraphicsCategoryID).Editable(false); 
     }) 
     .Create(update => update.Action("InsertOrUpdateGraphicsCategory", "GraphicsCategories")) 
     .Update(update => update.Action("InsertOrUpdateGraphicsCategory", "GraphicsCategories")) 
     .Destroy(update => update.Action("DeleteAdminAreaOwnership", "AdminAreaOwnership")) 
     .Read(read => { read.Action("GetAllGraphicsCategories", "GraphicsCategories"); read.Type(HttpVerbs.Get); }) 
      ).Events(p => p.DataBound("generalColumnBound"))) 

Answer 1

的原因而無法獲得行和電網getParentID（）是因爲你使用內聯編輯模式。

在InLine編輯模式下，event.srcElement是Edit按鈕。但是，當您點擊按鈕進入編輯模式時，kendo會從DOM中刪除「編輯」按鈕。因此，當你進入getParentID（）時，按鈕消失，$（event.srcElement）不能再返回按鈕，所以你不能使用任何.closest（）元素來查找行和網格。

它在你的鏈接例子的原因是因爲他們使用盒內編輯模式，event.srcElement將DropDownList中仍處於內部getParentID（）和.closest（）將工作的DOM等

一個簡單的解決方案就是使用InCell編輯功能，您的當前技術應該可以工作。假設你不希望這樣，但...

你可以嘗試改變getParentID（），使得它與網格（而不是用的DropDownList/EditorTemplate）定義和實現它想：

function getParentID() { 
    var grid = $("#GraphicsCategory").getKendoGrid(); 
    var row = $("#GraphicsCategory").find("tr.k-grid-edit-row"); 
    var dataItem = grid.dataItem(row); 

    return ... 
} 

這依賴於知道您正在使用哪個特定的網格（這就是爲什麼需要使用網格定義的原因），然後根據kendo應用於當前網格的k-grid-edit-row類找到正在編輯的行當它把它放入編輯模式時，它會被放置。

還有其他的方法可以做到更通用（不需要getParentID（）特定於每個網格），但它們涉及使用更多的JavaScript來爲列指定自定義編輯器而不是MVC/Razor EditorTemplate我不確定你是否想走上這條路。