JSGrid Multiselect
HTML
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div id="jsGrid"></div>
CSS
.jsgrid-cell1 {
overflow: hidden;
}
.jsgrid-pager1 { text-align: center; }
JavaScript
var data = [
{
"Name": "Test Test",
"TA": [1],
"Married": false
},
{
"Name": "Connor Johnston",
"TA": [2],
"Married": false
},
{
"Name": "Lacey Hess",
"TA": [1],
"Married": false
},
{
"Name": "Timothy Henson",
"TA": [2],
"Married": false
}
];
var transitAgencies= [{
ID: 1,
TAName: "Test1"
}, {
ID: 2,
TAName: "Test2"
}];
var MultiselectField = function(config) {
jsGrid.Field.call(this, config);
};
MultiselectField.prototype = new jsGrid.Field({
items: [],
textField: "",
itemTemplate: function(value) {
return $.makeArray(value).join(", ");
},
_createSelect: function(selected) {
var textField = this.textField;
var $result = $("<select>").prop("multiple", true);
$.each(this.items, function(_, item) {
var value = item[textField];
var $opt = $("<option>").text(value);
if($.inArray(value, selected) > -1) {
$opt.attr("selected", "selected");
}
$result.append($opt);
});
return $result;
},
insertTemplate: function() {
var insertControl = this._insertControl = this._createSelect();
setTimeout(function() {
//insertControl.multiselect({
// minWidth: 140
//});
});
return insertControl;
},
insertValue: function() {
return this._insertControl.find("option:selected").map(function() {
return this.selected ? $(this).text() : null;
});
}
});
jsGrid.fields.multiselect = MultiselectField;
$("#jsGrid").jsGrid({
height: 300,
width: "100%",
paging: true,
autoload: true,
inserting: true,
pageSize: 2,
controller: {
loadData:...