ui.datafilter

webix.ui.datafilter

webix.ui.datafilter helper.

Please look into the linked official documentation.

References

helpers
_event(), ajax(), bind(), template().

Referenced by

views
datatable().

External references

Official documentation page.

Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
webix.ui.datafilter = {
    textWaitDelay:500,
    "summColumn":{
        getValue:function(node){ return node.firstChild.innerHTML; },
        setValue: function(){},
        refresh:function(master, node, value){
            var result = 0;
            master.mapCells(null, value.columnId, null, 1, function(value){
                value = value*1;
                if (!isNaN(value))
                    result+=value;
            }, true);

            if (value.format)
                result = value.format(result);
            if (value.template)
                result = value.template({value:result});

            node.firstChild.innerHTML = result;
        },
        trackCells:true,
        render:function(master, config){
            if (config.template)
                config.template = webix.template(config.template);
            return "";
        }
    },
    "masterCheckbox":{
        getValue:function(){},
        setValue:function(){},
        getHelper:function(node, config){
            return {
                check:function(){ config.checked = false; node.onclick(); },
                uncheck:function(){ config.checked = true; node.onclick(); },
                isChecked:function(){ return config.checked; }
            };
        },
        refresh:function(master, node, config){
            node.onclick = function(){
                this.getElementsByTagName("input")[0].checked = config.checked = !config.checked;
                var column = master.getColumnConfig(config.columnId);
                var checked = config.checked ? column.checkValue : column.uncheckValue;
                master.data.each(function(obj){
                    if(obj){ //dyn loading
                        obj[config.columnId] = checked;
                        master.callEvent("onCheck", [obj.id, config.columnId, checked]);
                        this.callEvent("onStoreUpdated", [obj.id, obj, "save"]);
                    }
                });
                master.refresh();
            };
        },
        render:function(master, config){
            return "<input type='checkbox' "+(config.checked?"checked='1'":"")+">";
        }
    },
    "textFilter":{
        getInputNode:function(node){ return node.firstChild?node.firstChild.firstChild:{ value: null }; },
        getValue:function(node){ return this.getInputNode(node).value;  },
        setValue:function(node, value){ this.getInputNode(node).value = value;  },
        refresh:function(master, node, value){
            node.component = master._settings.id;
            master.registerFilter(node, value, this);
            node._comp_id = master._settings.id;
            if (value.value && this.getValue(node) != value.value) this.setValue(node, value.value);
            node.onclick = webix.html.preventEvent;
            webix._event(node, "keydown", this._on_key_down);
        },
        render:function(master, config){
            if (this.init) this.init(config);
            config.css = "webix_ss_filter";
            return "<input "+(config.placeholder?('placeholder="'+config.placeholder+'" '):"")+"type='text'>";
        },
        _on_key_down:function(e, node, value){
            var id = this._comp_id;

            //tabbing through filters must not trigger filtering
            //we can improve this functionality by preserving initial filter value
            //and comparing new one with it
            if ((e.which || e.keyCode) == 9) return;

            if (this._filter_timer) window.clearTimeout(this._filter_timer);
            this._filter_timer=window.setTimeout(function(){
                webix.$$(id).filterByAll();
            },webix.ui.datafilter.textWaitDelay);
        }
    },
    "selectFilter":{
        getInputNode:function(node){ return node.firstChild?node.firstChild.firstChild:{ value: null}; },
        getValue:function(node){ return this.getInputNode(node).value;  },
        setValue:function(node, value){ this.getInputNode(node).value = value;  },
        refresh:function(master, node, value){
            //value - config from header { contet: }
            value.compare = value.compare || function(a,b){ return a == b; };

            node.component = master._settings.id;
            master.registerFilter(node, value, this);

            var data;
            var options = value.options;
            if (options){
                if(typeof options =="string"){
                    data = value.options = [];
                    webix.ajax(options).then(webix.bind(function(data){
                        value.options = data.json();
                        this.refresh(master, node, value);
                    }, this));
                } else
                    data = options;
            }
            else{
                data = master.collectValues(value.columnId);
                data.unshift({ id:"", value:"" });
            }

            var optview = webix.$$(options);
            if(optview && optview.data && optview.data.getRange){
                data = optview.data.getRange();
            }
            //slow in IE
            //http://jsperf.com/select-options-vs-innerhtml

            var select = document.createElement("select");
            for (var i = 0; i < data.length; i++){
                var option = document.createElement("option");
                option.value = data[i].id;
                option.text = data[i].value;
                select.add(option);
            }

            node.firstChild.innerHTML = "";
            node.firstChild.appendChild(select);

            if (value.value) this.setValue(node, value.value);
            node.onclick = webix.html.preventEvent;

            select._comp_id = master._settings.id;
            webix._event(select, "change", this._on_change);
        },
        render:function(master, config){
            if (this.init) this.$init(config);
            config.css = "webix_ss_filter"; return ""; },
        _on_change:function(e, node, value){
            webix.$$(this._comp_id).filterByAll();
        }
    }
};