Kendo UI Window with a loading indicator
HTML
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">
<div id="main-grid" />
<div id="win">
<div id="edit-grid" /></div>
<script>
function dirtyField(data, fieldName) {
if (data.dirty && data.dirtyFields && data.dirtyFields[fieldName]) {
return "<span class='k-dirty'></span>"
} else {
return "";
}
}
function travTemplate (item) {
if (!item) return "";
var l = [];
item.travelled.forEach(function (trav) {
l.push(trav.city + ":" + trav.year);
});
return l.join(", ");
};
</script>
CSS
html {
font:12px sans-serif
}
.k-window .k-loading-mask {
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
}
JavaScript
function travTemplate (item) {
if (!item) return "";
var l = [];
item.travelled.forEach(function (trav) {
l.push(trav.city + ":" + trav.year);
});
return l.join(", ");
};
function travelEditor(container, options) {
var dsTravel = [];
if (!options.model.travelled) options.model.travelled = [];
var cities = options.model.allowedto.split(",");
var tr = options.model.travelled.slice(0);
options.model.travelled.splice(0, options.model.travelled.length);
cities.forEach(function (cli) {
var t = {
city: cli,
year: 0
};
if (tr) {
tr.some(function (val) {
var found = val.city === cli;
if (found) t.year = val.year;
return found;
});
}
options.model.travelled.push(t);
});
$("#edit-grid")
.data("kendoGrid")
.dataSource.data(options.model.travelled);
winElement.data("kendoWindow").open();
}
$("#main-grid").kendoGrid({
toolbar: ["save", "cancel"],
height: 300,
autoBind: true,
dataSource: {
change: function (e) {
if (e.action == "itemchange") {
e.items[0].dirtyFields = e.items[0].dirtyFields || {};
e.items[0].dirtyFields[e.field] = true;
}
},
data: [{
id: 1,
name: "Jane Doe",
age: 30,
allowedto: "Dubai,London,Paris",
travelled: [{
city: "Dubai",
year: 2010
}, {
city: "London",
year: 2014
}]
}, {
id: 2,
name: "John Doe",
age: 33,
...