Hi,
I have a grid has its edit mode set to GridEditMode.InlineCell, and when I click on a particular cell I show a ColorPicker.
My grid definition is as follows:
@(Html.Kendo().Grid<
TelerikMvcApp1.Models.Item
>()
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.Id))
.Read(read => read.Action("GetItems", "Home"))
.Update(up => up.Action("UpdateItems", "Home")).Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.Color).Editable(true);
})
)
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(200);
columns.Bound(c => c.Color).ClientTemplate("#= Color # <
div
style
=
'background-color: #= Color #; padding:10px;'
></
div
>"); ;
})
.Pageable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e => e.Edit("onEdit"))
)
The grid onEdit event is as follows:
function
onEdit(e) {
if
(e.container.index() === 1) {
var
grid = e.sender;
var
colourPicker = $(
"#Color"
).data(
"kendoColorPicker"
);
var
originalColour = e.model.Color;
colourPicker.bind({
close:
function
() {
var
newColour =
this
.value();
console.log(
"old colour = "
+ originalColour +
", new colour = "
+ newColour);
if
(newColour !== originalColour) {
console.log(
"colour has changed"
);
grid.saveChanges();
}
else
{
console.log(
"colour has not changed"
);
grid.cancelChanges();
}
}
});
colourPicker.open();
}
}
The model bound to the grid is as follows:
public class Item
{
public int Id { get; set; }
[UIHint("ColorEditor")]
public string Color { get; set; }
}
The ColorEditor template is defined as follows:
@(Html.Kendo().ColorPicker()
.Name(
"Color"
)
.Value(
"#=Color#"
)
)
When the ColorPicker is displayed, I choose a colour, click Apply and then call saveChanges() on the grid so that I can update some data on the server. That all works fine.
The problem I have is that if I click Cancel (or click Apply without changing the color) I want to change the grid so that it is no longer in edit mode. I attempt to do that calling cancelChanges() on the grid. The call to cancelChanges() results in this error being thrown:
Uncaught TypeError: Cannot read property
'children'
of
null
at init.close (kendo.all.min.js:24)
at init.trigger (kendo.all.min.js:9)
at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (<anonymous>:587:33)
at init._trigger (kendo.all.min.js:20)
at init.close (kendo.all.min.js:20)
at init.close (kendo.all.min.js:24)
at init.cancel (kendo.all.min.js:24)
at init.trigger (kendo.all.min.js:9)
at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (<anonymous>:587:33)
at init._cancel (kendo.all.min.js:24)
Am I going about this the wrong way?
I have been able to reproduce this error with versions 2014.3.1411.545, 2015.3.1111.545 and 2017.1.223.545 of Kendo.Mvc.dll
Thanks,
David