그리드의 버튼을 클릭하여 Treeview를 엽니 다. Devextreme

Question

버튼을 클릭 한 행의 데이터는 어떻게 얻을 수 있습니까? 나는 그것이 내가 의미했던 것을 더 분명하게하기 위해 그림을 추가했다.

이

는 버튼 클릭 핸들러에 행 데이터를 전달하는 두 가지 방법이 있습니다

function btnclick(data) { 
    console.log('btnclick(data)'); 
    console.log(data); 

    var treeViewInstance = $('#RolesTreeView').dxTreeView('instance'); 
    //var itemElement = treeViewInstance.element().find("[data-item-id='" + args.itemData.RoleId + "'] > .dx-treeview-item").get(0); 
    var itemElement = treeViewInstance.element().find("[data-item-id='10'] > .dx-treeview-item").get(0); 
    treeViewInstance.expandItem(itemElement); 
    treeViewInstance.selectItem(itemElement); 
} 

Answer 1

데이터를 검색 할 수도

@(Html.DevExtreme().DataGrid() 
    .ID("RoleGroupTable") 
    .DataSource(d => d.WebApi().Controller("UserRoleManagementApi").Key("RoleGroupId") 
    .LoadAction("Get") 
    .InsertAction("Post") 
    .UpdateAction("Put") 
    .DeleteAction("Delete")) 

.Columns(c => 
{ 
      c.Add().DataField("TreeView").CellTemplate(@<text> 
    @(Html.DevExtreme().Button().Text("Clickme").Icon("airplane").OnClick("btnclick").ID("expandtreeview")) </text>); 

    c.Add().DataField("RoleGroupId"); /* CellTemplate("<input class=button1 type=button value=click me ng-click=test()>");*/ 
    c.Add().DataField("Name"); 
    c.Add().DataField("Description"); 
    c.Add().DataField("InsertionDate").DataType(GridColumnDataType.Date); 
    c.Add().DataField("InsertedUserId"); 
    c.Add().DataField("UpdatedDate").DataType(GridColumnDataType.Date); 
    c.Add().DataField("UpdatedUserId"); 
}) 

일부 스크립트를 gridtable하는 datafields를 추가하는 코드 ..입니다 .

@(Html.DevExtreme().DataGrid() 
    //... 
    .Columns(c => { 
     c.Add().DataField("CompanyName").CellTemplate(@<text> 
      @(Html.DevExtreme() 
       .Button() 
       .Text("Click me") 
       .OnClick("onButtonClick.bind(this, arguments[0])")) 
     </text>); 
     //... 
    }) 
) 

<script> 
    function onButtonClick(cellInfo, evt) { 
     //use the cellInfo argument here 
    } 
</script> 

이 article에서 템플릿을 구현하는 방법에 대한 자세한 내용을 읽어 버튼을 클릭 핸들러의

@(Html.DevExtreme().DataGrid() 
    //... 
    .Columns(c => { 
     c.Add().DataField("CompanyName").CellTemplate(new JS("cellTemplate")); 
     //... 
    } 
) 

<script> 
    function onButtonClick(cellInfo, evt) { 
     //use the cellInfo argument here 
    } 

    function cellTemplate(cellElement, cellInfo) { 
     cellElement.append(
      $("<div>").dxButton({ 
       text: "click me", 
       onClick: onButtonClick.bind(this, cellInfo) 
      }) 
     ); 
    } 
</script> 

2. 변경 컨텍스트 :

1.

은 JS 함수와 셀 템플릿을 구현 .