ColorPicker throws an error when cancelling changes in a grid

[David Larkin]

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

[Stefan]

Hello David,

I was not able to reproduce the same issue on my end.

Please check the attached example which is using a ColorPicker like an editor in the Grid.

If additional assistance is needed, please modify the provided example or send a new one which is reproducing the issue, so I will assist further.

Regards,
Stefan
Telerik by Progress

[David Larkin]

Hi Stefan,

Your sample does indeed work without throwing that error. It is a bit different to my scenario because I do not have, or want, the 'Save changes' and 'Cancel changes' buttons on the grid's toolbar. Instead, I want to save or cancel the changes programmatically using the Grid JS API.

The attached project reproduces the error that I am getting.

Thanks,

David

[Stefan]

Hello David,

Thank you for the runnable example.

After inspecting it, I notice that this is a timing issue as the popup is still not closed when the cancelChanges is called.

I can suggest calling the cancelChanges method inside a setTimeout function to ensure that the popup will be closed and the method is called at the right time:

else {
 console.log("colour has not changed");
 setTimeout(function () {
  grid.cancelChanges();
  })
}

I hope this will help to resolve the issue.

Regards,
Stefan
Telerik by Progress

[David Larkin]

Thanks very much Stefan. The change you suggested works perfectly.