Different color code for newly added rows

Different color code for newly added rows

Posted by: sdayal on 9 October 2024, 4:45 am EST

• 

  sdayal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 October 2024, 4:45 am EST

  hi Wijmo team,

  How can we add a different color code for newly added all the rows also on updating an existing row data it should highlight with different color

  https://stackblitz.com/edit/angular-pm5nse?file=src%2Fapp%2Fapp.component.ts

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 10 October 2024, 2:56 am EST

  Hi,

  Thank you for sharing the sample, it seems the logic for adding custom CSS class on the edited rows is already implemented in the sample you shared. You just need to apply some CSS to highlight the edited rows.
  
  To highlight the newly added rows, you can add an extra property to the newly added item, i.e. add ‘_cssClass’ to the newly added item, as this property is already used in formatItem to add a custom CSS class on the cells.
  
  You can use the following CSS -

  .wj-flexgrid .edited {
    background-color: lightpink !important;
  }
  .wj-flexgrid .new {
    background-color: steelblue !important;
    color: white !important;
  }

  Here’s an updated sample for the same - https://stackblitz.com/edit/angular-cgpycf?file=src%2Fapp%2Fapp.component.ts

  In the above sample, you can refer to lines 937, 858-879, and 535-537 in the app.component.ts file and lines 147-153 in the styles.css file.

  Regards

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 10 October 2024, 5:54 am EST - Updated 10 October 2024, 6:01 am EST

  Thanks for quick response, it worked!! I wanted to change the check box color too. How can I do that, I tried to change the color and background color by using ‘wj-cell my-checkbox-column’ classes, but it somehow not reflecting.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2024, 3:13 am EST

  Hi,

  The default checkbox doesn’t allow direct modification of its appearance, so you’ll need to use pseudo-elements like ::before and ::after or hide the default checkbox and replace it with a custom design.
  
  You can refer to the following updated sample demonstrating the same - https://stackblitz.com/edit/angular-ndhvsg?file=src%2Fstyles.css

  We have only applied the following CSS to the previous sample -

  /* custom chekcbox CSS */
  .wj-cell.my-checkbox-column.wj-cell input[type="checkbox"],
  .wj-cell.wj-header input[type="checkbox"]
   {
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* For Safari */
    width: 15px;
    height: 15px;
    background-color: white;
    border: 2px solid #000;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
  }
  
  /* Create the checkmark */
  .wj-cell.my-checkbox-column input[type="checkbox"]::after,
  .wj-cell.wj-header input[type="checkbox"]::after {
    content: "";
    display: none;
    position: absolute;
    top: 2px;
    left: 5px;
    width: 3px;
    height: 7px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  /* When the checkbox is checked */
  .wj-cell.my-checkbox-column input[type="checkbox"]:checked,
  .wj-cell.wj-header input[type="checkbox"]:checked {
    background-color: #4CAF50; /* Change the color here */
  }
  
  .wj-cell.my-checkbox-column input[type="checkbox"]:checked::after,
  .wj-cell.wj-header input[type="checkbox"]:checked::after {
    display: block;
  }

  You can modify the checkbox color and styles as per your needs.

  Regards

• 

  sdayal

  • Post Options:
  • Link
    Copy

  Posted 15 October 2024, 12:59 am EST

  Hi Wijmo team,

  One more thing - How can we change the color of focused cell

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 16 October 2024, 1:17 am EST

  Hi,

  You can use the following CSS to change the color of the focused/selected cell in the FlexGrid -

  .wj-flexgrid .wj-cell.wj-state-selected {
    background-color: red !important;
    color: white !important;
  }

  You can modify the colors as per your requirements. In case, you need any other help, please let us know.

  Regards