Im new to Kendo UI and just created my first listview as shown below.
Now when someone clicks one if the pictures, I want to show the editing template inside a Kendo Window.
Would be great if someone could help, im pretty much lost... since I did not find any concrete example for that.
block head
title #{application} · Inventory
link(rel='stylesheet', href='/lib/custom/custom.css')
link(rel='stylesheet', href='/lib/kendo/styles/kendo.default.min.css')
link(rel='stylesheet', href='/lib/kendo/styles/kendo.common.min.css')
script(src='/lib/jquery/dist/jquery.min.js')
script(src='/lib/kendo/js/kendo.web.min.js')
block content
.container
#example.k-content
.demo-section
#listView
#pager.k-pager-wrap
div#detailWindow
script#template(type='text/x-kendo-template')
<div class="product">
<h3>#:name#</h3>
<p>#:description#</p>
<a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
<a class="k-button k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
</div>
script#editTemplate(type='text/x-kendo-tmpl')
<div>
<dl>
<dt>Name</dt>
<dd><input type="text" data-bind="value:name" name="name" required="required" /></dd>
<dt>Tags</dt>
<dd><input type="text" data-bind="value:tags" name="tags" /></dd>
</dl>
<dt>Description</dt>
<dd><input type="text" data-bind="value:description" name="description" /></dd>
</dl>
<div>
<a class="k-button k-update-button" href="\\\#"><span class="k-icon k-update"></span></a>
<a class="k-button k-cancel-button" href="\\\#"><span class="k-icon k-cancel"></span></a>
</div>
</div>
script.
$(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/inventory/meshes/data/",
dataType: "json",
type: "GET",
beforeSend: function (req) {
req.setRequestHeader('X-CSRF-Token', '#{token}');
}
},
update: {
url: function (e) {
return "/inventory/meshes/data/" + e._id;
},
dataType: "json",
type: "POST",
beforeSend: function (req) {
req.setRequestHeader('X-CSRF-Token', '#{token}');
}
},
create: {
url: '/inventory/meshes/data/")',
dataType: "json",
type: "POST",
beforeSend: function (req) {
req.setRequestHeader('X-CSRF-Token', '#{token}');
}
},
destroy: {
url: function (e) {
return "/inventory/meshes/data/" + e._id;
},
dataType: "json",
type: "DELETE",
beforeSend: function (req) {
req.setRequestHeader('X-CSRF-Token', '#{token}');
}
}
},
pageSize: 15,
batch: false,
autoSync: true,
schema: {
parse : function(d) {
for (var i = 0; i < d.length; i++) {
if (d[i].meshes) {
return d[i].meshes;
}
}
return [];
},
model: {
id: "_id",
fields: {
name: { type: "string" },
tags: { type: "string" },
description: { type: "string" },
image: { type: "string" },
size: { type: "string" },
creator: { type: "string" }
}
}
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return kendo.stringify(options.models);
}
}
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
pageable: true,
navigatable: true,
editable: true,
selectable: true,
autoBind: true,
editTemplate: kendo.template($("#editTemplate").html()),
template: kendo.template($("#template").html())
});
});