Different formatting for different grids

[William Morgenweck]

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]

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]

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]

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.