datasource.remove() not working

[CONSTANTIN]

Hello,

I'm experiencing some weird behaviour with the remove() method of Kendo 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  (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();
                                              });
},
})

[George]

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>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
  <script src="https://bs-static.cdn.telerik.com/1.6.2/everlive.all.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

 

 

[CONSTANTIN]

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