Grid editing with popup: cancel button disables editing for local datasource

3 posts, 0 answers
  1. Jordan
    Jordan avatar
    16 posts
    Member since:
    Nov 2007

    Posted 17 May 2016 Link to this post

    Hi,

    I'm relatively new to kendo, so the problem I'm encountering may be obvious to some. That said, I have searched google and these forums extensively and have not been able to figure out my issue.

    I'm using local data to populate a grid, and I find that canceling out of or closing the editor popup is breaking something. Specifically, after canceling out of editing, I can no longer open the editor for that item. I will include a short single page application below which demonstrates the issue I'm experiencing. To reproduce the bug, click the edit button on the 'pay bills' item, then click the cancel button on the popup editor. Then click the edit button on the same item again. Expected behavior: the editor pops up. Actual behavior: nothing happens.

    Of interest is that newly created items do not experience this issue. If you use the add button to create a 'pet the dog' item, you can edit, cancel, and edit again fine. Also, the other bound item, 'buy milk', will continue to work as long as you do not cancel out.

    I will be monitoring this thread to answer any and all questions and to provide any clarification requested. I appreciate in advance any help and support the community can provide. Thanks!

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KendoGridDemo.aspx.cs" Inherits="WebApplication1.KendoGridDemo" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title>Kendo Grid Demo</title>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" />   
    </head>
    <body>
        <form id="form1" runat="server">
         
            <div id="todo-grid"></div>
     
            <script id="todo-template" type="text/x-kendo-template">
                <div>
                    <label for="ItemText">Todo</label>
                    <input type="text" name="ItemText" required validationMessage="What do you have to do?" style="width: 350px;" />
                </div>
            </script>
     
            <script type="text/javascript">
                // Explanation: we are trying to set up a "Save/Cancel" model where all data
                // operations are performed in memory on the client. The user would then
                // click a save button which packages all the data and sends it to the
                // server for an atomic commit to the database. For that reason, we are
                // loading data into a local dataset and performing grid operations on
                // the local data, rather than using a remote transport to do real-time crud ops.
     
                // in our application, the source data comes from the server via a jquery ajax
                // call. for the purposes of this example we will use the array below.
                var _sourceData = [{ TodoID: 1, ItemText: "buy milk" }, { TodoID: 2, ItemText: "pay bills" }];
     
                // the remote data is shifted into this page variable
                var TodoData;
     
                // new items are given an id which is later adjusted by the server
                var TodoIDSeed;
     
                // this method is called after the ajax call retrieves data from the server.
                // we will simulate this using the _sourceData array.
                function LoadTodos(todos) {
     
                    // Dispose of any old data and set up an observable array
                    TodoData = new kendo.data.ObservableArray([]);
     
                    // shift the data out of the incoming source and into the local page variable
                    while (todo = todos.shift())
                        TodoData.push(todo);
     
                    // initialize the temporary ID seed for new todo items
                    TodoIDSeed = -1;
     
                    // create the datasource
                    var todoDataSource = new kendo.data.DataSource({
                        pageSize: 3,
                        schema: {
                            model: {
                                id: 'TodoID',
                                fields: {
                                    TodoID: { type: 'number', editable: false, defaultValue: 0 },
                                    ItemText: { type: 'string' }
                                }
                            }
                        },
                        transport: {
                            read: function (options) {
                                options.success(TodoData);
                            },
                            create: function (options) {
                                var item = options.data;
                                item.TodoID = TodoIDSeed--;
                                options.success(item);
                            },
                            update: function (options) {
                                options.success();
                            },
                            destroy: function (options) {
                                options.success();
                            }
                        }
                    });
     
                    // set the datasource and read the data
                    $('#todo-grid').data('kendoGrid').setDataSource(todoDataSource);
                    todoDataSource.read();
                }
     
                $(document).ready(function () {
     
                    // create the grid
                    $('#todo-grid').kendoGrid({
     
                        autoBind: false,
                        pageable: true,
                        height: 250,
                        toolbar: [{ name: 'create', text: 'Add' }],
     
                        columns: [{
                            field: "ItemText",
                            title: "Todo"
                        }, {
                            command: [{ name: 'edit', text: 'Edit' }, { name: 'destroy', text: 'Delete' }],
                            title: "Updates",
                            width: 170
                        }],
     
                        editable: {
                            mode: 'popup',
                            template: kendo.template($('#todo-template').html()),
                            window: { title: 'Add/Edit Todo Item', animation: false, width: 440, height: 200 },
                            confirmation: true,
                            confirmDelete: 'Yes'
                        }
                    });
     
                    // load the data
                    LoadTodos(_sourceData);
                });
     
            </script>
     
        </form>
    </body>
    </html>
  2. Jordan
    Jordan avatar
    16 posts
    Member since:
    Nov 2007

    Posted 17 May 2016 in reply to Jordan Link to this post

    Quick update: here's a jsbin that will run the example in your browser: http://jsbin.com/qalivereki/edit?html,js,output

     

  3. Jordan
    Jordan avatar
    16 posts
    Member since:
    Nov 2007

    Posted 18 May 2016 in reply to Jordan Link to this post

    Well, we fixed it. We discovered that the problem lay in loading the data as an observable array. I'm not sure whether we were populating it incorrectly or if it is not meant to be used in that fashion; we were doing it that way because we wanted to track changes using the change event of the class. I moved the change tracking into the transport and switched out the observable array for a plain old javascript array and the issue disappeared.
Back to Top