open the Treeview by clicking a button on grid Devextreme

Question

How can I get the data of the row where I click the button? I added a picture to make it more clear what I ve meant.

this is the code for adding datafields to gridtable

   @(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");
})

also some script to retrieve the data..

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);
}

score 0 · Accepted Answer · answered May 11 '17 at 13:38

There are two possible ways to pass row data to a button click handler.

1. Implement a cell template as js function:

@(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. Change context of button click handler:

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

Read more information about implementing templates in this article.

open the Treeview by clicking a button on grid Devextreme

1 Answers1