This is a migrated thread and some comments may be shown as answers.

ColorPicker throws an error when cancelling changes in a grid

4 Answers 111 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
David Larkin
Top achievements
Rank 1
David Larkin asked on 28 Feb 2017, 11:08 AM

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

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 02 Mar 2017, 11:50 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
David Larkin
Top achievements
Rank 1
answered on 02 Mar 2017, 01:49 PM

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

0
Accepted
Stefan
Telerik team
answered on 06 Mar 2017, 07:37 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
David Larkin
Top achievements
Rank 1
answered on 06 Mar 2017, 12:35 PM
Thanks very much Stefan. The change you suggested works perfectly.
Tags
ColorPicker
Asked by
David Larkin
Top achievements
Rank 1
Answers by
Stefan
Telerik team
David Larkin
Top achievements
Rank 1
Share this question
or