グリッド上のボタンをクリックしてツリービューを開くDevextreme

Question

ボタンをクリックした行のデータを取得するにはどうすればよいですか？私は何を意味するのかをより明確にするために写真を追加しました。

これは、データを取得するには、いくつかのスクリプトを

@(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を追加するためのコード..です

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

ボタンクリックハンドラに行データを渡すには2つの方法があります。 。

1. jsの関数としてのセルテンプレートを実装します。ボタンのクリックハンドラの

@(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.変更コンテキスト：

@(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でテンプレートの実装の詳細を読みます。