Grid Table Body and Head Massive Customization

Question

Hi,Question 1. -I wanted to try to customize the grid in a manner is follows a certain design.It was possible to achieve it without Syncfusion's, but is it virtually possible to do it like this design?  Or will it be virtually impossible / not recommended? as I was trying some changes, some were undetected/ignored and some came out to be confusing.Note, the modification I've been making in the Style.css, the general class to override the grid's design, cause the The "ejs-grids" component's Scss's class wasn't being taken into consideration.Question 2. - How to hide the freeze columns lines and change their color? Attachment: datatable_e13ce6c.rar

Joseph Christ Nithin Issack · Accepted Answer

Hi Adam, 

  Greetings from Syncfusion support. 

 Query 1: I wanted to try to customize the grid in a manner is follows a certain design. It was possible to achieve it without Syncfusion's, but is it virtually possible to do it like this design? 

  Based on your requirement, you want to display the values of a column in a certain design. Your requirement can be achieved using the `columnTemplate` and the `commandColumn` feature of the EJ2 Grid. Please find the below documentations for more details. 

Documentations: 

Column Template -https://ej2.syncfusion.com/angular/documentation/grid/columns/column-template/
Command Column- https://ej2.syncfusion.com/angular/documentation/grid/editing/command-column-editing/

Also Please refer the below samples where we have demonstrated the `columnTemplate` and the `commandColumn` features. 

Samples: 


https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/over-view
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/command-column

Query 2: How to hide the freeze columns lines and change their color? 

   Your requirement can be achieved by customizing the lines by using the CSS styles. You can hide the freeze column lines by using the below CSS. 





.e-grid .e-frozenhdrcont .e-frozenheader > .e-table, 
.e-grid .e-frozenhdrcont .e-movableheader > .e-table, 
.e-grid .e-frozencontent > .e-table { 
  border-bottom-width: 0px; 
  border-right-width: 0px; 
} 


And you can change the color of the freeze column lines by using the below CSS. 





.e-grid .e-frozenhdrcont .e-frozenheader > .e-table, 
.e-grid .e-frozenhdrcont .e-movableheader > .e-table, 
.e-grid .e-frozencontent > .e-table { 
  border-bottom-color: blue; 
  border-right-color: blue; 
} 


Sample: https://stackblitz.com/edit/angular-mgeye2?file=app.component.css 

Please get back to us for further details. 

Regards, 
Joseph I.

Adam Zaghouani · Answer

I see, clear enough.Thank you... IMMENSLY! Really!

Balaji Sekar · Answer

Hi Adam, 

Thanks for your update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 
Balaji Sekar.