JSGrid Dependent Filters

by Danish Farman

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsGrid"></div>

JavaScript

department_list = [
    { "id": 1, "department":"Department A" },
    { "id": 2, "department":"Department B" }
];

team_list = [
    { "department":"Department A", "id": 1, "team":"Team A" },
    { "department":"Department B", "id": 2, "team":"Team B" },
    { "department":"Department B", "id": 3, "team":"Team C" }
];

/*select_list = [
    {Name:"", id:"1"},
    {Name:"select1 value1",id:"2", type:"TypeA"},
    {Name:"select1 value2",id:"2",type:"TypeA"},
    {Name:"select2 value1",id:"3",type:"TypeB"},
    {Name:"select2 value1",id:"3",type:"TypeB"}
];*/

content = [
    {
        "id": 1,
        "activity_type": "CORE",
        "department": "Department B",
        "team": "Team B",
        "time": "864000"
    }
];
var TimeField = function(config){
		jsGrid.Field.call(this,config);
	};
	
	TimeField.prototype = new jsGrid.Field({
		
		css:"date-field",
		align:"right",
		
	
		itemTemplate: function(value){
			return Math.round(value/86400)+" d "+Math.round((value%86400)/3600)+" h ";
		},
		insertTemplate: function(value){
			console.log("insert");
			return this._insertTime = this._createTimeBox();
		},
		filterTemplate:function(value){
			return this._filterTime = this._createTimeBox();
		},
		editTemplate: function(value){
			console.log("edit");
		    return this._editTime = this._createTimeBox();
		},
		insertValue: function(){
			
			var days = this._insertTime.siblings("input")[0].value;
			var hours = this._insertTime.siblings("input")[1].value;
			return days*86400+hours*3600;
		
		},
		eidtValue: function(){
		
			var days = this._editTime.siblings("input")[0].value;
			var hours = this._editTime.siblings("input")[1].value;
			return days*86400+hours*3600;
			
		},
		filterValue: function(){
			
			var days = this._filterTime.siblings("input")[0].value;
			var hours = this._filterTime.siblings("input")[1].value;
			return days*86400+hours*3600;
		
		},
		_createTimeBox: function() {
			return $("<input>").attr({"value":"value", "type":"number",...