Different formatting for different grids

Question

CSS is not a strong suit for me so I'm not sure how to change the code from here. I have multiple grids on a page and I would like to style them differently. I have read

https://ej2.syncfusion.com/vue/documentation/grid/style-and-appearance/

but when I change a style it affects all of my grids. How can I use the grid id to only change that one?

Also is it possible to center the text on the header but left align in the cell?

Thanks for your help

Joseph Christ Nithin Issack · Answer

Hi William, 

  Greetings from Syncfusion support. 

  Based o your query you are having multiple grids on the same page, you want to style them differently. You can achieve this requirement by adding the respected id of the grid when defining the css class. 

Please refer the below code example. 





 
  #grid1.e-grid tbody { 
    background-color: lightyellow; 
  } 
  #grid1.e-grid .e-gridheader th { 
    background-color: lightblue; 
  } 
  #grid2.e-grid tbody { 
    background-color: lightcyan; 
  } 
  #grid2.e-grid .e-gridheader th { 
    background-color: lightpink; 
  } 



Sample: https://codesandbox.io/s/vue-template-forked-6kx41?file=/src/App.vue 

Please find the attached sample and revert for more queries. 

Regards, 
Joseph I.

William Morgenweck · Answer

Thank you very much-- I was having trouble with a grid that was on an injected page. The only other area is

Is it possible to center the text on the header but left align in the cell?

I've tried

text-align: center; in the css but that does not seem to work

Thank

Joseph Christ Nithin Issack · Answer

Hi William,

Thanks for the update.

Based on your query you want to align the header text in your grid to the center. Your requirement can be achieved using the `column.headerTextAlign` property of the EJ2 grid.

Please refer the below code example.

<e-column field="OrderID"

headerText="ID"

width="180"

isPrimaryKey="true"

headerTextAlign="center"></e-column>

Sample: https://codesandbox.io/s/vue-template-forked-dqeuq?file=/src/App.vue

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/column/#headertextalign

Please find the attached sample and revert for more queries.

Regards,

Joseph I.