JavaScript
var db = {
loadData: function(filter) {
return $.grep(this.clients, function(client) {
return (!filter.Country || client.Country === filter.Country)
&& (!filter.State || client.State === filter.State);
});
}
};
window.db = db;
db.countries = [
{ Name: "", Id: 0, States: [] },
{ Name: "United States", Id: 1, States: [1, 2] },
{ Name: "Canada", Id: 2, States: [3, 4] },
{ Name: "Australia", Id: 3, States: [5, 6] },
{ Name: "New Zealand", Id: 4, States: [7, 8] },
{ Name: "UK", Id: 5, States: [9, 10] }
];
db.states = [
{ Id: 0, Name: "" },
{ Id: 1, Name: "A1" },
{ Id: 2, Name: "B1" },
{ Id: 3, Name: "A2" },
{ Id: 4, Name: "B2" },
{ Id: 5, Name: "A3" },
{ Id: 6, Name: "B3" },
{ Id: 7, Name: "A4" },
{ Id: 8, Name: "B4" },
{ Id: 9, Name: "A5" },
{ Id: 10, Name: "B5" }
];
db.clients = [
{
"Name": "Otto Clay",
"Country": 1,
"State": 1
},
{
"Name": "Connor Johnston",
"Country": 1,
"State": 2
},
{
"Name": "Lacey Hess",
"Country": 2,
"State": 3
},
{
"Name": "Timothy Henson",
"Country": 2,
"State": 4
}
];
$("#jsGrid").jsGrid({
width: "100%",
autosize: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
confirmDeleting: true,
deleteConfirm: "Are you sure you want to delete this item?",
controller: db,
fields: [
{
name: "Name",
type: "textarea",
width: 150
}, {
name: "Country",
type: "select",
items: db.countries,
valueField: "Id",
textField: "Name",
itemTemplate: function (countryId) {
...