Editing local data removes the row?

3 posts, 1 answers
  1. Andy
    Andy avatar
    7 posts
    Member since:
    Mar 2014

    Posted 28 Apr 2015 Link to this post

    I'm trying to use a treelist to display some local data until I'm ready to submit it to the server.  Since it starts empty and it'll only be submitting later, which I'll be doing with a different bit of javascript, I don't have any ajax calls back to the server.  I just want it using local data.  I built the following example using your demo dojo.  

     

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
    </head>
    <body>
            <div id="example">
                <div id="treelist"></div>
              <button id="btnClick" onclick="clickMe()">Click Me</button>
                <script>
                    $(document).ready(function () {
                        var dataSource = new kendo.data.TreeListDataSource({
                            schema: {
                                model: {
                                    id: "id",
                                    expanded: true
                                }
                            }
                        });
     
                        $("#treelist").kendoTreeList({
                            dataSource: dataSource,
                            editable: true,
                            height: 540,
                            columns: [
                                { field: "Position" },
                                { field: "Name" },
                                { command: [ "edit" ] }
                            ]
                        });
                    });
                   
                  function clickMe(){
                     
                   $("#treelist").data("kendoTreeList").dataSource.add(
                     {
                       id: 123232,
                       parentId: null,
                       Position: "CEO",
                       Name: "Jeff Bezos"
                     });
                  }
                </script>
            </div>
     
     
    </body>
    </html>

    As you can see, it's a pretty simple example where I click a button to add a row to the treelist's datasource and the new row adds just fine.  The problem is when I try to edit the row after adding it.  When I click "Update" it just removes the row instead of saving the changes.  

    Please advise.  

  2. Andy
    Andy avatar
    7 posts
    Member since:
    Mar 2014

    Posted 28 Apr 2015 in reply to Andy Link to this post

    By the way, I'm able to successfully edit a row, if it's added using an array as part of creation.  As in the below example:  

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
            <div id="example">
                <div id="treelist"></div>
              <button id="btnClick" onclick="clickMe()">Click Me</button>
                <script>
                  var myData = [{
                       id: 123232,
                       parentId: null,
                       Position: "CEO",
                       Name: "Jeff Bezos"
                     }];
                   
                    $(document).ready(function () {
                        var dataSource = new kendo.data.TreeListDataSource({
                            data: myData,
                            schema: {
                                model: {
                                    id: "id",
                                    expanded: true
                                }
                            }
                        });
     
                        $("#treelist").kendoTreeList({
                            dataSource: dataSource,
                            editable: true,
                            height: 540,
                            columns: [
                                { field: "Position" },
                                { field: "Name" },
                                { command: [ "edit" ] }
                            ]
                        });
                    });
                   
                  function clickMe(){
                     
                   $("#treelist").data("kendoTreeList").dataSource.add(
                     {
                       id: 12,
                       parentId: null,
                       Position: "Sr Engineer",
                       Name: "Steve Woz"
                     });
                  }
                </script>
            </div>
     
     
    </body>
    </html>

    So Steve's row disappears, but Jeff's row edits just fine.  

  3. Kendo UI is VS 2017 Ready
  4. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 01 May 2015 Link to this post

    Hi Andy,

    Editing data without transport options is not supported, because in this case the pristine array is not getting updated, hence the disappearing items. You can try specifying the CRUD operations as JavaScript functions in case you wish to support local editing.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top