Medryx Observations

<div dojoType="dojox.Grid" store="store">
	<div dojoType="dojox.Grid.AutoFilterPlugin"></div>
</div>

	dojo.declare("MyGrid", [dojox.grid.DataGrid, medryx.widgets._GridPlugins.AutoFilter], {});

var layout = [
	{name: 'Alpha', field: 'col1', autoFilter:true},
	{name: 'Beta', field: 'col2'},
	{name: 'Gamma', field: 'col3'},
	{name: 'Delta', field: 'col4', width: "150px", autoFilter:true},
	{name: 'Epsilon', field: 'col5'},
	{name: 'Nexilon', field: 'col6'},
	{name: 'Zeta', field: 'col7'},
	{name: 'Eta', field: 'col1'},
	{name: 'Omega', field: 'col8'}
];

/**
 * This is an aspect to your grid that will add in AutoFilter ability to the grid
 * You must provide the filter function for your grid. If will be called with an object
 * {
 *      fieldName:filterValue,
 *      fieldName2:filterValue2
 *      
 * }
 * to attach this plugin to your grid you mix this in to your custom grid (last)
 * and then define a filter() method
 * 
 * TODO: [Blank] and multiple filters is still a little buggy
 * 
 * @author maulin
 */
dojo.provide("medryx.widgets._GridPlugins.AutoFilter");
dojo.require("dojox.lang.aspect");
dojo.require("medryx.widgets._GridPlugins._AutoFilterTooltip");
 
dojo.declare("medryx.widgets._GridPlugins.AutoFilter", null, {
 
	constructor:function() {
		this._filterableValues = [];
 
	},
 
	/**
	 * return a list of values that this column can be filter by,
	 * sorted alphabetically
	 * @param {Object} column
	 */
	getFilterableValues: function(column) {
	   	var values = this._filterableValues[column.index];
		return this.cleanFilterValues(values);
	},
 
	cleanFilterValues:function(values) {
		var unique = {};
 
        //get rid of duplicates
        return dojo.filter(values, function(value) {
            if (!unique[value]) {
                unique[value] = true;
                return true;
            }
            return false;
        }).sort();
	},
 
	/**
	 * add a string value to the list of all filterable values
	 * for a column
	 * @param {Object} column
	 * @param {Object} value
	 */
	addFilterableValue:function(column, value) {
		var columnIndex = column.index;
		if (!this._filterableValues[columnIndex]) {
			this._filterableValues[columnIndex] = [];
		}
		if (typeof(value) !== 'undefined' && value !== null) {
			this._filterableValues[columnIndex].push(value);
		}
	},
 
	updateFilter:function(filter) {
        if (this.filter) {
			this.filter(filter, true);
		}
    },
 
	updateFilterValue:function(column, value) {
		var filterField = {};
		filterField[column.field] = value;
 
		if (!this.filterFields) {
            this.filterFields = {};
        }
        if (filterField) {
            dojo.mixin(this.filterFields, filterField); //makes any other filters "sticky"
        }
 
		this.updateFilter(this.filterFields);
	},
 
	getTooltip:function(column) {
		if (!this.tooltips) {
			this.tooltips = [];
		}
		if (!this.tooltips[column.index]) {
			this.tooltips[column.index] = new medryx.widgets._GridPlugins._AutoFilterTooltip({column:column.name});
			dojo.connect(this.tooltips[column.index], "onValueChanged", dojo.hitch(this, "updateFilterValue", column));
		}
		return this.tooltips[column.index];
	},
 
	/**
	 * set "autoFilter:true" in your cell properties to get this to work
	 * @param {Object} e
	 */
	showFilterDialog:function(e) {
        if (e.cell.autoFilter) {
			this.getTooltip(e.cell).show(e.pageX, e.pageY, this.getFilterableValues(e.cell));
        }
    },
 
	postCreate:function() {
		var originalGet = this.get;
 
		this.get = function(inRowIndex) {
	        var value =  originalGet.apply(this, arguments);
	        this.grid.addFilterableValue(this, value);
	        return value;
         };
 
		dojo.connect(this, "onHeaderContextMenu", this, "showFilterDialog");
		return this.inherited(arguments);
	},
 
	toString:function() {
		return "AutoFilter Plugin";
	},
 
});

/**
 * Used by AutoFilter as a tooltip to set the filter value for a column.
 * Pass the values and coords and this will fire onValueSelected with 
 * a new filter value
 * 
 * @author maulin
 */
dojo.provide("medryx.widgets._GridPlugins._AutoFilterTooltip");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.Dialog");
 
 
//TODO: upgrade select to ComboBox
dojo.declare("medryx.widgets._GridPlugins._AutoFilterTooltip", [dijit._Widget, dijit._Templated], {
	templatePath: dojo.moduleUrl("medryx","widgets/_GridPlugins/_AutoFilterTooltip.html"),
	widgetsInTemplate:true,
	column:"Column",
 
	onValueChanged:function(value) {
    },
 
	_onChange:function(e) {
		if (this.values.selectedIndex === -1) {
			value = null;
		} else {
			value = this.values.options[this.values.selectedIndex].value;
		}
		this.onValueChanged(value);
		this.currentValue = value;
		this.close();
	},
 
	/**
	 * set the values of the selector
	 * @param {Object} values, array of strings
	 */
	updateValues:function(values) {
		var sel = this.values;
		sel.options.length = 0;//reset the options array
        sel.options[0] = new Option("Any", "*");
 
        var currentValue = typeof(this.currentValue) !== 'undefined'  ? this.currentValue : "*";
		var selectedIndex = 0;
 
		dojo.forEach(values, function(value) {
			if (value === currentValue) {
                selectedIndex = sel.options.length;
            }
			if (value)
            sel.options[sel.options.length] = new Option(value, value);
		})
 
	    if (currentValue == "") {
            selectedIndex = sel.options.length;
        }
		if (currentValue === "*") {
            selectedIndex = 0;
        }
		sel.options[sel.options.length] = new Option("[Blank]", "");
		sel.selectedIndex = selectedIndex;
	},
 
	/**
	 * show this dialog at the given coordinates, values
	 * @param {Object} x
	 * @param {Object} y
	 */
	show:function(x, y, values) {
		this.updateValues(values);
		dijit.popup.open({popup:this.tooltip, x:x, y:y});
	}, 
	close:function() {
		dijit.popup.close(this.tooltip);
	}
})