SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage User Interface / Row Filtering / Customize Row Filter Actions
In This Topic
    Customize Row Filter Actions
    In This Topic

    You can customize actions before and after filtering.

    To customize the row filter actions, do the following:

    1. Create a new class extended from the RowFilterBase.
    2. Override the onFilter method and handle the filter.

    You can do the following to customize the unfilter actions:

    1. Create a new class extended from the RowFilterBase.
    2. Override the onFilter method and handle the unfilter.

    The following image displays highlighted rows that are created using custom filter actions.

    Customizing filter actions

    Using Code

    The following code highlights filtered rows by extending the RowFilterBase class and overriding the onFilter method.

    JavaScript
    Copy Code
    $(function () {
                var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
                var activeSheet = spread.getActiveSheet();
                spread.suspendPaint();
                activeSheet.setColumnWidth(0, 100);
                activeSheet.setColumnWidth(1, 200);
                activeSheet.addSpan(0, 0, 1, 2);
                activeSheet.getCell(0, 0).value("Students' Math Scores").hAlign(GC.Spread.Sheets.HorizontalAlign.center);
                activeSheet.setValue(1, 0, "Name");
                activeSheet.setValue(1, 1, "SCORE");
                var score = [
                    {name: "Simon", score: 59},
                    {name: "Jack", score: 70},
                    {name: "Lily", score: 86},
                    {name: "Bob", score: 54},
                    {name: "Lucy", score: 84},
                    {name: "John", score: 99}
                ];
                for (var i = 0, len = score.length; i < len; i++) {
                    var student = score[i];
                    activeSheet.setValue(i + 2, 0, student.name);
                    activeSheet.setValue(i + 2, 1, student.score);
                }
                var b1 = new GC.Spread.Sheets.CellTypes.Button();
                b1.text("Filter Score < 60");
                activeSheet.setCellType(8, 1, b1);
                var b2 = new GC.Spread.Sheets.CellTypes.Button();
                b2.text("Unfilter this column");
                activeSheet.setCellType(9, 1, b2);
    
                function HighLightFilter(range) {
                    GC.Spread.Sheets.Filter.RowFilterBase.call(this, range);
                }
                HighLightFilter.prototype = new GC.Spread.Sheets.Filter.RowFilterBase();
                HighLightFilter.prototype.onFilter = function (args) {
                    if (!args) {
                        return;
                    }
                    var sheet = args.sheet, range = args.range, filterRows = args.filteredRows, filterActionType = args.action;
                    if (filterActionType === GC.Spread.Sheets.Filter.FilterActionType.Filter) {
                        if (range.col < 0) {
                            range.col = 0;
                            range.colCount = sheet.getColumnCount();
                        }
                        for (var i = 0, len = filterRows.length; i < len; i++) {
                            var r = filterRows[i];
                            for (var c = range.col, len1 = range.col + range.colCount; c < len1; c++) {
                                sheet.getCell(r, c).backColor("red");
                            }
                        }
                        sheet.setValue(9, 1, "Highlight the score less than 60");
                    } else if (filterActionType === GC.Spread.Sheets.Filter.FilterActionType.Unfilter) {
                        if (range.col < 0) {
                            range.col = 0;
                            range.colCount = sheet.getColumnCount();
                        }
                        for (var i = 0, len = filterRows.length; i < len; i++) {
                            var r = filterRows[i];
                            for (var c = range.col, len1 = range.col + range.colCount; c < len1; c++) {
                                sheet.getCell(r, c).backColor(undefined);
                            }
                        }
                    }
                }
                var hlf = new HighLightFilter(new GC.Spread.Sheets.Range(2, 1, 6, 1));
                activeSheet.rowFilter(hlf);
                var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.NumberCondition,
                        {
                            compareType: GC.Spread.Sheets.ConditionalFormatting.GeneralComparisonOperators.LessThan,
                            expected: 60
                        });
                hlf.addFilterItem(1, condition);
                hlf.filterButtonVisible(false);
                spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args) {
                    if (args.row === 8) {
                        if (args.col !== undefined) {
                            hlf.filter(args.col);
                        }
                    } else if (args.row === 9) {
                        if (args.col !== undefined) {
                            hlf.unfilter(args.col);
                        }
                    }
                });
                spread.resumePaint(); 
            });