Kendo Ui DataSource Add Function not working properly

Question

I defined a Kendo Data Source as below. It is populating values in a ListView.

 var datasourceAppList = new kendo.data.DataSource({
    transport: {
      create: function(options){
        //alert(options.data.desc);
        alert(options.data.desc);
        var localData = JSON.parse(localStorage.getItem("LsAppList"));
        localData.push(options.data);
        localStorage.setItem("LsAppList", JSON.stringify(localData)); //localStorage["LsAppList"] = JSON.stringify(localData); 
        options.success(localData);
      },
      read: function(options){ 
          var localData = JSON.parse(localStorage["LsAppList"]); 
          options.success(localData);
      },
      update: function(options){
        var localData = JSON.parse(localStorage["LsAppList"]); 
        for(var i=0; i<localData.length; i++){
          if(localData[i].extappId == options.data.extappId){
            localData[i].desc = options.data.desc;
            localData[i].deviceNo = options.data.deviceNo;
            localData[i].validationKey = options.data.validationKey;
          } 
        }
        localStorage["grid_data"] = JSON.stringify(localData); 
        options.success(localData);
      },
      destroy: function(options){ 
        var localData = JSON.parse(localStorage["LsAppList"]); 
        localData.remove(options.data.ID);
        localStorage["LsAppList"] = JSON.stringify(localData); 
        options.success(localData);
      },
    },
        schema: {
      model: {
        extappId: "ID",
        fields: {
          extappId: { type: "number" },
          desc: { type: "string" },
          deviceNo: { type: "number" },
          validationKey: { type: "string" }
        }}
    },
  });

First : I call the following code. it adds the data correctly both to te page listview and localStorage.

datasourceAppList.add({ extappId: "9905", desc: "test", deviceNo: "5", validationKey: "CACACACA"});

datasourceAppList.sync();

Second: I call the folowing code

datasourceAppList.add({ extappId: "9908", desc: "harvest", deviceNo: "7", validationKey: "ppppppp"});

datasourceAppList.sync();

Problems:

1. the page is showing the first record twice.
2. The localstorage has 2 times the first record and 1 time the second record.

what am I doing wrong?

--- one problem still exists. though the localStorage is correct, the listview is populating wrong.

First Record Add : ListView is Correct Second Record Add : ListView is Corract Third Record Add : First 2 lines shows the first record and the last line shows the last record.

My HTML code is

<div id="applications" data-role="view"  data-title="Defined Applications" data-layout="default" data-model="appdetail">
    <ul id="applist" data-role="listview" data-style="inset" data-source="datasourceAppList" data-template="tmp" data-click="listViewClick" data-auto-bind="true"></ul>


    <p align="center">
        <a  style="width: 30%" data-role="button" data-rel="modalview" data-click="showModalViewAdd" id="buttonAddApplication" data-icon="ecg-plus">Add</a>
        <a  style="width: 30%" data-role="button" data-rel="modalview" data-click="refreshApplicationList" id="buttonRefreshApplication" data-icon="refresh">Refresh</a>
    </p>

</div>

<script id="tmp" type="text/x-kendo-template">
    <a id = "#: extappId #">#: desc # </a>

</script>

Answer 1

It is actually a combined problem:

You schema definition is:

schema: {
    model: {
        extappId: "ID",
        fields: {
            extappId: { type: "number" },
            desc: { type: "string" },
            deviceNo: { type: "number" },
            validationKey: { type: "string" }
        }
    }
 }

It says extappId: "ID"... what is this? Do you want to say that extappId is the id of that record? If so, the actual definition should be:

schema: {
    model: {
        id: "extappId",
        fields: {
            extappId: { type: "number" },
            desc: { type: "string" },
            deviceNo: { type: "number" },
            validationKey: { type: "string" }
        }
    }
 }

What happens here is not being (correctly) defined the id, KendoUI expects that id is actually id and since this is not being set during the create next time that you sync it tries to save it, it is equivalent to:

datasourceAppList.add({ extappId: 9905, desc: "test", deviceNo: 5, validationKey: "CACACACA"});
datasourceAppList.add({ extappId: 9908, desc: "harvest", deviceNo: 7, validationKey: "ppppppp"});
datasourceAppList.sync();

But if you try this, you will see that then create is never invoked. Now what happens is that the id of the record (i.e. extappId) is already defined and not null and so KendoUI believes that is already saved.

For solving this second issue my recommendation is defining the schema as:

schema: {
    model: {
        id: "ID",
        fields: {
            extappId: { type: "number" },
            desc: { type: "string" },
            deviceNo: { type: "number" },
            validationKey: { type: "string" }
        }
    }
 }

Now, the id is a field called ID and this ID should be created on transport.create (cannot be set before invoking add method).

Then, you set it in create and you can use:

create: function(options){
    // Set `ID` to kendo.guid
    options.data.ID = kendo.guid();
    alert(options.data.desc);
    var localData = JSON.parse(localStorage.getItem("LsAppList"));
    localData.push(options.data);
    localStorage.setItem("LsAppList", JSON.stringify(localData)); //localStorage["LsAppList"] = JSON.stringify(localData); 
    options.success(localData);
},

Check it here : http://jsfiddle.net/OnaBai/n7sNd/3/