How can I dynamically change the iconCss of a command?

[Adnan Hussain]

Hi,

I have a Data Grid with a Command column.

I would like to change one of my button's iconCss based on the value of a field in my dataSource.

Is this possible? If yes, please provide an example, thanks.

[Sujith Kumar Rajkumar]

Hi Adnan, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement of dynamically setting the icon content of a custom command button by adding the icon class to the button’s icon element(by checking your condition) and defining the corresponding icon content style to this class. 

 

This can be done in the Grid’s rowDataBound event(triggers before appending each row) as demonstrated in the below code snippet, 

 

// Grid’s rowDataBound event handler 

onRowDataBound: function(args) { 

    // Retrieves the command buttons element from the current row 

    var commandEle = args.row.querySelector('.e-unboundcell'); 

    // Retrieves the required command button(based on its title content) from the command buttons element 

    var commandButtonEle = commandEle.querySelector('[title="Details"]'); 

    // Retrieves the icon element of the retrieved command button 

    var iconEle = commandButtonEle.querySelector('.e-icons'); 

    // Custom icon class is added to this icon element based on row data 

    if (args.data["Freight"] > 25) { 

        iconEle.classList.add('custom-more'); 

    } else { 

        iconEle.classList.add('custom-less'); 

    } 

} 

 

Then the icon content is defined for this class. Here we have used the icons from the Syncfusion icon library and you can use the same or required icon content in its place. 

 

<style> 

.custom-less:before{ 

    content:'\e304'; 

} 

 

.custom-more:before{ 

    content:'\e306'; 

} 

</style> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168994/ze/GridWithCommandButton-1055392559 

 

Syncfusion icons documentation: https://ej2.syncfusion.com/vue/documentation/appearance/icons/#available-icons 

 

API: https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdatabound 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Adnan Hussain]

That's great, just what I needed.

Thank you

[Sujith Kumar Rajkumar]

Hi Adnan, 

 

You’re welcome. We are glad to hear that your query has been resolved. 

 

Regards, 

Sujith R