Style FlexGrid

Style FlexGrid

Posted by: mark.goldin on 30 November 2019, 4:40 pm EST

• 

  mark.goldin

  • Post Options:
  • Link
    Copy

  Posted 30 November 2019, 4:40 pm EST

  I want to style header and remove all borders. How do I do that?

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 December 2019, 12:16 am EST

  Hi Mark,

  To remove the borders, simply set the border CSS property to none:

  .wj-cell:not(.wj-header) {
  	border: none !important;
  }
  

  Please refer to the sample link below:

  https://stackblitz.com/edit/angular-vvdedb

  Regarding headers:

  Could you let us know how do you wish to customize the headers?

  Regards,
  
  Ashwin

• 

  mark.goldin

  • Post Options:
  • Link
    Copy

  Posted 2 December 2019, 5:14 am EST

  That works if I place that code into global css, but I only need it for specific grids. If I place this code into s specific component’s css it does not seem to work. Am I correct in my assumption?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 December 2019, 7:25 am EST

  Hi Mark,

  Yes, your assumption is correct. If you wish to remove the borders of some of the FlexGrid, then you can create a class that uses the above CSS rules and set this class to the grids in which you do not want the borders. For eg:

  <wj-flex-grid class="no-border" [itemsSource]="source">
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
    <wj-flex-grid-column header="Date" binding="date"></wj-flex-grid-column>
    <wj-flex-grid-column header="Amount" binding="amount"></wj-flex-grid-column>
  </wj-flex-grid>
  

  In CSS:

  .no-border.wj-flexgrid .wj-cell:not(.wj-header) {
    border: none !important;
  }
  

  You may refer to the sample below:

  https://stackblitz.com/edit/angular-vnf288

  ~regards

• 

  mark.goldin

  • Post Options:
  • Link
    Copy

  Posted 2 December 2019, 7:30 am EST

  Why can’t I use a local css file? Why should it go into the global one?
  
  also is it possible to remove header like as well?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 December 2019, 11:25 pm EST

  Hi Mark,

  You cannot add this code in a local CSS file because of how angular handles the CSS files. The rules that you add in a component’s CSS file only apply to the component itself and not on the elements that are created dynamically like the cells of the FlexGrid. For more information, please refer to the link documentation link below for angular:

  https://angular.io/guide/component-styles#style-scope

  ~regards