Kendo Grid - edit mode when clicking a column template
I am using a template for an edit popup. I am trying to get the grid to go into edit mode and show an edit popup when a link is clicked in one of the columns.
I tried to use the command, but I am unable to bind the hyperlink text to the field declared in the model, in this case "CourseType". Is data binding supported on command columns ?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '<a href="\\#">#=CourseType#</a>',
width: 120
}
]
}
]
If data binding is not supported inside a command column, then how do I put the grid into edit mode when the template is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '<a href="\\#">#=CourseType#</a>'
}
]
source to share
I'm not sure why you want to define the cell as HTML anchor
, but there is no problem getting it into popup edit mode when clicking on the anchor.
1) Add a to your template class
, which will allow us to find these cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '<a href="\\#" class="ob-edit-popup">#=CourseType#</a>'
}
]
where I included class="ob-edit-popup"
in the template.
2) add an option to the mesh definition editable: "popup"
.
3) after initialization add the following JavaScript code.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid
is the result:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");
source to share