SpreadJS Documentation
Using the Icon Set Rule

The icon set rule displays icons based on the values. You can specify the type of icon and whether to show the icon or the icon and the data in the cell. The following image displays icons and values.

You can specify many different types of icon sets with the iconSetType method and the IconSetType class. You can reverse the icon order with the reverseIconOrder method. You can use the showIconOnly method to display the icon or the icon and data.

You can also create custom icons for the icon set rule.

Using Code

This example creates an icon set rule.

JavaScript
Copy Code
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,15,3);
activeSheet.setValue(2,0,25,3);
activeSheet.setValue(3,0,-1,3);

var cfs = activeSheet.getConditionalFormats();
var iconSetRule = new GcSpread.Sheets.IconSetRule();
iconSetRule.ranges =[new GcSpread.Sheets.Range(0,0,4,1)];
iconSetRule.iconSetType(GcSpread.Sheets.IconSetType.FourTrafficLights);
var iconCriteria = iconSetRule.iconCriteria();
iconCriteria[0] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 1);
iconCriteria[1] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 10);
iconCriteria[2] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 20);
iconSetRule.reverseIconOrder(false);
iconSetRule.showIconOnly(false);
cfs.addRule(iconSetRule);

Using Code

This example creates custom icons for the icon set rule.

JavaScript
Copy Code
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,15,3);
activeSheet.setValue(2,0,25,3);
activeSheet.setValue(3,0,-1,3);

var base = GcSpread.Sheets.IconSetRule.getIcon;
GcSpread.Sheets.IconSetRule.getIcon = function (iconSetType, iconIndex) {
                    var icon = base.apply(this, arguments);
                    if (iconSetType === GcSpread.Sheets.IconSetType.ThreeArrowsColored) {
                        if (iconIndex === 0) {
                            return "images/Star2.png";
                        } else if (iconIndex === 1){
                            return "images/Rating4.png";
                        } else if (iconIndex === 2) {
                            return "images/Box4.png";
                        }
                    }
                    return icon;
                };


var cfs = activeSheet.getConditionalFormats();
var iconSetRule = new GcSpread.Sheets.IconSetRule();
iconSetRule.ranges =[new GcSpread.Sheets.Range(0,0,4,1)];
iconSetRule.iconSetType(GcSpread.Sheets.IconSetType.ThreeArrowsColored);
var iconCriteria = iconSetRule.iconCriteria();
iconCriteria[0] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 1);
iconCriteria[1] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 10);
iconCriteria[2] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 20);
iconSetRule.reverseIconOrder(false);
iconSetRule.showIconOnly(false);
cfs.addRule(iconSetRule);
See Also

 

 


Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.