ColorPicker throws an error when cancelling changes in a grid

5 posts, 1 answers
  1. David Larkin
    David Larkin avatar
    5 posts
    Member since:
    Jun 2010

    Posted 28 Feb 2017 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    1452 posts

    Posted 02 Mar 2017 Link to this post

    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 visualization (charts) and form elements.
  3. David Larkin
    David Larkin avatar
    5 posts
    Member since:
    Jun 2010

    Posted 02 Mar 2017 in reply to Stefan Link to this post

    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

  4. Answer
    Stefan
    Admin
    Stefan avatar
    1452 posts

    Posted 06 Mar 2017 Link to this post

    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 visualization (charts) and form elements.
  5. David Larkin
    David Larkin avatar
    5 posts
    Member since:
    Jun 2010

    Posted 06 Mar 2017 Link to this post

    Thanks very much Stefan. The change you suggested works perfectly.
Back to Top