Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Editing local data removes the row?

2 Answers 151 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 28 Apr 2015, 07:29 PM

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 Answers, 1 is accepted

Sort by
0
Andy
Top achievements
Rank 1
answered on 28 Apr 2015, 07:47 PM

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.  

0
Accepted
Alexander Popov
Telerik team
answered on 01 May 2015, 07:49 AM
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!
 
Tags
TreeList
Asked by
Andy
Top achievements
Rank 1
Answers by
Andy
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or