GC.Spread.Sheets.Slicers.ItemSlicer

Class: ItemSlicer

Sheets.Slicers.ItemSlicer

Constructors

constructor

Methods

Constructors

constructor

• new ItemSlicer(name, slicerData, columnName)

Represents an item slicer.

example

//This example creates an item slicer.
//create table
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//Add the item slicer to the dom tree.
//The "slicerHost" is the div you want to add the slicer's dom to.
$("#slicerHost").append(slicer.getDOMElement());

Parameters

Name	Type	Description
`name`	`string`	The name of the item slicer.
`slicerData`	`GeneralSlicerData`	An instance of the GeneralSlicerData or TableSlicerData.
`columnName`	`string`	The column name that relates to the item slicer.

Methods

captionName

▸ captionName(value?): any

Gets or sets the caption name of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.captionName();
console.log(oldValue);
slicer.captionName('Slicer_Caption');
var newValue = slicer.captionName();
console.log(newValue);

Parameters

Name	Type
`value?`	`string`

Returns

any

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

columnCount

▸ columnCount(value?): any

Gets or sets the column count of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.columnCount();
console.log(oldValue);
slicer.columnCount(3);
var newValue = slicer.columnCount();
console.log(newValue);

Parameters

Name	Type
`value?`	`number`

Returns

any

If no value is set, returns the column count of the item slicer; otherwise, returns the item slicer.

getDOMElement

▸ getDOMElement(): HTMLElement

Gets the dom element of the item slicer.

example

//This example creates an item slicer.
//create table
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//Add the item slicer to the dom tree.
//The "slicerHost" is the div you want to add the slicer's dom to.
$("#slicerHost").append(slicer.getDOMElement());

Returns

HTMLElement

The dom element of the item slicer.

getStyleName

▸ getStyleName(): undefined | string

Gets or sets a style name for the table item slicer.

Returns

undefined | string

returns the table item slicer style name.

height

▸ height(value?): any

Gets or sets the height of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.height();
console.log(oldValue);
slicer.height(120);
var newValue = slicer.height();
console.log(newValue);

Parameters

Name	Type
`value?`	`number`

Returns

any

If no value is set, returns the height of the item slicer; otherwise, returns the item slicer.

itemHeight

▸ itemHeight(value?): any

Gets or sets the item height of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.itemHeight();
console.log(oldValue);
slicer.itemHeight(34);
var newValue = slicer.itemHeight();
console.log(newValue);

Parameters

Name	Type
`value?`	`number`

Returns

any

If no value is set, returns the item height of the item slicer; otherwise, returns the item slicer.

name

▸ name(value?): any

Gets or sets the name of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.name();
console.log(oldValue);
slicer.name('SlicerA');
var newValue = slicer.name();
console.log(newValue);

Parameters

Name	Type
`value?`	`string`

Returns

any

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

showHeader

▸ showHeader(value?): any

Gets or sets whether to show the header of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showHeader();
console.log(oldValue);
slicer.showHeader(false);
var newValue = slicer.showHeader();
console.log(newValue);

Parameters

Name	Type
`value?`	`boolean`

Returns

any

If no value is set, returns whether to show the header of the item slicer; otherwise, returns the item slicer.

showNoDataItems

▸ showNoDataItems(value?): any

Gets or sets whether to show the no data items of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showNoDataItems();
console.log(oldValue);
slicer.showNoDataItems(false);
var newValue = slicer.showNoDataItems();
console.log(newValue);

Parameters

Name	Type
`value?`	`boolean`

Returns

any

If no value is set, returns whether to show the no data items of the item slicer; otherwise, returns the item slicer.

showNoDataItemsInLast

▸ showNoDataItemsInLast(value?): any

Gets or sets whether to show the no data items last.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.showNoDataItemsInLast();
console.log(oldValue);
slicer.showNoDataItemsInLast(false);
var newValue = slicer.showNoDataItemsInLast();
console.log(newValue);

Parameters

Name	Type
`value?`	`boolean`

Returns

any

If no value is set, returns whether to show the no data items last; otherwise, returns the item slicer.

sortState

▸ sortState(value?): any

Gets or sets the sort state of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.sortState();
console.log(oldValue);
slicer.sortState(GC.Spread.Sheets.SortState.descending);
var newValue = slicer.sortState();
console.log(newValue);

Parameters

Name	Type
`value?`	`SortState`

Returns

any

If no value is set, returns the sort state of the item slicer; otherwise, returns the item slicer.

style

▸ style(value?): SlicerStyle | ItemSlicer

Gets or sets the style of the item slicer.

example

The style is json data, its json schema is as follows:
{
     "$schema" : "http://json-schema.org/draft-04/schema#",
     "title" : "style",
     "type" : "object",
     "properties" : {
         "wholeSlicerStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "headerStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "selectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "selectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "unSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "unSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredUnSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredUnSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         }
     },
     "definitions" : {
         "StyleInfo" : {
             "type" : "object",
             "properties" : {
                     "backColor" : {
                             "type" : "string"
                     },
                     "foreColor" : {
                             "type" : "string"
                     },
                     "font" : {
                             "type" : "string"
                     },
                     "borderLeft" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderTop" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderRight" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderBottom" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                 "textDecoration":{
                     "type" : "string"
                 }
             }
         },
         "SlicerBorder":{
             "type":"object",
             "properties":{
                 "borderWidth":{
                         "type":"number"
                 },
                 "borderStyle":{
                         "type":"string"
                 },
                 "borderColor":{
                         "type":"string"
                 }
          }
         }
     }
 }
using sample:
var style = new GC.Spread.Sheets.Slicers.SlicerStyle();
style.wholeSlicerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'blue', '16pt Calibri'));
style.headerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'green'));
style.selectedItemWithDataStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, undefined, undefined, new GC.Spread.Sheets.LineBorder('pink', GC.Spread.Sheets.LineStyle.double)));
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.style();
console.log(oldValue);
slicer.style(style);
var newValue = slicer.style();
console.log(newValue);

Parameters

Name	Type	Description
`value?`	`string` \| `SlicerStyle`	The style or style name of the item slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer control, defining its overall look and presentation.

Returns

SlicerStyle | ItemSlicer

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

visuallyNoDataItems

▸ visuallyNoDataItems(value?): any

Gets or sets whether to visually distinguish the items with no data.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.visuallyNoDataItems();
console.log(oldValue);
slicer.visuallyNoDataItems(false);
var newValue = slicer.visuallyNoDataItems();
console.log(newValue);

Parameters

Name	Type
`value?`	`boolean`

Returns

any

If no value is set, returns whether to visually distinguish the items with no data; otherwise, returns the item slicer.

width

▸ width(value?): any

Gets or sets the width of the item slicer.

example

var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.width();
console.log(oldValue);
slicer.width(120);
var newValue = slicer.width();
console.log(newValue);

Parameters

Name	Type
`value?`	`number`

Returns

any

If no value is set, returns the width of the item slicer; otherwise, returns the item slicer.

GC.Spread.Sheets.Slicers.ItemSlicer

Class: ItemSlicer

Table of contents

Constructors

Methods

Constructors

constructor

Parameters

Methods

captionName

Parameters

Returns

columnCount

Parameters

Returns

getDOMElement

Returns

getStyleName

Returns

height

Parameters

Returns

itemHeight

Parameters

Returns

name

Parameters

Returns

showHeader

Parameters

Returns

showNoDataItems

Parameters

Returns

showNoDataItemsInLast

Parameters

Returns

sortState

Parameters

Returns

style

Parameters

Returns

visuallyNoDataItems

Parameters

Returns

width

Parameters

Returns