Color pallete

Color pallete

Posted by: pedro.moraes on 27 April 2023, 1:11 am EST

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 April 2023, 1:11 am EST - Updated 27 April 2023, 1:17 am EST

  How do I access a color palette and modify the default texts and standard colors?

  

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 27 April 2023, 11:22 pm EST

  Hello,

  You can change the default text of the color picker by changing the corresponding properties in the designer resources. You can get designer resources using GC.Spread.Sheets.Designer.getResources() method and set the modified resources using GC.Spread.Sheets.Designer.setResources() method.

  Please refer to the code snippet.

  let res = GC.Spread.Sheets.Designer.getResources();
  res.colorPicker.moreColorsText = 'MORE COLORS';
  res.colorPicker.standardColorsTitle = "STANDARD COLORS";
  res.colorPicker.themeColorsTitle = "THEME COLORS";
  GC.Spread.Sheets.Designer.setResources(res);

  Please note that you can not change standard colors in the color picker as they are rendered by a designer component. To change the standard colors in color picker, you would need to create a custom color picker and register that component to designer.

  Please refer to https://www.grapecity.com/spreadjs/docs/spreadjs_designer_component/customizations/add-custom-component to know more about custom components.

  sample: https://jscodemine.grapecity.com/share/jIqmeBHLV0SWka4Wfc-yqQ/?

  Doc references:

  GC.Spread.Sheets.Designer.getResources():https://www.grapecity.com/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer#getresources

  GC.Spread.Sheets.Designer.setResources(): https://www.grapecity.com/spreadjs/api/v16/designer/modules/GC.Spread.Sheets.Designer#setresources

  Regards,

  Ankit

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy

  Posted 28 April 2023, 12:40 am EST

  Could you send me an example of creating a color component exactly like the existing one? That I can change the default colors

  This example command does not work

  new GC.Spread.Sheets.Designer.AtomicComponentBase();

  It shows “Property ‘Designer’ does not exist on type ‘typeof Sheets’.”

  I need to use it this way:

  new Designer.Spread.Sheets.Designer.AtomicComponentBase();

  But shows “Expected 2 arguments, but got 0.”

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 30 April 2023, 11:18 pm EST

  Hello,

  It may be showing “Property ‘Designer’ does not exist on type ‘typeof Sheets’” because the type definition for that is not available. You can specify GC.Spread.Sheets as any to avoid this error.

  Please note that the color picker is a built-in component and it does not support customization. It is important to note that the standard colors in color picker component are shown as per MS Excel which is by design.

  You can change the standard colors in color picker by changing the background color and “color” attribute of html elements which show colors in color picker
  
  .
  
  Please refer to the code snippet and attached sample.

  // changes standard colors in color picker as per specified colors
  function changeStandardColors(colors) {
      let colorElements = document.querySelectorAll('[group-name="Standard Colors"]');
  
      for (let index = 0; index < 10; index++) {
          let element = colorElements[index];
          element.style.backgroundColor = colors[index];
          element.setAttribute('color', colors[index]);
      }
  }

  Sample: https://jscodemine.grapecity.com/share/3iqtjuqWc0WV5Xvr-69haA/?

  Please let us know if you still face any issues.

  Regards,

  Ankit