kendo mvc 면도칼의 인라인 편집, 드롭 다운을 통해 고유 한 매개 변수를 보내는 방법 Editor 메서드를 호출하는 동안 템플릿

Question

검도 mvc 면도칼을 사용하고 있습니다.

버전 : 2015.1408.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"); 
       }); 
      })) 

문제는 어떻게 위의 코드에서 "GetGraphicCategories"액션 메소드를 호출하는 동안, 모든 행에 대해 고유 ID와 같은 추가 매개 변수를 전달하는 데? 이 링크를 따라

: http://www.telerik.com/forums/pass-grid-view-model-data-to-editor-template 그것은 위의 URL의 코드에 suggeted됩니다

@(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 } } 

. 그러나 템플릿에 대한 드롭 다운 편집기를 통해 호출되므로 "데이터"메서드에서 "getParentID()"를 호출하는 동안 행 값을 가져올 수 없습니다 .Hen Grid 변수 값은 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에서 행과 격자를 얻을 수없는 이유는)입니다.

인라인 편집 모드에서 event.srcElement는 편집 버튼입니다. 그러나 단추를 클릭하여 편집 모드로 들어가면 kendo가 DOM에서 편집 단추를 제거합니다. 결과적으로 getParentID() 안에있을 때까지 버튼이 사라지고 $ (event.srcElement)가 더 이상 버튼을 반환 할 수 없으므로 .closest() 요소를 사용하여 해당 버튼을 찾을 수 없습니다. 행과 그리드. event.srcElement를가 getParentID()와() .closest이 작동 내부의 DOM 여전히 드롭 다운리스트 등을 할 위치가 InCell 편집 모드를 사용하고 있기 때문에

가 연결된 예에서 작동하는 이유는

간단한 해결책은 현재 기술이 작동해야하는 곳에서 InCell 편집을 사용하는 것입니다.

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

    return ... 
} 

: 당신이

당신이 (대신 DropDownList로/EditorTemplate와의) 그리드로 정의되도록) getParentID을 (변경 시도하고 좋아 구현할 수 있습니다 ...하지만 것을 원하지 않는 가정

이것은 을 알고있는 (그리드와 함께 정의해야하는 이유)을 알고 있고, kendo가 현재에 적용하는 k-grid-edit-row 클래스를 기반으로 편집중인 행을 찾습니다 행을 편집 모드로 전환합니다.

좀 더 일반적인 방법으로 각 그리드마다 getParentID()가 필요하지 않지만 MVC/Razor EditorTemplate 대신 더 많은 자바 스크립트를 사용하여 열에 대한 사용자 정의 편집기를 지정하는 방법이 있습니다. 네가 그 길을 가고 싶으면 나는 확신하지 못한다.