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())
});
});