Class: GeneralSlicerData

Spread.Slicers.GeneralSlicerData

Hierarchy

• GeneralSlicerData

  ↳ TableSlicerData

Table of contents

Constructors

• constructor

Properties

• columnNames
• data

Methods

• aggregateData
• attachListener
• clearPreview
• detachListener
• doFilter
• doUnfilter
• getColumnIndex
• getData
• getExclusiveData
• getExclusiveRowIndex
• getFilteredIndexes
• getFilteredOutIndexes
• getFilteredOutRanges
• getFilteredOutRowIndexes
• getFilteredRanges
• getFilteredRowIndexes
• getRowIndexes
• inPreview
• onColumnNameChanged
• onColumnsRemoved
• onDataChanged
• onFiltered
• onRowsAdded
• onRowsRemoved
• resumeFilteredEvents
• suspendFilteredEvents

Constructors

constructor

• new GeneralSlicerData(data, columnNames)

Represents general slicer data.

Parameters

Name	Type	Description
data	any[][]	The slicer data; it is a matrix array.
columnNames	string[]	The column names of the slicer data.

Properties

columnNames

• columnNames: string[]

Indicates the column names for the general slicer data.

---

data

• data: any[][]

Indicates the data source for general slicer data.

Methods

aggregateData

▸ aggregateData(columnName, aggregateType, range?): number

Aggregates the data by the specified column name.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.aggregateData('Salary', GC.Spread.Slicers.SlicerAggregateType.average));
console.log(slicerData.aggregateData('Salary', GC.Spread.Slicers.SlicerAggregateType.count, {min: 8000, max: 20000}));

Parameters

Name	Type	Description
columnName	string	The column name.
aggregateType	SlicerAggregateType	The aggregate type.
range?	ISlicerRangeConditional	The specific range.

Returns

number

The aggregated data.

---

attachListener

▸ attachListener(listener): void

Attaches the listener. SlicerData will call the corresponding interface at the appropriate time.

example

//Define data source.
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
//Define custom slicer.
function MySlicer(container) {
    this.container = container;
    this.slicerData = null;
    this.columnName = null;
}
MySlicer.prototype.setData = function (slicerData, columnName) {
    this.slicerData = slicerData;
    this.columnName = columnName;
    // attach listener here
    this.slicerData.attachListener(this);
    this.onDataLoaded();
}
MySlicer.prototype.onDataLoaded = function () {
    //create slicer dom tree.
    var columnName = this.columnName,
        exclusiveData = this.slicerData.getExclusiveData(columnName);
    $(this.container).append($('<span>' + this.columnName + ':</span>' + '<br />'));
    var domString = "";
    for (var i = 0; i < exclusiveData.length; i++) {
        domString += '<input type="checkbox" name="' + columnName + '" value="' + exclusiveData[i] + '">';
        domString += '<span>' + exclusiveData[i] + '</span>';
        domString += '<br />';
    }
    $(this.container).append($(domString));
    //attach events to dom.
    var self = this;
    $("[name='" + self.columnName + "']").change(function () {
        var slicer = self,
            exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName),
            parent = $(this).parent(),
            items = parent.children(),
            indexes = [];
        for (var i = 0, length = items.length; i < length; i++) {
            if (items[i].checked) {
                var value = items[i].value;
                if (!isNaN(parseInt(value))) {
                    value = parseInt(value);
                }
                indexes.push(exclusiveData.indexOf(value))
            }
        }
        if (indexes.length === 0) {
            slicer.slicerData.doUnfilter(slicer.columnName);
        } else {
            slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes });
        }
    });
};
MySlicer.prototype.onFiltered = function () {
    //Sync the status if the data has been filtered by the Spread.Sheets table.
    var slicerData = this.slicerData;
    var exclusiveIndexes = slicerData.getFilteredIndexes(this.columnName);
    $.each($("#slicerContainer").children("input"), function (i, input) {
    });
}
MySlicer.prototype.onColumnsRemoved = function (columnName) {
    if (columnName === this.columnName) {
         this.slicerData.detachListener(this);
         this.slicerData = null;
         $("#slicerContainer").remove();
    }
}

//create a custom slicer and add this slicer to the "slicerContainer" div.
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');

Parameters

Name	Type	Description
listener	ISlicerListener	The listener.

Returns

void

---

clearPreview

▸ clearPreview(): void

Clears the preview filter state. you can check whether slicer is doing filter in preview with slicerData.inPreview() API, If you set doFilter() with isPreview flag to true, (like slicerData.doFilter('Name', {exclusiveRowIndexes: [1]}, true);) you can clear the preview status by clearPreview() API. which will remove the preview filter status.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 8000, text: '5 500' }
        ],
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
console.log(slicerData.inPreview()); // false
slicerData.clearPreview();
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []

slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]}, true);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
console.log(slicerData.inPreview()); // true
slicerData.clearPreview();
console.log(slicerData.inPreview()); // false
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []

Returns

void

---

detachListener

▸ detachListener(listener): void

Detaches the listener.

example

//Define data source.
var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
//Define custom slicer.
function MySlicer(container) {
    this.container = container;
    this.slicerData = null;
    this.columnName = null;
}
MySlicer.prototype.setData = function (slicerData, columnName) {
    this.slicerData = slicerData;
    this.columnName = columnName;
    // attach listener here
    this.slicerData.attachListener(this);
    this.onDataLoaded();
}
MySlicer.prototype.onDataLoaded = function () {
    //create slicer dom tree.
    var columnName = this.columnName,
        exclusiveData = this.slicerData.getExclusiveData(columnName);
    $(this.container).append($('<span>' + this.columnName + ':</span>' + '<br />'));
    var domString = "";
    for (var i = 0; i < exclusiveData.length; i++) {
        domString += '<input type="checkbox" name="' + columnName + '" value="' + exclusiveData[i] + '">';
        domString += '<span>' + exclusiveData[i] + '</span>';
        domString += '<br />';
    }
    $(this.container).append($(domString));
    //attach events to dom.
    var self = this;
    $("[name='" + self.columnName + "']").change(function () {
        var slicer = self,
            exclusiveData = slicer.slicerData.getExclusiveData(slicer.columnName),
            parent = $(this).parent(),
            items = parent.children(),
            indexes = [];
        for (var i = 0, length = items.length; i < length; i++) {
            if (items[i].checked) {
                var value = items[i].value;
                if (!isNaN(parseInt(value))) {
                    value = parseInt(value);
                }
                indexes.push(exclusiveData.indexOf(value))
            }
        }
        if (indexes.length === 0) {
            slicer.slicerData.doUnfilter(slicer.columnName);
        } else {
            slicer.slicerData.doFilter(slicer.columnName, { exclusiveRowIndexes: indexes });
        }
    });
};
MySlicer.prototype.onFiltered = function () {
    //Sync the status if the data has been filtered by the Spread.Sheets table.
    var slicerData = this.slicerData;
    var exclusiveIndexes = slicerData.getFilteredIndexes(this.columnName);
    $.each($("#slicerContainer").children("input"), function (i, input) {
    });
}
MySlicer.prototype.onColumnRemoved = function (columnName) {
    if (columnName === this.columnName) {
         this.slicerData.detachListener(this);
         this.slicerData = null;
         $("#slicerContainer").remove();
    }
}

//create a custom slicer and add this slicer to the "slicerContainer" div.
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');

Parameters

Name	Type	Description
listener	ISlicerListener	The listener.

Returns

void

---

doFilter

▸ doFilter(columnName, conditional, isPreview?): void

Filters the data that corresponds to the specified column name and exclusive data indexes.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0, 3, 4]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []

Parameters

Name	Type	Description
columnName	string	The column name.
conditional	ISlicerConditional	The conditional filter.
isPreview?	boolean	-

Returns

void

---

doUnfilter

▸ doUnfilter(columnName): void

Unfilter the data that corresponds to the specified column name.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0, 3, 4]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []

Parameters

Name	Type	Description
columnName	string	The column name.

Returns

void

---

getColumnIndex

▸ getColumnIndex(columnName): number

Gets the column index by the specified column name.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getColumnIndex('Name')); // 0
console.log(slicerData.getColumnIndex('Unknown')); // -1
console.log(slicerData.getColumnIndex('Salary')); // 3

Parameters

Name	Type	Description
columnName	string	The column name.

Returns

number

The column index.

---

getData

▸ getData(columnName, range?): string[]

Gets the data by the specified column name.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);

console.log(slicerData.getData('Name')); // ['Bob', 'Betty', 'Alice', 'Chris', 'James']
console.log(slicerData.getData('Salary')); // ['10 000', '8 000', '5 500', '6 200', '16 150']
console.log(slicerData.getData('Salary', {min: 5000, max: 10000})); // ['5 500', '6 200', '8 000', '10 000']

Parameters

Name	Type	Description
columnName	string	The column name.
range?	ISlicerRangeConditional	-

Returns

string[]

The data that corresponds to the specified column name.

---

getExclusiveData

▸ getExclusiveData(columnName): any[]

Gets the exclusive data by the specified column name.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 8000, text: '8 000' }
        ],
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty', 'Bob']
console.log(slicerData.getExclusiveData('Name')); // ['Bob', 'Betty']
console.log(slicerData.getData('Salary')); // ['10 000', '8 000', '8 000']
console.log(slicerData.getExclusiveData('Salary')); // ['10 000', '8 000']

Parameters

Name	Type	Description
columnName	string	The column name.

Returns

any[]

The exclusive data that corresponds to the specified column name.

---

getExclusiveRowIndex

▸ getExclusiveRowIndex(columnName, rowIndex): number

Gets the exclusive data index by the specified column name and data index.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 8000, text: '8 000' }
        ],
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getRowIndexes('Name', 0)); // [0, 2]
console.log(slicerData.getExclusiveRowIndex('Name', 0)); // 0
console.log(slicerData.getExclusiveRowIndex('Name', 1)); // 1
console.log(slicerData.getExclusiveRowIndex('Name', 2)); // 0

Parameters

Name	Type	Description
columnName	string	The column name.
rowIndex	number	The index of the data.

Returns

number

The exclusive data index that corresponds to the specified column name and data index.

---

getFilteredIndexes

▸ getFilteredIndexes(columnName): number[]

Gets the filtered exclusive data indexes by the specified column name.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredIndexes('Name')); // [0, 1, 2, 3, 4]
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredIndexes('Name')); // [1, 2]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredIndexes('Name')); // [0, 1, 2, 3, 4]

Parameters

Name	Type	Description
columnName	string	The column name.

Returns

number[]

The filtered exclusive data indexes that correspond to the specified column name.

---

getFilteredOutIndexes

▸ getFilteredOutIndexes(columnName, filteredOutDataType): number[]

Gets the filtered out exclusive data indexes by the specified column name.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0, 3, 4]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []

Parameters

Name	Type	Description
columnName	string	The column name.
filteredOutDataType	FilteredOutDataType	Indicates the kind of filtered out exclusive data index that should be included in the result.

Returns

number[]

The filtered out exclusive data indexes that correspond to the specified column name.

---

getFilteredOutRanges

▸ getFilteredOutRanges(columnName): ISlicerRangeConditional[]

Gets the filtered out ranges by other columns.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
slicerData.doFilter('Salary', {
    ranges: [
        { min: 5000, max: 10000 },
        { min: 5000, max: 200000 },
        { min: 60000, max: 61000 }
    ]
});
console.log(slicerData.getFilteredOutRanges('Salary')); // [{min: 60000, max: 61000}]
console.log(slicerData.getFilteredRanges('Salary')); // [{min: 5000, max: 10000}, {min: 5000, max: 200000}]

Parameters

Name	Type	Description
columnName	string	The column name.

Returns

ISlicerRangeConditional[]

The filtered out ranges by other columns that correspond to the specified column name.

---

getFilteredOutRowIndexes

▸ getFilteredOutRowIndexes(): number[]

Gets the filtered out row indexes.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
slicerData.doFilter('Salary', {
     exclusiveRowIndexes: [0, 1, 2]
});
console.log(slicerData.getFilteredOutRowIndexes('Salary')); // [3, 4]
console.log(slicerData.getFilteredRowIndexes('Salary')); // [0, 1, 2]

Returns

number[]

The filtered out row indexes.

---

getFilteredRanges

▸ getFilteredRanges(columnName): ISlicerRangeConditional[]

Gets the filtered ranges by the specified column name.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
slicerData.doFilter('Salary', {
    ranges: [
        { min: 5000, max: 10000 },
        { min: 5000, max: 200000 },
        { min: 60000, max: 61000 }
    ]
});
console.log(slicerData.getFilteredOutRanges('Salary')); // [{min: 60000, max: 61000}]
console.log(slicerData.getFilteredRanges('Salary')); // [{min: 5000, max: 10000}, {min: 5000, max: 200000}]

Parameters

Name	Type	Description
columnName	string	The column name.

Returns

ISlicerRangeConditional[]

The filtered ranges that correspond to the specified column name.

---

getFilteredRowIndexes

▸ getFilteredRowIndexes(): number[]

Gets the filtered row indexes.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Alice', text: 'Alice' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 5500, text: '5 500' }
        ],
        [
            { value: 'Chris', text: 'Chris' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2001/9/2"), text: '9/2/2001' },
            { value: 6200, text: '6 200' }
        ],
        [
            { value: 'James', text: 'James' },
            { value: 'Phoenix', text: 'Phoenix' },
            { value: new Date("1995/11/22"), text: '11/22/1995' },
            { value: 16150, text: '16 150' }
        ]
    ], ["Name", "City", "Birthday", "Salary"]
);
slicerData.doFilter('Salary', {
     exclusiveRowIndexes: [0, 1, 2]
});
console.log(slicerData.getFilteredOutRowIndexes('Salary')); // [3, 4]
console.log(slicerData.getFilteredRowIndexes('Salary')); // [0, 1, 2]

Returns

number[]

The filtered row indexes.

---

getRowIndexes

▸ getRowIndexes(columnName, exclusiveRowIndex): number[]

Gets the data indexes by the specified column name and exclusive data index.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 8000, text: '8 000' }
        ],
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getRowIndexes('Name', 0)); // [0, 2]
console.log(slicerData.getRowIndexes('Name', 1)); // [1]
console.log(slicerData.getRowIndexes('Name', 2)); // undefined
console.log(slicerData.getRowIndexes('Salary', 1)); // [1, 2]

Parameters

Name	Type	Description
columnName	string	The column name.
exclusiveRowIndex	number	The index of the exclusive data.

Returns

number[]

The data indexes that correspond to the specified column name and exclusive data index.

---

inPreview

▸ inPreview(): boolean

Gets whether the slicer is in the preview state. If you set doFilter() with isPreview flag to true, (like slicerData.doFilter('Name', {exclusiveRowIndexes: [1]}, true);) you can check whether slicer is doing filter in preview with slicerData.inPreview() API,

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'Washington', text: 'Washington' },
            { value: new Date("2012/2/15"), text: '2/15/2012' },
            { value: 8000, text: '5 500' }
        ],
    ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []
slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]});
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
console.log(slicerData.inPreview()); // false
slicerData.clearPreview();
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
slicerData.doUnfilter('Name');
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []

slicerData.doFilter('Name', {exclusiveRowIndexes: [1, 2]}, true);
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // [0]
console.log(slicerData.inPreview()); // true
slicerData.clearPreview();
console.log(slicerData.inPreview()); // false
console.log(slicerData.getFilteredOutIndexes('Name', GC.Spread.Slicers.FilteredOutDataType.all)); // []

Returns

boolean

---

onColumnNameChanged

▸ onColumnNameChanged(oldName, newName): void

Changes a column name for the general slicer data.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
     [
          [
               { value: 'Bob', text: 'Bob' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1968/6/8"), text: '6/8/1968' },
               { value: 10000, text: '10 000' }
          ],
          [
               { value: 'Betty', text: 'Betty' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1972/7/3"), text: '7/3/1972' },
               { value: 8000, text: '8 000' }
          ]
     ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getExclusiveData('Name')); // ['Bob', 'Betty']
slicerData.onColumnNameChanged('Name', 'NewName');
console.log(slicerData.getExclusiveData('Name')); // []
console.log(slicerData.getExclusiveData('NewName')); // ['Bob', 'Betty']

Parameters

Name	Type	Description
oldName	string	The old name of the column.
newName	string	The new name of the column.

Returns

void

---

onColumnsRemoved

▸ onColumnsRemoved(colIndex, colCount): void

Removes columns of the general slicer data.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
     [
          [
               { value: 'Bob', text: 'Bob' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1968/6/8"), text: '6/8/1968' },
               { value: 10000, text: '10 000' }
          ],
          [
               { value: 'Betty', text: 'Betty' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1972/7/3"), text: '7/3/1972' },
               { value: 8000, text: '8 000' }
          ]
     ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onColumnsRemoved(0, 1);
console.log(slicerData.getData('Name')); // []

Parameters

Name	Type	Description
colIndex	number	The index of the starting column.
colCount	number	The number of columns to remove.

Returns

void

---

onDataChanged

▸ onDataChanged(changedDataItems): void

Changes data items in the data source of the general slicer data.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
     [
          [
               { value: 'Bob', text: 'Bob' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1968/6/8"), text: '6/8/1968' },
               { value: 10000, text: '10 000' }
          ],
          [
               { value: 'Betty', text: 'Betty' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1972/7/3"), text: '7/3/1972' },
               { value: 8000, text: '8 000' }
          ]
     ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onDataChanged([{columnName: 'Name', rowIndex: 1, row: 1, data: {value: 'Alice', text: 'Alice'}}]);
console.log(slicerData.getData('Name')); // ['Bob', 'Alice']

Parameters

Name	Type	Description
changedDataItems	ISlicerDataItem	The changed data item in the data source.

Returns

void

---

onFiltered

▸ onFiltered(): void

Occurs after the slicer data has been filtered.

Returns

void

---

onRowsAdded

▸ onRowsAdded(rowIndex, rowCount): void

Adds rows in the data source of the general slicer data.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
     [
          [
               { value: 'Bob', text: 'Bob' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1968/6/8"), text: '6/8/1968' },
               { value: 10000, text: '10 000' }
          ],
          [
               { value: 'Betty', text: 'Betty' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1972/7/3"), text: '7/3/1972' },
               { value: 8000, text: '8 000' }
          ]
     ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onRowsAdded(1, 2);
console.log(slicerData.getData('Name')); // ['Bob', undefined, undefined, 'Betty']

Parameters

Name	Type	Description
rowIndex	number	The index of the starting row.
rowCount	number	The number of rows to add.

Returns

void

---

onRowsRemoved

▸ onRowsRemoved(rowIndex, rowCount): void

Removes rows in the data source of the general slicer data.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
     [
          [
               { value: 'Bob', text: 'Bob' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1968/6/8"), text: '6/8/1968' },
               { value: 10000, text: '10 000' }
          ],
          [
               { value: 'Betty', text: 'Betty' },
               { value: 'NewYork', text: 'NewYork' },
               { value: new Date("1972/7/3"), text: '7/3/1972' },
               { value: 8000, text: '8 000' }
          ]
     ], ["Name", "City", "Birthday", "Salary"]
);
console.log(slicerData.getData('Name')); // ['Bob', 'Betty']
slicerData.onRowsAdded(1, 2);
console.log(slicerData.getData('Name')); // ['Bob', undefined, undefined, 'Betty']
slicerData.onRowsRemoved(2, 1);
console.log(slicerData.getData('Name')); // ['Bob', undefined, 'Betty']

Parameters

Name	Type	Description
rowIndex	number	The index of the starting row.
rowCount	number	The number of rows to remove.

Returns

void

---

resumeFilteredEvents

▸ resumeFilteredEvents(): void

Resumes the onFiltered event.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
    ], ["Name", "City", "Birthday", "Salary"]
);
//Define custom slicer.
function MySlicer(container) {
    this.container = container;
    this.slicerData = null;
    this.columnName = null;
}
MySlicer.prototype.setData = function (slicerData, columnName) {
    this.slicerData = slicerData;
    this.columnName = columnName;
    // attach listener here
    this.slicerData.attachListener(this);
}
MySlicer.prototype.onFiltered = function () {
    console.log('filter event triggered');
}
//create a custom slicer and add this slicer to the "slicerContainer" div.
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');
slicerData.doFilter('Name', {exclusiveRowIndexes: [1]});
// watch console log: 'filter event triggered'
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0]});
// watch console log: nothing
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0, 1]});
// watch console log: 'filter event triggered'

Returns

void

---

suspendFilteredEvents

▸ suspendFilteredEvents(): void

Suspends the onFiltered event.

example

var slicerData = new GC.Spread.Slicers.GeneralSlicerData(
    [
        [
            { value: 'Bob', text: 'Bob' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1968/6/8"), text: '6/8/1968' },
            { value: 10000, text: '10 000' }
        ],
        [
            { value: 'Betty', text: 'Betty' },
            { value: 'NewYork', text: 'NewYork' },
            { value: new Date("1972/7/3"), text: '7/3/1972' },
            { value: 8000, text: '8 000' }
        ],
    ], ["Name", "City", "Birthday", "Salary"]
);
//Define custom slicer.
function MySlicer(container) {
    this.container = container;
    this.slicerData = null;
    this.columnName = null;
}
MySlicer.prototype.setData = function (slicerData, columnName) {
    this.slicerData = slicerData;
    this.columnName = columnName;
    // attach listener here
    this.slicerData.attachListener(this);
}
MySlicer.prototype.onFiltered = function () {
    console.log('filter event triggered');
}
//create a custom slicer and add this slicer to the "slicerContainer" div.
var slicer = new MySlicer($("#slicerContainer")[0]);
slicer.setData(slicerData, 'Name');
slicerData.doFilter('Name', {exclusiveRowIndexes: [1]});
// watch console log: 'filter event triggered'
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0]});
// watch console log: nothing
slicerData.suspendFilteredEvents();
slicerData.doFilter('Name', {exclusiveRowIndexes: [0, 1]});
// watch console log: 'filter event triggered'

Returns

void