Hi.
I am trying to build a kendo grid with a custom editor. My grid has 2 checkboxes that have custom designs. I was able to create a template to handle the custom checkboxes. However, I am having difficulty with having that same custom design working in the edit mode. I have posted below my code which includes how I intended the custom checkboxes to be built:
<
div
id
=
"grid"
class
=
"settings-grid patient-settings"
data-columns='[{title: "", width: "15px", attributes: {"class": "indent-cell"}},
{field: "select", title: "select", width: "40px", template: "#if (select) { # <
div
class=\"checkbox\"><
label
class=\"check-label\"><
input
type=\"checkbox\" name=\"check\" class=\"check\" checked=\"true\" disabled=\"true\"/> <
span
></
span
></
label
></
div
> # } else { # <
div
class=\"checkbox\"><
label
class=\"check-label\"><
input
type=\"checkbox\" name=\"check\" class=\"check\" disabled=\"true\"/> <
span
></
span
></
label
></
div
> # } #"},
{field: "description", title: "Description", attributes: {"class": "desc"}},
{field: "active", title: "Active", width: "63px", template: "# if (active) { # <
span
class=\"icon_check\"></
span
> # } #"},
{command: [ { name: "edit", text: {edit:"", update:"", cancel:""}}, {name: "destroy", text: "" }], title: "Actions", width: "15%"}]'>
<
script
type
=
"text/javascript"
>
var dataSource = new kendo.data.DataSource({
data: [
{
id: 1,
select: 0,
description: "Option text goes and so forth ...",
active: 0
}, {
id: 2,
select: 1,
description: "Option text goes right here and so forth ...",
active: 1
}, {
id: 3,
select: 1,
description: "Option text goes right here ...",
active: 1
}, {
id: 4,
select: 1,
description: "Option text goes here ...",
active: 1
}
],
pageSize: 7,
schema: {
model: {
id: "id",
fields: {
select: {
type: "boolean",
editable: true,
nullable: false
},
description: {
type: "string",
editable: true ,
nullable: false
},
active: {
type: "boolean",
editable: true ,
nullable: false
}
}
}
}
});
// Create an observable object.
var vm = kendo.observable({
settings: dataSource
});
kendo.bind($("#grid"), vm);
</
script
>