Customized CSS in Wijmo Grid

Customized CSS in Wijmo Grid

Posted by: technical.store.technical on 2 July 2021, 2:49 am EST

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 July 2021, 2:49 am EST

  Hi team,

  I’m facing following issues :-

  1. On initial Load the 1st cell of the grid is coming highlighted. How can i remove that ?

  2. on selecting a row using a check box the color is getting applied but not on the disabled cell. I have explicitly marked the disable cell color as white because of the table color so as show it as disabled. But on selection it should get the color of selection. How can I achieve that ?

  3. How i can change the color of one column. Example checkbox column to be of different color than the table color ?

  4. how i can append a ‘*’(Mandatory red *) symbol on header of full Name.
     
     Snippet of the code : -

  https://stackblitz.com/edit/angular-re5uf1?file=src/styles.css
  

  Can you please provide solution for this.
  
  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 4 July 2021, 11:22 pm EST

  Hi team,

  Please help us with the solution.

  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2021, 2:44 am EST

  Hi,

  Please refer to the following:
  
  1). To remove the selection you may call the select method with -1, -1 as arguments.

  grid.select(-1, -1);
  

  2). You may use the background-color: inherit for the controls of the disabled selected cells too. Please refer to the sample shared below.
  
  3). You may use the cssClass property of the column to add custom class name on the cells of the column and then target the specified class name to styles the cells.

  <wj-flex-grid-column [cssClass]="'my-checkbox-column'" [align]="'center'" [isReadOnly]="true" [width]="35">
      </wj-flex-grid-column>
  .wj-cell.my-checkbox-column {
    background-color: pink;
  }
  

  4). You may use formatItem event to update the cell HTML. Please refer to the following sample:
  
  https://stackblitz.com/edit/angular-xbzbcm?file=src%2Fstyles.css

  ~sharad

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 5 July 2021, 4:59 am EST

  Hi sharad,

  Thank you for replying.
  
  For multi-select, the cell highlighting is not happening if we click on the input box or the dropdown icon. We have to click outside of the input box in order to highlight the selected multi-select cell.

  https://stackblitz.com/edit/angular-xbzbcm?file=src%2Fstyles.css
  
  Can you please provide solution.

  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 July 2021, 5:08 am EST

  Hi,

  In order to achieve the required functionality, You may handle gotFocus event on multiSelect/comboBox and inside its handler change the selection accordingly. As follows -

  gotFocus: s => {
             let row = -1,
               col = -1;
             let ac = s.hostElement.parentElement;
             if (ac != null) {
               row = ac['wj-cell-index'].row;
               col = ac['wj-cell-index'].col;
               grid.select(row, col);
             }
           }
  

  For better understanding you may refer to the below code sample -
  
  https://stackblitz.com/edit/angular-g5qiij?file=src%2Fapp%2Fapp.component.ts

  Regards