Class: SlicerStyle

Sheets.Slicers.SlicerStyle

Table of contents

Constructors

• constructor

Methods

• fromJSON
• headerStyle
• hoveredSelectedItemWithDataStyle
• hoveredSelectedItemWithNoDataStyle
• hoveredUnSelectedItemWithDataStyle
• hoveredUnSelectedItemWithNoDataStyle
• name
• selectedItemWithDataStyle
• selectedItemWithNoDataStyle
• toJSON
• unSelectedItemWithDataStyle
• unSelectedItemWithNoDataStyle
• wholeSlicerStyle

Constructors

constructor

• new SlicerStyle()

Represents the slicer style settings.

example

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8"],
    ["4", "NewYork", "1972/7/3"],
    ["4", "NewYork", "1964/3/2"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");

//set customized style
var style = new GC.Spread.Sheets.Slicers.SlicerStyle();
var styleInfo1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
styleInfo1.backColor("orange");
styleInfo1.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(2,"solid","green"));
style.wholeSlicerStyle(styleInfo1);
var styleInfo2 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
styleInfo2.backColor("red");
styleInfo2.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(4,"solid","gray"));
style.hoveredSelectedItemWithDataStyle(styleInfo2);
slicer.style(style);

Methods

fromJSON

▸ fromJSON(data): void

Loads the object state from the specified JSON string.

example

//This example uses the fromJSON method.
const light1 = GC.Spread.Sheets.Slicers.SlicerStyles.light1();
//export
const jsonStr = JSON.stringify(light1.toJSON());
//import
const newTheme = new GC.Spread.Sheets.Slicers.SlicerStyle();
newTheme.fromJSON(JSON.parse(jsonStr));
newTheme.name('custom1');
alert(jsonStr);

Parameters

Name	Type	Description
data	Object	The item slicer theme data from deserialization.

Returns

void

---

headerStyle

▸ headerStyle(value?): any

Gets or sets the style of the slicer header.

example

//This example sets the header backcolor.
//create a table
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
//slicer info
var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle.backColor("red");
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1.headerStyle(hstyle);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
 //change the slicer properties.
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(style1);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the slicer header; otherwise, returns the slicer style.

---

hoveredSelectedItemWithDataStyle

▸ hoveredSelectedItemWithDataStyle(value?): any

Gets or sets the style of the hovered selected item with data.

example

//This example sets the hoveredSelectedItemWithDataStyle method.
//create a table
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// slicer info
var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle.backColor("red");
hstyle.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1.hoveredSelectedItemWithDataStyle(hstyle);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
 //change the slicer properties.
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(style1);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the hovered selected item with data; otherwise, returns the slicer style.

---

hoveredSelectedItemWithNoDataStyle

▸ hoveredSelectedItemWithNoDataStyle(value?): any

Gets or sets the display style of slicer items that are selected but have no data when hovered over, including background color, border, and font style. NoDataItems represent slicer items that are determined to have no corresponding data under the current filter and data context (possibly due to filtering applied by other slicers).

example

//Please hover over the items in the slicer to see the styling effects.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datasource = [
    { Name: "Apple", Category: "Fruit" },
    { Name: "Orange", Category: "Fruit" },
    { Name: "Broccoli", Category: "Vegetable" },
    { Name: "Kiwi", Category: "Fruit" },
    { Name: "Rice", Category: "Cereal" },
    { Name: "Strawberry", Category: "Fruit" },
    { Name: "Yogurt", Category: "Dairy" },
    { Name: "Plum", Category: "Fruit" },
    { Name: "Celery", Category: "Vegetable" },
    { Name: "Grape", Category: "Fruit" },
    { Name: "Oats", Category: "Cereal" },
    { Name: "Quinoa", Category: "Cereal" },
    { Name: "Maize", Category: "Cereal" },
    { Name: "Okra", Category: "Vegetable" },
    { Name: "Corn", Category: "Vegetable" },
    { Name: "Wheat", Category: "Cereal" },
    { Name: "Barley", Category: "Cereal" },
    { Name: "Cream", Category: "Dairy" },
    { Name: "Millet", Category: "Cereal" },
    { Name: "Rye", Category: "Cereal" },
    { Name: "Artichoke", Category: "Vegetable" },
    { Name: "Buckwheat", Category: "Cereal" },
    { Name: "Gooseberry", Category: "Fruit" },
    { Name: "Amaranth", Category: "Cereal" },
    { Name: "Carrot", Category: "Vegetable" },
    { Name: "Cheese", Category: "Dairy" },
    { Name: "Fig", Category: "Fruit" },
    { Name: "Milk", Category: "Dairy" },
    { Name: "Butter", Category: "Dairy" },
               ];
//add table
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, datasource);
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,expected: 'Dairy'});
table.rowFilter().addFilterItem(2, condition);
table.rowFilter().filter();
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer",table.name(),"Name");
 //change the slicer properties.
var slicerStyleInfo = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
slicerStyleInfo.backColor("magenta");
var slicerStyle = slicer.style();
slicerStyle.hoveredSelectedItemWithNoDataStyle(slicerStyleInfo);
slicer.style(slicerStyle);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the hovered selected item with no data; otherwise, returns the slicer style.

---

hoveredUnSelectedItemWithDataStyle

▸ hoveredUnSelectedItemWithDataStyle(value?): any

Gets or sets the style of the hovered unselected item with data.

example

//This example uses the hoveredUnSelectedItemWithDataStyle method.
//create a table
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
// slicer style
var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle.backColor("red");
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1.hoveredUnSelectedItemWithDataStyle(hstyle);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
 //change the slicer properties.
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(style1);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the hovered unselected item with data; otherwise, returns the slicer style.

---

hoveredUnSelectedItemWithNoDataStyle

▸ hoveredUnSelectedItemWithNoDataStyle(value?): any

Gets or sets the display style of the hovered unselected items in the slicer (i.e., items with no corresponding data under the current filter conditions), including color, font, and border. NoDataItems represent slicer items that are determined to have no corresponding data under the current filter and data context (possibly due to filtering applied by other slicers).

example

//Please hover over the items in the slicer to see the styling effects.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datasource = [
    { Name: "Apple", Category: "Fruit" },
    { Name: "Orange", Category: "Fruit" },
    { Name: "Broccoli", Category: "Vegetable" },
    { Name: "Kiwi", Category: "Fruit" },
    { Name: "Rice", Category: "Cereal" },
    { Name: "Strawberry", Category: "Fruit" },
    { Name: "Yogurt", Category: "Dairy" },
    { Name: "Plum", Category: "Fruit" },
    { Name: "Celery", Category: "Vegetable" },
    { Name: "Grape", Category: "Fruit" },
    { Name: "Oats", Category: "Cereal" },
    { Name: "Quinoa", Category: "Cereal" },
    { Name: "Maize", Category: "Cereal" },
    { Name: "Okra", Category: "Vegetable" },
    { Name: "Corn", Category: "Vegetable" },
    { Name: "Wheat", Category: "Cereal" },
    { Name: "Barley", Category: "Cereal" },
    { Name: "Cream", Category: "Dairy" },
    { Name: "Millet", Category: "Cereal" },
    { Name: "Rye", Category: "Cereal" },
    { Name: "Artichoke", Category: "Vegetable" },
    { Name: "Buckwheat", Category: "Cereal" },
    { Name: "Gooseberry", Category: "Fruit" },
    { Name: "Amaranth", Category: "Cereal" },
    { Name: "Carrot", Category: "Vegetable" },
    { Name: "Cheese", Category: "Dairy" },
    { Name: "Fig", Category: "Fruit" },
    { Name: "Milk", Category: "Dairy" },
    { Name: "Butter", Category: "Dairy" },
              ];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, datasource);
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,expected: 'Apple'});
table.rowFilter().addFilterItem(1, condition);
var condition1 = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,expected: 'Fruit'});
table.rowFilter().addFilterItem(2, condition1);
table.rowFilter().filter();
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer",table.name(),"Category");
 //change the slicer properties.
var slicerStyleInfo = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
slicerStyleInfo.backColor("magenta");
var slicerStyle = slicer.style();
slicerStyle.hoveredUnSelectedItemWithNoDataStyle(slicerStyleInfo);
slicer.style(slicerStyle);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the hovered unselected item with no data; otherwise, returns the slicer style.

---

name

▸ name(value?): any

Gets or sets the name of the style.

example

//create a table
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Height");
//set customized style
var style = new GC.Spread.Sheets.Slicers.SlicerStyle();
var styleInfo1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
styleInfo1.backColor("orange");
style.wholeSlicerStyle(styleInfo1);
console.log(style.name()); // ''
style.name("orangeStyle");
slicer.style(style);
console.log(slicer.style().name()); // 'orangeStyle'

Parameters

Name	Type
value?	string

Returns

any

If no value is set, returns the name of the style; otherwise, returns the slicer style.

---

selectedItemWithDataStyle

▸ selectedItemWithDataStyle(value?): any

Gets or sets the style of the selected item with data.

example

//This example uses the hoveredUnSelectedItemWithNoDataStyle method.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datasource = [
    { Name: "Apple", Category: "Fruit" },
    { Name: "Orange", Category: "Fruit" },
    { Name: "Broccoli", Category: "Vegetable" },
    { Name: "Kiwi", Category: "Fruit" },
    { Name: "Rice", Category: "Cereal" },
    { Name: "Strawberry", Category: "Fruit" },
    { Name: "Yogurt", Category: "Dairy" },
    { Name: "Plum", Category: "Fruit" },
    { Name: "Celery", Category: "Vegetable" },
    { Name: "Grape", Category: "Fruit" },
    { Name: "Oats", Category: "Cereal" },
    { Name: "Quinoa", Category: "Cereal" },
    { Name: "Maize", Category: "Cereal" },
    { Name: "Okra", Category: "Vegetable" },
    { Name: "Corn", Category: "Vegetable" },
    { Name: "Wheat", Category: "Cereal" },
    { Name: "Barley", Category: "Cereal" },
    { Name: "Cream", Category: "Dairy" },
    { Name: "Millet", Category: "Cereal" },
    { Name: "Rye", Category: "Cereal" },
    { Name: "Artichoke", Category: "Vegetable" },
    { Name: "Buckwheat", Category: "Cereal" },
    { Name: "Gooseberry", Category: "Fruit" },
    { Name: "Amaranth", Category: "Cereal" },
    { Name: "Carrot", Category: "Vegetable" },
    { Name: "Cheese", Category: "Dairy" },
    { Name: "Fig", Category: "Fruit" },
    { Name: "Milk", Category: "Dairy" },
    { Name: "Butter", Category: "Dairy" },
              ];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, datasource);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Category");
 //change the slicer properties.
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(300, 50));
var slicer2 = activeSheet.slicers.add("slicer2", table.name(), "Name");
var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle.backColor("red");
hstyle.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
var hstyle1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle1.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "dashed", "blue"));
hstyle1.backColor("yellow");
var hstyle2 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle2.backColor("green");
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1.hoveredSelectedItemWithDataStyle(hstyle);
style1.hoveredUnSelectedItemWithDataStyle(hstyle);
style1.unSelectedItemWithDataStyle(hstyle1);
style1.selectedItemWithDataStyle(hstyle2);
slicer.style(style1);
var hstyle2nd = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle2nd.backColor("red");
hstyle2nd.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "double", "orange"));
var hstyle12nd = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle12nd.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "double", "blue"));
hstyle12nd.backColor("yellow");
var hstyle22nd = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle22nd.backColor("magenta");
var style1two = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1two.hoveredSelectedItemWithNoDataStyle(hstyle2nd);
style1two.hoveredUnSelectedItemWithNoDataStyle(hstyle2nd);
style1two.unSelectedItemWithNoDataStyle(hstyle12nd);
style1two.selectedItemWithNoDataStyle(hstyle22nd);
slicer2.style(style1two);
activeSheet.setColumnWidth(1, 100);
activeSheet.setColumnWidth(2, 100);
activeSheet.setColumnWidth(3, 100);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the selected item with data; otherwise, returns the slicer style.

---

selectedItemWithNoDataStyle

▸ selectedItemWithNoDataStyle(value?): any

Gets or sets the style of the selected item with no data. NoDataItems represent slicer items that are determined to have no corresponding data under the current filter and data context (possibly due to filtering applied by other slicers).

example

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datasource = [
    { Name: "Apple", Category: "Fruit" },
    { Name: "Orange", Category: "Fruit" },
    { Name: "Broccoli", Category: "Vegetable" },
    { Name: "Kiwi", Category: "Fruit" },
    { Name: "Rice", Category: "Cereal" },
    { Name: "Strawberry", Category: "Fruit" },
    { Name: "Yogurt", Category: "Dairy" },
    { Name: "Plum", Category: "Fruit" },
    { Name: "Celery", Category: "Vegetable" },
    { Name: "Grape", Category: "Fruit" },
    { Name: "Oats", Category: "Cereal" },
    { Name: "Quinoa", Category: "Cereal" },
    { Name: "Maize", Category: "Cereal" },
    { Name: "Okra", Category: "Vegetable" },
    { Name: "Corn", Category: "Vegetable" },
    { Name: "Wheat", Category: "Cereal" },
    { Name: "Barley", Category: "Cereal" },
    { Name: "Cream", Category: "Dairy" },
    { Name: "Millet", Category: "Cereal" },
    { Name: "Rye", Category: "Cereal" },
    { Name: "Artichoke", Category: "Vegetable" },
    { Name: "Buckwheat", Category: "Cereal" },
    { Name: "Gooseberry", Category: "Fruit" },
    { Name: "Amaranth", Category: "Cereal" },
    { Name: "Carrot", Category: "Vegetable" },
    { Name: "Cheese", Category: "Dairy" },
    { Name: "Fig", Category: "Fruit" },
    { Name: "Milk", Category: "Dairy" },
    { Name: "Butter", Category: "Dairy" },
              ];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, datasource);
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,expected: 'Dairy'});
table.rowFilter().addFilterItem(2, condition);
table.rowFilter().filter();
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer",table.name(),"Name");
 //change the slicer properties.
var slicerStyleInfo = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
slicerStyleInfo.backColor("magenta");
var slicerStyle = slicer.style();
slicerStyle.selectedItemWithNoDataStyle(slicerStyleInfo);
slicer.style(slicerStyle);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the selected item with no data; otherwise, returns the slicer style.

---

toJSON

▸ toJSON(): Object

Saves the object state to a JSON string.

example

//This example uses the toJSON method.
const light1 = GC.Spread.Sheets.Slicers.SlicerStyles.light1();
//export
const jsonStr = JSON.stringify(light1.toJSON());
//import
const newTheme = new GC.Spread.Sheets.Slicers.SlicerStyle();
newTheme.fromJSON(JSON.parse(jsonStr));
newTheme.name('custom1');
alert(jsonStr);

Returns

Object

The item slicer theme data.

---

unSelectedItemWithDataStyle

▸ unSelectedItemWithDataStyle(value?): any

Gets or sets the style of the unselected item with data.

example

//This example uses the hoveredUnSelectedItemWithNoDataStyle method.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datasource = [
    { Name: "Apple", Category: "Fruit" },
    { Name: "Orange", Category: "Fruit" },
    { Name: "Broccoli", Category: "Vegetable" },
    { Name: "Kiwi", Category: "Fruit" },
    { Name: "Rice", Category: "Cereal" },
    { Name: "Strawberry", Category: "Fruit" },
    { Name: "Yogurt", Category: "Dairy" },
    { Name: "Plum", Category: "Fruit" },
    { Name: "Celery", Category: "Vegetable" },
    { Name: "Grape", Category: "Fruit" },
    { Name: "Oats", Category: "Cereal" },
    { Name: "Quinoa", Category: "Cereal" },
    { Name: "Maize", Category: "Cereal" },
    { Name: "Okra", Category: "Vegetable" },
    { Name: "Corn", Category: "Vegetable" },
    { Name: "Wheat", Category: "Cereal" },
    { Name: "Barley", Category: "Cereal" },
    { Name: "Cream", Category: "Dairy" },
    { Name: "Millet", Category: "Cereal" },
    { Name: "Rye", Category: "Cereal" },
    { Name: "Artichoke", Category: "Vegetable" },
    { Name: "Buckwheat", Category: "Cereal" },
    { Name: "Gooseberry", Category: "Fruit" },
    { Name: "Amaranth", Category: "Cereal" },
    { Name: "Carrot", Category: "Vegetable" },
    { Name: "Cheese", Category: "Dairy" },
    { Name: "Fig", Category: "Fruit" },
    { Name: "Milk", Category: "Dairy" },
    { Name: "Butter", Category: "Dairy" },
              ];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, datasource);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Category");
 //change the slicer properties.
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(300, 50));
var slicer2 = activeSheet.slicers.add("slicer2", table.name(), "Name");
var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle.backColor("red");
hstyle.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
var hstyle1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle1.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "dashed", "blue"));
hstyle1.backColor("yellow");
var hstyle2 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle2.backColor("green");
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1.hoveredSelectedItemWithDataStyle(hstyle);
style1.hoveredUnSelectedItemWithDataStyle(hstyle);
style1.unSelectedItemWithDataStyle(hstyle1);
style1.selectedItemWithDataStyle(hstyle2);
slicer.style(style1);
var hstyle2nd = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle2nd.backColor("red");
hstyle2nd.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "double", "orange"));
var hstyle12nd = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle12nd.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "double", "blue"));
hstyle12nd.backColor("yellow");
var hstyle22nd = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle22nd.backColor("magenta");
var style1two = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1two.hoveredSelectedItemWithNoDataStyle(hstyle2nd);
style1two.hoveredUnSelectedItemWithNoDataStyle(hstyle2nd);
style1two.unSelectedItemWithNoDataStyle(hstyle12nd);
style1two.selectedItemWithNoDataStyle(hstyle22nd);
slicer2.style(style1two);
activeSheet.setColumnWidth(1, 100);
activeSheet.setColumnWidth(2, 100);
activeSheet.setColumnWidth(3, 100);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the unselected item with data; otherwise, returns the slicer style.

---

unSelectedItemWithNoDataStyle

▸ unSelectedItemWithNoDataStyle(value?): any

Gets or sets the display style of unselected items in the slicer (i.e., items with no corresponding data under the current filter conditions), including color, font, and border. NoDataItems represent slicer items that are determined to have no corresponding data under the current filter and data context (possibly due to filtering applied by other slicers).

example

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datasource = [
    { Name: "Apple", Category: "Fruit" },
    { Name: "Orange", Category: "Fruit" },
    { Name: "Broccoli", Category: "Vegetable" },
    { Name: "Kiwi", Category: "Fruit" },
    { Name: "Rice", Category: "Cereal" },
    { Name: "Strawberry", Category: "Fruit" },
    { Name: "Yogurt", Category: "Dairy" },
    { Name: "Plum", Category: "Fruit" },
    { Name: "Celery", Category: "Vegetable" },
    { Name: "Grape", Category: "Fruit" },
    { Name: "Oats", Category: "Cereal" },
    { Name: "Quinoa", Category: "Cereal" },
    { Name: "Maize", Category: "Cereal" },
    { Name: "Okra", Category: "Vegetable" },
    { Name: "Corn", Category: "Vegetable" },
    { Name: "Wheat", Category: "Cereal" },
    { Name: "Barley", Category: "Cereal" },
    { Name: "Cream", Category: "Dairy" },
    { Name: "Millet", Category: "Cereal" },
    { Name: "Rye", Category: "Cereal" },
    { Name: "Artichoke", Category: "Vegetable" },
    { Name: "Buckwheat", Category: "Cereal" },
    { Name: "Gooseberry", Category: "Fruit" },
    { Name: "Amaranth", Category: "Cereal" },
    { Name: "Carrot", Category: "Vegetable" },
    { Name: "Cheese", Category: "Dairy" },
    { Name: "Fig", Category: "Fruit" },
    { Name: "Milk", Category: "Dairy" },
    { Name: "Butter", Category: "Dairy" },
              ];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, datasource);
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,expected: 'Apple'});
table.rowFilter().addFilterItem(1, condition);
var condition1 = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,expected: 'Fruit'});
table.rowFilter().addFilterItem(2, condition1);
table.rowFilter().filter();
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer",table.name(),"Category");
 //change the slicer properties.
var slicerStyleInfo = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
slicerStyleInfo.backColor("magenta");
var slicerStyle = slicer.style();
slicerStyle.unSelectedItemWithNoDataStyle(slicerStyleInfo);
slicer.style(slicerStyle);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the unselected item with no data; otherwise, returns the slicer style.

---

wholeSlicerStyle

▸ wholeSlicerStyle(value?): any

Gets or sets the style of the whole slicer.

example

//create a table
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
//add a slicer to the sheet and return the slicer instance.
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Height");
slicer.position(new GC.Spread.Sheets.Point(100, 200));
//set customized style
var style = new GC.Spread.Sheets.Slicers.SlicerStyle();
var styleInfo1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
styleInfo1.backColor("orange");
styleInfo1.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(2,"solid","green"));
style.wholeSlicerStyle(styleInfo1);
var styleInfo2 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
styleInfo2.backColor("red");
styleInfo2.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(4,"solid","gray"));
style.hoveredSelectedItemWithDataStyle(styleInfo2);
slicer.style(style);

Parameters

Name	Type
value?	SlicerStyleInfo

Returns

any

If no value is set, returns the style of the whole slicer; otherwise, returns the slicer style.