How to change select row background color in VUE?

Question

Hello,I am using DataGrid from syncfusion in VUE.I want to change the row background color when it selected in datagrid. when i select row then row color change in VUE. and also when it deselect then back to normal .cssplease share with example.

Praveenkumar Gajendiran · Answer

Hi Shivani,Greetings from Syncfusion support.Query: “I want to change the row background color when it selected in datagrid. when i select row then row color change in VUE. and also when it deselect then back to normal .css”Based on your query, we infer that you want to customize the row background color when it selected in Grid. We suggest you to use below CSS to achieve your requirement. 




.e-grid td.e-active{ 
  background-color: #887f6c; 
} 
We have prepared a sample based on this for your reference. 
 
Sample: https://codesandbox.io/s/272413-getselectedrowsfrom-cell-forked-f1fnt?file=/src/App.vue 
 
Please find the documentation to apply customization in Grid.  
 
Doc : https://ej2.syncfusion.com/vue/documentation/grid/how-to/grid-styling/  
Regards,Praveenkumar G

Shivani · Answer

In your shared example I cannot find an implementation of row backgroud color. Can you please share it again.

Praveenkumar Gajendiran · Answer

Hi Shivani,Sorry for the inconvenience. Please check the below sample for an implementation of row background color when it is selected.Sample: https://codesandbox.io/s/272413-getselectedrowsfrom-cell-forked-f1fnt?file=/src/App.vuePlease check the below screenshots for your reference.When row is selected: 




  
When row is deselected: 





  
Regards,Praveenkumar G

Shivani · Answer

Hello, Sorry for this again, but I cannot see which function you called on row selected?

Praveenkumar Gajendiran · Answer

Hi Shivani,We would like to inform you that we have not called any method to achieve your requirement. By default in EJ2 Grid, the “e-active” class will be added in the td element of the selected row. Based on this we add the background-color style to that class element. The “e-active” class will be removed once you have deselected the row. 

Please find the definition and documentation on Grid’s rowSelected and rowDeselected event below. 


rowSelected- This event triggers When a row is selected.
rowDeselected- This event triggers When a selected row is deselected.

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected                              https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdeselected 
Regards,Praveenkumar G