datasource.remove() not working

3 posts, 0 answers
  1. CONSTANTIN
    CONSTANTIN avatar
    2 posts
    Member since:
    Feb 2014

    Posted 15 Jan Link to this post

    Hello,

    I'm experiencing some weird behaviour with the remove() method of Kendo datasource bound to Telerik Backend Services.

    All CRUD operations work as expected as long as I don't reset the application.

    However, after I reset the application, I cannot delete previously added items anymore. I can edit them, add new ones - but I can't delete the old ones. The items are removed from the datasource (locally), but they are not deleted from the server.

    Here's the relevant part of my code

    <div data-role="view" id="ClientsView"
             data-model="clientsViewModel">
            <div data-role="header">
                <div data-role="navbar">
                    <span>Clients</span>
                    
                </div>
            </div>
       
            <div  >
                <a data-role="button" data-bind="click:CreateFunc">create</a>
                <a data-role="button" data-bind="click:deleteFunct">delete</a>
                

                    <ul data-role="listview" data-style="inset" 
                        data-bind="source: test"
                        data-template="customersTemplate">
                    </ul>
                </div>
           
    </div>
          <!-- Template for clients list -->
        <script id="customersTemplate" type="text/x-kendo-template" >
            <a  data-role="listview-link" ">
                    <div class="info">
                            <span class="name">#: name # </span>
                     </div>
            </a>
        </script> 

     

    ------------------ 

     

    var el  =new Everlive("gl6p2yayysidisxh");

    var clientsViewModel = kendo.observable({
       
         test : new kendo.data.DataSource({
                                                type: 'everlive',
                                                    transport: {
                                                        typeName: 'test'
                                                    },
                                                    schema: {
                                                        model: { id: Everlive.idField }
                                                    },
                                                  offlineStorage: "test-offline2",
                                                    }),
                                               CreateFunc: function(){

                                                        var data= clientsViewModel.test.data()
                                                                var itemToAdd = {
                                                                    'name': 'Harper Lee'
                                                                };
                                                               clientsViewModel.test.add(itemToAdd);
                                                                console.log(itemToAdd);
                                                                clientsViewModel.test.sync();
                                                },
                                            deleteFunct :function(){
                                                 clientsViewModel.test.fetch(function () {
                                                                var data= this.data()
                                                                console.log(data);

                                                             var itemToDelete = this.at(0);
                                                           this.remove(itemToDelete);
                                                            console.log(itemToDelete);

                                                         // Send the changes to Telerik Platform
                                                      this.sync();
                                                  });
    },
    })
  2. George
    Admin
    George avatar
    500 posts

    Posted 19 Jan Link to this post

    Hi Constantin,

    Thank you for reaching out to us.

    I reviewed your code and it seems fine, in fact, it is very close to our example CRUD Operations in the documentation.

    Perhaps there is a data source error which you can check in the error handler of the data source. Also, make sure that you are using the latest Everlive JS SDK.

    Also, I noticed that you are using the data source offline mode coming from the "vanilla" Kendo UI Data Source. You can read about the differences here.

    We prepared a simple example to demonstrate the above said which tries to follow the code snippet you supplied:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Untitled</title>
     
     
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      
      </head>
    <body>
      <div data-role="view" id="ClientsView"
             data-model="clientsViewModel">
            <div data-role="header">
                <div data-role="navbar">
                    <span>Clients</span>
                     
                </div>
            </div>
        
            <div>
                <a data-role="button" data-bind="click: CreateFunc">create</a>
                <a data-role="button" data-bind="click: deleteFunct">delete</a>
                 
     
                    <ul data-role="listview" data-style="inset"
                        data-bind="source: test"
                        data-template="customersTemplate">
                    </ul>
                </div>
            
    </div>
          <!-- Template for clients list -->
        <script id="customersTemplate" type="text/x-kendo-template" >
            <a  data-role="listview-link" >
                    <div class="info">
                            <span class="name">#: name # </span>
                     </div>
            </a>
        </script>
      <script>
     
          new kendo.mobile.Application(document.body);
     
          var el = new Everlive("gl6p2yayysidisxh");
     
          var clientsViewModel = kendo.observable({
     
              test: new kendo.data.DataSource({
                  type: 'everlive',
                  transport: {
                      typeName: 'test'
                  },
                  schema: {
                      model: { id: Everlive.idField }
                  },
     
                  error: function (args) {
                      alert("Data Source Error" + args.xhr.message);
                  }
              }),
              CreateFunc: function () {
     
                  var itemToAdd = {
                      'name': 'new'
                  };
                  clientsViewModel.test.add(itemToAdd);
                  clientsViewModel.test.sync();
              },
              deleteFunct: function () {
     
                  var itemToDelete = clientsViewModel.test.data().at(0);
                  clientsViewModel.test.data().remove(itemToDelete);
                  console.log(itemToDelete);
     
                  // Send the changes to Telerik Platform
                  clientsViewModel.test.sync();
              }
          })
      </script>
    </body>
    </html>

    If the problem persists, I would like to kindly ask you to submit an example showing the erroneous behavior in the kendo dojo. This will allow me to take investigate the problem at hand further.

    Looking forward to your reply.

    Regards,
    George
    Telerik
     
    Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
     
  3. CONSTANTIN
    CONSTANTIN avatar
    2 posts
    Member since:
    Feb 2014

    Posted 19 Jan in reply to George Link to this post

    Thanks George. You were absolutely right - I was using an older version of Everlive JS SDK. Updating to the latest version fixed the problem. 
Back to Top