Tree grid add buttons into columns

[Alexandros Christou]

Hello,

I am trying to add buttons into columns using the tree grid and controlling it on the server side, but I cannot seem to find a way without using Javascript.

I just need a normal 'Select' button on the final row that once clicked it takes the user to a new page with the selected rows data.

[Manivannan Padmanaban]

Hi Alexandros, 

Greetings from Syncfusion Support. 

We recommend that you use our custom commands feature to meet your needs. We called the server end approach using ajax post in the custom command button click and request you to perform your own action. Please see the code example and server end screenshot below. 

 

@{ 

    List<object> commands = new List<object>(); 

    commands.Add(new { type = "taskstatus", buttonOption = new { content = "Details", cssClass = "e-flat e-details" } }); // custom commands 

} 

  

<script> 

    function onLoad() { 

        this.columns[3].commands[0].buttonOption.click = function (args) {     //click event for custom command button, here command is the 3^rd column use index value as per your columns order 

            var treegrid = document.getElementById('TreeGrid').ej2_instances[0];  // create treegrid instance using tree grid id 

            var rowObj = treegrid.grid.getRowObjectFromUID(ej.base.closest(args.target, '.e-row').getAttribute('data-uid')); 

            let ajax = new ej.base.Ajax(); 

            ajax.type = "POST" 

            ajax.url = "Home/MyTestMethod" 

            ajax.data = JSON.stringify({ value: rowObj.data }); // pass the data to server end 

            ajax.send(); 

        } 

    } 

</script> 

  

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" idMapping="TaskId" parentIdMapping='ParentId' allowPaging="true" childMapping="Children" load="onLoad" treeColumnIndex="1"> 

    <e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings> 

    <e-treegrid-columns> 

………………………………….. 

        <e-treegrid-column headerText="Manage Records" width="120" commands=commands></e-treegrid-column> 

    </e-treegrid-columns> 

</ejs-treegrid> 

 

 

// controller page 

 

public void MyTestMethod([FromBody]CRUDModel value)      {          // do your stuff here      }

 

Grid UI 

 

Note: We can't call the server end method unless we use JavaScript code. If you do not want to use JavaScript, we recommend that you use our Blazor components. Please see the links below, 

https://blazor.syncfusion.com/demos/tree-grid/default-functionalities?theme=bootstrap4 

https://blazor.syncfusion.com/documentation/treegrid/edit/#custom-command 

Regards, 

Manivannan Padmanaban