Questions on Kendo UI for jQuery Forum

1 answer

147 views

Batch Edit and Editable Popup not working as expected.

Hi,
When using Batch mode and set editable to popup then every request is sent as if batch is set to false. To replicate it using the batch editing example http://demos.telerik.com/kendo-ui/grid/editing

Click the Edit this example and change the editable property of the grid from true to "popup" and then add, edit or delete something and you will notice that the corresponding request is sent straight away.

Is this a bug?

Grid

answered on 19 Aug 2015

2 answers

335 views

Donut label 'cut off'

Please see attached, I've got a basic donut, with three labels.

The label for the amber segment overlaps the boundary of the chart. - The label is only 8 characters long. 'Amber: 3'

I anticipated that the donut would reduce in size enough to fit the labels in.

The containing div is 260x260px.

Can you advise the best way to fix this?

Charts

answered on 19 Aug 2015

2 answers

356 views

Binding Map to local GeoJSON data

Hi,

Is it possible to bind the kendo map to local geojson data with the same format as the remote source?

For example this data is exactly the format I feed it: http://demos.telerik.com/kendo-ui/content/dataviz/map/countries-users.geo.json
but then stored in a local variable like "mapData" in the following example.

$("#participantMap").kendoMap({
            center: [51.5000,0.11],
            zoom: 6,
            layers: [{
                    type: "shape",
                    dataSource: {
                        type: "geojson",
                        data: mapData
                    },
                    style: {
                        fill: {
                            opacity: 0.7
                        }
                    }
                }]
        });

Ideally it would work with the AngularJS directive but I don't find a working example of it using local geojson data.

Has anyone tried this before?

thanks,

Arno

Map

answered on 19 Aug 2015

1 answer

135 views

Offline data source with add/update errors using odata, web api 2 and local storage

Hello,

I have been prototyping offline storage with kendo.

I was able to follow this example and get read to work from local storage with odata.
http://telerikhelper.net/2015/03/05/kendo-ui-data-source-offline-storage-odata-v2-cannot-read-data-from-offline-storage/

However, when I go to update the server by switching to online I run into several problems.

1. I have to manually delete a __state__ field.
2. There seems to always be one blank record in local storage that have to exclude. Not sure why it is there.
3. Fails validation errors.

Are there any examples of offline odata sources synching with the server?
Ideally, I could find an example without a grid but otherwise an update of the grid in the sample project "odata-v4-web-api-binding" showing offline sync would be very helpful.

jb

Data Source

answered on 19 Aug 2015

1 answer

102 views

Cannot save data from inline editing

I recently tried the facility for CRUD data using inline editing, I just tried to run the save command but failed. I combine three files:
1. SQL to store data that has been inputted
2. Javascript to run commands on kendo ui.
3. PHP as an object that is used as a variable for the operation of the data.

I have successfully used this concept to the method of the popup, but for my inline application failed. ask for help. Thank you

Grid

answered on 19 Aug 2015

4 answers

879 views

Lookup Field in Grid's Popup

I am developing a Grid form with Popup editing function. There is a Lookup field called Level. A LevelCode will be searched for the corresponding LevelName.

The following is an example.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.1.429/styles/kendo.dataviz.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.1.429/styles/kendo.dataviz.default.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">

<script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>

</head>

<body>

<div id="MainSection">

<div id="recGrid"></div>

</div>

<script>

$(document).ready(function () {

var demoData =

[{"TaskID":1,"UserGroup":"UG","RuleName":"UG 2015","Level":{"LevelCode":"UG","LevelName":"Undergraduate"},"CatalogTerm":"201509,201601","StudentType":"1,2","IDType":"HKID","IDNum":"1,2,3,4,5","AdmitTerm":"201409","ProgramCode":"","IlpInd":"","RuleComment":"This is a rule for UG 201509 student"},{"TaskID":2,"UserGroup":"UG","RuleName":"UG 2014","Level":{"LevelCode":"GR","LevelName":"Taught Postgraduate"},"CatalogTerm":"","StudentType":"","IDType":"SID","IDNum":"1,3,5,7,9","AdmitTerm":"","ProgramCode":"","IlpInd":"","RuleComment":"This is a rule which uses Student ID for checking"},{"TaskID":3,"UserGroup":"UG","RuleName":"ILP","Level":{"LevelCode":"DL","LevelName":"Diploma Level"},"CatalogTerm":"","StudentType":"1,3,4","IDType":"","IDNum":"","AdmitTerm":"","ProgramCode":"","IlpInd":"EAF","RuleComment":"This is a rule for ILP"}];

var levelData = [{"LevelCode":"AD","LevelName":"Associate Degree"},{"LevelCode":"DL","LevelName":"Diploma Level"},{"LevelCode":"FD","LevelName":"Pre-Associate Degree"},{"LevelCode":"HD","LevelName":"Higher Diploma Level"},{"LevelCode":"VD","LevelName":"Advanced Diploma"},{"LevelCode":"UG","LevelName":"Undergraduate"},{"LevelCode":"GR","LevelName":"Taught Postgraduate"}];

dataSource = new kendo.data.DataSource({

data: demoData,

batch: true,

pageSize: 20,

schema: {

model: {

id: "RuleTableID",

fields: {

TaskId: { from: "TaskID", type: "number" },

RuleName: { from: "RuleName", validation: { required: true } },

Level: { from: "Level", validation: { required: true }, defaultValue: { LevelCode: "UG", LevelName: "Undergraduate"} },

CatalogTerm: { from: "CatalogTerm" },

StudentType: { from: "StudentType" },

IDType: { from: "IDType" },

IDNum: { from: "IDNum" },

ProgramCode: { from: "ProgramCode" },

MajorCode: { from: "MajorCode" },

RuleComment: { from: "RuleComment" }

}

});

$("#recGrid").kendoGrid({

dataSource: dataSource,

pageable: true,

toolbar: ["create", "excel"],

height: 480,

groupable: true,

sortable: true,

selectable: "multiple",

reorderable: true,

resizable: true,

filterable: true,

pageable: {

refresh: true,

pageSizes: true,

buttonCount: 5

},

columns: [

{ field: "RuleName", title: "Rule Name", width: "120px" },

{ field: "Level", title: "Level", editor: levelDropDownEditor, template: "#=Level.LevelName#" },

{ field: "CatalogTerm", title: "Catalog Term" },

{ field: "StudentType", title: "Student Type" },

{ field: "IDType", title: "HKID/Student ID", editor: idTypeEditor },

{ field: "IDNum", title: "Last ID Digit" },

{ field: "AdmitTerm", title: "Admit Term" },

{ field: "ProgramCode", title: "Program Code" },

{ field: "MajorCode", title: "Major Code" },

{ field: "IlpInd", title: "Exclude ABS & Fulfilled" },

{ field: "RuleComment", title: "Comment", width: "200px" },

{ command: ["edit", "destroy"], title: " ", width: "200px" }],

editable: "popup",

cancel: function(e) {

e.sender.refresh();

e.preventDefault()

}

});

function idTypeEditor(container, options) {

var str = '<input type="radio" name="idType" id="idType_HKID" class="k-radio">';

str = str + '<label class="k-radio-label" for="idType_HKID">HKID</label>' ;

str = str + '<input type="radio" name="idType" id="idType_SID" class="k-radio">';

str = str + '<label class="k-radio-label" for="idType_SID">Student ID</label>';

$(str).appendTo(container);

}

function levelDropDownEditor(container, options) {

$('<input required data-text-field="LevelName" data-value-field="LevelCode" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

autoBind: false,

dataSource: levelData

});

}

</script>

</body>

</html>

The Grid form was able to display the LevelName.

However, when I click Edit button, there is a Javascript error.

If I remove the following from kendoGrid, the Popup form can be shown while the Level field will display [object Object].

editor: levelDropDownEditor,

Please see the captured screen dump.

Please advise.

Regards

Terence

DropDownList

answered on 19 Aug 2015

1 answer

135 views

Navigatable grid with Cascading dropdowns

Hi,

I am trying to set up a kendo UI grid with cascading dropdown. I have attached the sample HTML file I am using.

I am able to bind the grid with the data. But the cascading drop down seem to fail. Is it required the grid to be in inline edit mode so that the cascading drop downs are visible?

<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script src="../../js/products.js"></script>
<script>

var catAreaListNames=[{ "AreaId": 188, "AreaName": "Construction", "CategoryId": 35 },
{ "AreaId": 193, "AreaName": "Process Equipment", "CategoryId": 35 },
{ "AreaId": 164, "AreaName": "All Standards", "CategoryId": 2 },
{ "AreaId": 24, "AreaName": "Asbestos", "CategoryId": 2 },
{ "AreaId": 119, "AreaName": "Behavior Based Safety", "CategoryId": 2 },
{ "AreaId": 165, "AreaName": "Housekeeping ", "CategoryId": 5 }];
var taskList = [{id:"1921273", TaskId:"1921273", CategoryId:35, sortCategoryId:"MOC", AreaId:"0", sortArea:"",Task:"Test Task ", RQD:"", sortRQD:"", DueDate:"", PPR:"", sortPPR:"", Comments:"", CompletedDate:"", LockCoreFields:"false", IsDeleted:"false", HasAssessment:"false", AllLocked:"false", lTaskOccurrenceId:"3249927",Category:{CategoryId:35,CategoryName:"MOC"},Area:{AreaId:0,AreaName:""}},{id:"-1", TaskId:"-1", CategoryId:0, sortCategoryId:"", AreaId:"0", sortArea:"",Task:"", RQD:"0", sortRQD:"", DueDate:"", PPR:"0", sortPPR:"0", Comments:"", CompletedDate:"", LockCoreFields:"false", IsDeleted:"false", HasAssessment:"false", AllLocked:"false", lTaskOccurrenceId:"0",Category:{CategoryId:0,CategoryName:""},Area:{AreaId:0,AreaName:" "}}];
var Category = [{CategoryId:0,CategoryName:""},{CategoryId:48,CategoryName:"BMP"},{CategoryId:3,CategoryName:"CPS"},{CategoryId:36,CategoryName:"Elec"},{CategoryId:37,CategoryName:"Engg"},{CategoryId:1,CategoryName:"Env"},{CategoryId:44,CategoryName:"General"},{CategoryId:38,CategoryName:"HR"},{CategoryId:45,CategoryName:"IFC"},{CategoryId:39,CategoryName:"Inst"},{CategoryId:50,CategoryName:"Inv"},{CategoryId:40,CategoryName:"Lab"},{CategoryId:41,CategoryName:"Maint"},{CategoryId:35,CategoryName:"MOC"},{CategoryId:5,CategoryName:"OTHER"},{CategoryId:42,CategoryName:"Prod"},{CategoryId:23,CategoryName:"Prod Stew"},{CategoryId:32,CategoryName:"PS"},{CategoryId:43,CategoryName:"Purch"},{CategoryId:12,CategoryName:"QUALI"},{CategoryId:2,CategoryName:"Safety"}];

var pprList = [{id:"123213", type:"1", name:"Rakesh ", email:""}];
var pprListString = '';
var requiredList = '0:;1:T;2:S;3:D;4:N';



var catArea=[{"AreaId":0,"AreaName":""}];
function predicatBy(prop) {
return function (a, b) {
if (a[prop] > b[prop]) {
return 1;
} else if (a[prop] < b[prop]) {
return -1;
}
return 0;
}
}
catAreaListNames = catAreaListNames.sort(predicatBy("AreaName"));
function categoryDropDownEditor(container, options) {
$('<input id="Category" name="Category" required data-text-field="CategoryName" data-value-field="CategoryId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: Category

})
};
function AreaDropDownEditor(container, options) {
$('<input id="catAreaListNames" name="catAreaListNames" required data-text-field="AreaName" data-value-field="AreaId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: catAreaListNames, cascadeFrom: "Category"

})
};
function dueDateEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker({});
}
function compDateEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker({});
}
</script>


</head>
<body>

<a class="offline-button" href="../index.html">Back</a>


<div id="example">
<div id="grid"></div>

<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: taskList,
schema: {
model: {
fields: {
lTaskOccurrenceId: { type: "number", editable: false },
Category: { defaultValue: { CategoryId: 0, CategoryName: "" } },
Area: { defaultValue: { AreaId: 0, AreaName: "" } },
}
}
},
pageSize: 10

},

navigatable: true,
sortable: true,

columns: [
{ field: "lTaskOccurrenceId", title: " ", width: 75, editable: false },
{ field: "CategoryId", title: "Cat", width: 120, editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
//{ field: "CategoryId", title: "Cat", width: 120,editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{
//The modelId column
title: "Area",
width: 150,
field: "AreaId", // bound to the modelId field
template: "#=catAreaListNames.AreaName#", //the template shows the name corresponding to the modelId field
editor: AreaDropDownEditor

},
//{ field: "Area",title: "Area", width: 150 },
{ field: "Task", title: "Task", width: 200 },
{ field: "RQD", title: "RQD", width: 100 },
{ field: "PPR", title: "PPR", width: 100 },
{ field: "DueDate", title: "Due Date", format: "{0:MM-dd-yyyy}", editor: dueDateEditor },
{ field: "CompletedDate", title: "Completed", width: 100, format: "{0:MM-dd-yyyy}", editor: compDateEditor },
{ field: "Comments", title: "Comments", width: 200 },
{ field: "IsDeleted", title: "IsDeleted", hidden: true },
{ command: "destroy", title: " ", width: 95 }],

editable: true
});
});
</script>

</div>

<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}

.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>

<script>


</script>

</body>
</html>

Grid

answered on 18 Aug 2015

3 answers

661 views

Grid Functions in Javascript Files

I would like to create certain functions that can be called by Grids (and other widgets for that matter), not in the Grid's view, but an associated Javascript file so that multiple views can use them.

I have included an example below.

If it was included in the View, then I can use 'this', but I don't believe that works in a separate JavaScript file.

Independent JavaScript File

// Draw Contract Overview Grid Charts

function updateGridRows(e) {

// need to get calling Grid / GridName here

var gridName = ???;

var grid = $("#" + gridName).data("kendoGrid");

// update grid rows .....

}

Calling Grid View (of which there are others)

@(Html.Kendo().Grid<ContractModel>()

.Name("ContractGrid")

// columns .....

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("ReadContractGrid", "Home").Data("getDataSourceParameters"))

.Update(update => update.Action("UpdateContract", "Contracts"))

.Model(model =>

{

model.Id(contract => contract.ID);

})

)

.Events(e =>

{

e.DataBound("updateGridRows");

})

)

Grid

answered on 18 Aug 2015

3 answers

221 views

Timeline Fit To Screen

Is there a way to get the timeline view to fit to the screen size? This way the user doesn't have to keep scrolling to see the whole day at once. The width and height of each hour cell is quite larger than it needs to be.

Thanks in advance, Scott

Scheduler

answered on 18 Aug 2015

3 answers

149 views

Additional Fields in the custom edit page throwing exception

Hi there,

I'm trying to add an extra field called 'attendees' to my custom edit page. My initial intent is to schedule a room with participating members and NOT grouping the members but the rooms

However, whenever I run it, i get the exception 'c is undefined'. Please see my code below.

Script

define([

'plugins/router',

'global/session',

'services/security/map/general',

'services/security/employee/general',

'services/logger'

],

function (router, session, mapService, employeeService, logger) {

var vm = function () {

var self = this;

self.title = "Room Reservations";

self.floorId = ko.observable();

self.floorList = ko.observableArray();

self.reservationList = ko.observableArray();

self.personList = ko.observableArray();

self.roomList = ko.observableArray();

self.session = session;

self.dropDownConfig = {

dataTextField: "FullName",

dataValueField: "Id",

dataSource: self.floorList,

value: self.floorId,

index: 0,

};

self.floorId.subscribe(function (row) {

for (var i = 0; i < self.floorList().length; i++) {

self.roomList([]);

if (self.floorList()[i].Id == row) {

self.roomList($.map(self.floorList()[i].Rooms, function (e) {

return { value: e.Id, text: e.Name };

}));

self.getReservations(row);

break;

}

};

});

self.activate = function () {

return $.when(mapService.getFloorWithReservations(), employeeService.getPeople({

PersonTypeId: null,

DepartmentId: null

}))

.then(function (getAllFloors, getPeople) {

if (getAllFloors.OperationStatus == "Success") {

self.floorList([]);

self.floorList(getAllFloors.ReturnValue);

}

if (getPeople.OperationStatus == "Success") {

self.personList([]);

self.personList(getPeople.ReturnValue);

}

})

.fail(function () {

})

.always(function () {

session.isBusy(false);

});

};

self.attached = function () {

};

self.binding = function () {

self.roomList([]);

if (self.floorList().length) {

self.roomList($.map(self.floorList()[0].Rooms, function (e) {

return { value: e.Id, text: e.Name };

}));

self.getReservations(self.floorList()[0].Id);

}

};

self.deactivate = function () {

var scheduler = $("#scheduler").data("kendoScheduler");

if (scheduler != null) {

scheduler.destroy();

$("#scheduler").empty();

}

};

self.getReservations = function (floorId) {

session.isBusy(true);

return mapService.getReservations({ FloorId: floorId })

.done(function (getReservations) {

if (getReservations.OperationStatus == "Success") {

self.reservationList([]);

self.reservationList($.map(getReservations.ReturnValue, function (e) {

return {

meetingID: e.Id,

title: e.Title,

start: new Date(moment(e.Start).format('L hh:mm a')),

end: new Date(moment(e.End).format('L hh:mm a')),

description: e.Description,

recurrenceId: e.RecurrenceId,

recurrenceRule: e.RecurrenceRule,

recurrenceException: e.RecurrenceException,

roomId: e.RoomId,

attendees: e.Attendees,

}

}));

}

console.log(self.reservationList())

return self.loadScheduler();

})

.fail(function () {

})

.always(function () {

session.isBusy(false);

});

};

self.loadScheduler = function () {

var scheduler = $("#scheduler").data("kendoScheduler");

if (scheduler != null) {

scheduler.destroy();

$("#scheduler").empty();

}

$("#scheduler").kendoScheduler({

currentTimeMarker: false,

allDaySlot: false,

showWorkHours: true,

//majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'h')#</strong><sup>00</sup>"),

date: new Date(),

startTime: new Date(getDateTime('07', getMonday(new Date()).getDate())),

endTime: new Date(getDateTime('20', getMonday(new Date()).getDate())),

mobile: true,

workDayStart: new Date(getDateTime('08', getMonday(new Date()).getDate())),

workDayEnd: new Date(getDateTime('19', getMonday(new Date()).getDate())),

//height: 700,

views: [

{

type: "day",

selected: true,

eventTemplate: $("#event-template").html(),

messages: {

allDay: "All Day"

},

//{

// type: "month",

// group: {

// orientation: "vertical"

// }

//},

//{ type: "week", selected: true },

//"month",

"agenda",

//"timeline"

],

//majorTick: 1440,

minorTickCount: 4,

//selectable: true,

editable: {

template: $("#editor-template").html(),

editRecurringMode: "series",

confirmation: "Are you sure you want to delete this meeting?",

window: {

title: "My Custom Title",

animation: false

//open: myOpenEventHandler

}

},

edit: function (e) {

var attendees = e.container.find("#attendees").kendoMultiSelect({

valuePrimitive: true,

dataTextField: "Name",

dataValueField: "Id",

dataSource: self.personList()

}).data("kendoMultiSelect");

var start = e.container.find("#start").kendoDateTimePicker({

interval: 15

}).data("kendoDateTimePicker");

var end = e.container.find("#end").kendoDateTimePicker({

interval: 15

}).data("kendoDateTimePicker");

start.timeView.options.min = new Date(getDateTime('08', getMonday(new Date()).getDate()));

start.timeView.options.max = new Date(getDateTime('18', getMonday(new Date()).getDate()));

end.timeView.options.min = new Date(getDateTime('08', getMonday(new Date()).getDate()));

end.timeView.options.max = new Date(getDateTime('18', getMonday(new Date()).getDate()));

},

save: function (e) {

console.log(e)

if (!checkAvailability(e.event.start, e.event.end, e.event)) {

e.preventDefault();

}

},

dataBinding: function (e) {

//var tables = $(".k-scheduler-times .k-scheduler-table");

////Required: remove only last table in dataBound when grouped

//tables = tables.last();

//var rows = tables.find("tr");

//rows.each(function () {

// $(this).children("th:last").hide();

//});

var tables = $(".k-scheduler-times .k-scheduler-table");

tables.first().find("tr").eq(1).hide();

tables = $(".k-scheduler-header-wrap .k-scheduler-table");

tables.first().find("tr").eq(1).hide();

},

dataBound: function (e) {

//var scheduler = this,

// view = this.view(),

// firstTr = view.table.find("tr").eq(1);

// console.log(view)

},

dataSource: self.reservationList(),

group: {

resources: ["Rooms"],

//orientation: "vertical"

},

resources: [

{

field: "roomId",

name: "Rooms",

dataSource: self.roomList(),

title: "Room"

},

{

field: "attendees",

dataSource: self.roomList(),

multiple: true,

title: "Attendees"

}

],

footer: false

});

};

return vm;

});

HTML

<style type="text/css">

.invalid-slot {

background: red !important;

cursor: no-drop;

}

</style>

<div class="col-md-12">

<div class="col-md-6">

<h2 data-bind="text: title"></h2>

</div>

<div class="col-md-6">

<input style="width: 350px; float: right;" data-bind="kendoDropDownList: dropDownConfig" />

</div>

<div class="col-md-12">

<div style="margin-bottom: 20px;" id="scheduler"></div>

<script id="event-template" type="text/x-kendo-template">

<span>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</span>

<i class="fa fa-lock"> </i>

<div>

# for (var i = 0; i < resources.length; i++) { #

#: resources[i].text #

# } #

</div>

</script>

<script id="editor-template" type="text/x-kendo-template">