JSGrid Custom Select

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>

CSS

.in-stock { background: lightgreen; }
.out-of-stock { background: lightyellow; }
.pending { background: skyblue; }

JavaScript

var data = [
    {
        "Status": "1",
        "Married": false
    },
    {
        "Status": "2",
        "Married": false
    },
    {
        "Status": "3",
        "Married": false
    },
    {
        "Status": "1",
        "Married": false
    }
];

$("#jsGrid").jsGrid({
        height: 300,
        width: "100%",
 			  editing: true,
        autoload: true,
 
        controller: {
        	loadData: function() {
          	return data;
          }
        },
        
        fields: [
            { name: "Status", type: "select", width: 50, css: "customfamilyfont", 
             items: [
               { Name: "In Stock", Id: "1"},
               { Name: "Out Of Stock", Id: "2"},
               { Name:"Pending", Id: "3"}
             ],
             valueField: "Id",
             textField: "Name",
             selectedIndex: 0,                   
             editTemplate: function() {
						 alert(JSON.stringify(arguments));
             		var $select = jsGrid.fields.select.prototype.editTemplate.apply(this, arguments);
                $select.find("option[value='1']").addClass("in-stock");
                $select.find("option[value='2']").addClass("out-of-stock");
                $select.find("option[value='3']").addClass("pending");
                return $select;
             }
             },
            { type: "control" }
        ]
    });