Add different command buttons based on row data

[Nathan]

Hi,

I've been trying to figure out a way to add specific command buttons to my grid based on data in each row.

For example lets say I have an column with a true/false value, the functionality I want is that if the value is true, show command button A in the commands column, but if the value is false show command button B.

This only needs to be populated on load of the grid, nothing needs to change dynamically after the load.

Is this functionality possible?

Cheers,

Nathan

[Venkatesh Ayothi Raman]

Hi Nathan, 

Thanks for using Syncfusion products. 

We have achieved your requirement using RowDataBound event in Grid. In this event we can access every row and data. Please refer to the following code example, 

[Command buttons] 

@{ 

 

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

 

    commands.Add(new { type = "CustomA", buttonOption = new {  content="A" } }); 

    commands.Add(new { type = "CustomB", buttonOption = new { content = "B" } }); 

     

} 

 

[Grid] 

@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

 

    . .   .    col.Field("Verified").HeaderText("Verified").DisplayAsCheckBox(true).EditType("booleanedit").Width("50").Add(); 

    col.HeaderText("Manage Records").Width("160").Commands(commands).Add(); 

 

}).AllowPaging().RowDataBound("rowDataBound").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Render() 

    

[RowDataBound event] 

 <script> 

 

        function rowDataBound(args) { 

            //check the condition  

            if (args.data.Verified) 

                args.row.querySelector('[title="B"]').classList.add('e-hide') 

            else 

                args.row.querySelector('[title="A"]').classList.add('e-hide') 

        } 

    </script> 

We have rendered the two commands buttons initially and we have hide or show corresponding button based on the row value. Please refer to the following screenshot, 

 

We have also prepared a sample for your convenience which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F138511-2021843171 

Help documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#command-column 

https://ej2.syncfusion.com/documentation/grid/api-grid.html#rowdatabound 

Regards, 

Venkatesh Ayothiraman. 

[Nathan]

Thankyou for the help, this solution should serve my purposes. 

Ideally it would be good to render only the required buttons rather than hiding extra ones. Is that possible?

If it's not supported that's fine, hiding buttons will also work in my current situation.

Kind Regards,

Nathan

[Venkatesh Ayothi Raman]

Hi Nathan, 

 

Thanks for the feedback. 

 

We are very happy to hear your requirement is achieved. Also, we can’t populate the dynamical command button since if we rendered another button by updating the columns model based on the field value then it will replace the whole command column button. So, you can use the solution which is provided by us in the previous update. 

Please let us know if you have any further assistance on this. 

 

Regards, 

Venkatesh Ayothiraman.