ColorPicker is a type of drop-down in SpreadJS. Using JavaScript code, the developer can define either the default or custom color picker as a style that can be applied to cells in the workbook. The below spreadsheet shows those two variations.
Drop-downs provide a developer the ability to add a drop-down menu with specific properties to cells in a workbook. These drop-down menus don't require any extra code other than simply specifying which one to use for the drop-down menu.
SpreadJS has 9 different kinds of drop-downs, and this demo shows how to use the Color Picker.
You can use ColorPicker drop-down like the following code :
// The way of click the dropdown icon to open ColorPicker.
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openColorPicker",
useButtonStyle: true,
}
];
sheet.setText(4, 3, "Default Color Picker");
sheet.setStyle(5, 3, style);
// The way just open ColorPicker with command rather then clicking the dropdown button.
spread.commandManager().execute({cmd:"openColorPicker",row:5,col:3,sheetName:"Sheet1"});
If you want to customize the ColorPicker, you can use these options :
colorBlockSize: number : Specify every color cell's size.
groups: IColorGroup[] : Specify the group of the color picker, every group accept a name as group name, and a color array as the group's colors.
needScaleColor: boolean : Specify whether to generate scale color group.
For example:
let style = new GC.Spread.Sheets.Style();
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.colorPicker,
option: option
}
];
// interface of option
export interface IColorPickerOption{
colorBlockSize?: number;
groups?: GC.Spread.Sheets.IColorPickerGroup[];
}
export interface IColorPickerGroup{
name: string;
colors: string[][];
needScaleColor?: boolean;
}
Submit and view feedback for