Modify Conditional Formatting Icons

Modify Conditional Formatting Icons

Posted by: adisa.craig on 16 October 2019, 9:54 am EST

• 

  adisa.craig

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 October 2019, 9:54 am EST

  Is there a way to modify the icons that are used for Conditional Formatting with the Icon Sets Rule? For example changing the image used for the grey arrow to a different one?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 17 October 2019, 3:08 am EST

  Hi Adisa,

  You could define custom icons by overriding the getIcon() method of IconSetRule class. Please refer to the following code snippet and the sample demonstrating the same:

  // override to use custom icons
  var base = GC.Spread.Sheets.ConditionalFormatting.IconSetRule.getIcon;
  GC.Spread.Sheets.ConditionalFormatting.IconSetRule.getIcon = function(
    iconSetType,
    iconIndex
  ) {
    var icon = base.apply(this, arguments);
    if (
      iconSetType ===
      GC.Spread.Sheets.ConditionalFormatting.IconSetType.fiveArrowsColored
    ) {
      let custom = getIconURL(iconIndex);
      if (custom) {
        icon.image = custom;
        icon.w = 16;
        icon.h = 16;
        icon.x = 0;
        icon.y = 0;
      }
    }
    return icon;
  };
  

  https://codesandbox.io/s/spread-js-starter-0pcoz

  Regards
  
  Sharad