Click kendo ui to edit the data and click "cancel grid ".

Click kendo ui to edit the data and click "cancel grid ".

Click the cancel button to delete the data in the kendo ui. The reason is that after the grid completes editing a piece of data, it will go to the data array in datasorce to check whether the data exists. If the data exists, it will not be added, if it does not exist, add it.

First, let's take an example:

Html code:

<div id="smsReceivesGird" style="width: 500px;"></div>

Js Code:

<Pre name = "code" class = "html"> $ (function () {var smsReceivesData = eval ([{"name": "zzz", "mobileNumber ": "134 1853 8146" },{ "name": "zzz", "mobileNumber": "134 1853 8146" },{ "name": "zz", "mobileNumber ": "134 1853 8146"}]); // console. log (performancedata); var smsReceivesDataSource = new kendo. data. dataSource ({data: smsReceivesData, schema: {model: {id: "id", fields: {name: {type: "string"}, mobileNumber: {type: "string" }}, parse: function (data) {$. each (data, function (index, item) {item. id = index ;}); return data ;}, error: function () {// display_kendoui_grid_error (e); // Cancel the changes this. cancelChanges () ;}}); $ ("# smsReceivesGird "). kendoGrid ({type: "json", dataSource: smsReceivesDataSource, editable: {confirmation: true, mode: "popup", window: {title: "New" }}, scrollable: false, toolbar: [{name: "create", text: "add recipient"}], columns: [{field: "name", title: "name", width: "120px" },{ field: "mobileNumber", title: "mobile phone number", width: "150px" },{ command: [{name: "edit", text: {edit: "edit", cancel: "cancel", update: "update" }}, {name: "destroy", text: "delete"}], title: "& nbsp;", width: "260px"}], edit: function (e) {var editWindow = e. container. data ("kendoWindow"); if (e. model. isNew () {editWindow. title ('add');} else {editWindow. title ('editor ');}}});});

As follows:

Click to edit:

If no processing is performed, click Cancel:

This effect is not what we want to see. Now we take the following processing, in the schema of smsReceivesDataSource. add a field id: "id" to the model, and then add a parse anonymous function to the schema object. parse is the key, we do not have a key in this local array that uniquely identifies a row of data, so we need to build an Automatically increasing id, if a field that uniquely identifies a row of data can be used directly, you can save writing parse anonymous functions (for example, each object in a data group has a field named productid, then its value is the guid value, so we can write id: "productid "). The Code is as follows:

Var smsReceivesData = eval ([{"name": "zzz", "mobileNumber": "134 1853 8146" },{ "name": "zzz", "mobileNumber ": "134 1853 8146" },{ "name": "zz", "mobileNumber": "134 1853 8146"}]); // console. log (performancedata); var smsReceivesDataSource = new kendo. data. dataSource ({data: smsReceivesData, schema: {model: {id: "id", fields: {name: {type: "string"}, mobileNumber: {type: "string" }}, parse: function (data) {$. each (data, function (index, item) {item. id = index ;}); return data ;}, error: function () {// display_kendoui_grid_error (e); // Cancel the changes this. cancelChanges () ;}}); $ ("# smsReceivesGird "). kendoGrid ({type: "json", dataSource: smsReceivesDataSource, editable: {confirmation: true, mode: "popup", window: {title: "New" }}, scrollable: false, toolbar: [{name: "create", text: "add recipient"}], columns: [{field: "name", title: "name", width: "120px" },{ field: "mobileNumber", title: "mobile phone number", width: "150px" },{ command: [{name: "edit", text: {edit: "edit", cancel: "cancel", update: "update" }}, {name: "destroy", text: "delete"}], title: "", width: "260px"}], edit: function (e) {var editWindow = e. container. data ("kendoWindow"); if (e. model. isNew () {editWindow. title ('add');} else {editWindow. title ('editor ');}}});

Repeat the above steps and the effect will be different.

Summary:

1. schema. model. id in datasource indicates the unique field of a row of data.

2. there are two solutions to reduce the number of rows when editing cancel: ① id: "unique field in the array", ② build your own unique field, for example, the Code adds an id for each field in the parse anonymous method.

3. There is no difference between local data and remote data in the same solution.

The following C # code uses the gridview control. Why do you need to click Edit data twice? Why does the page remain in editing after you click Update Data?

You 'd better send your entire program and debug it easily. I can run it on my own client to see where the problem is. Personal Profile: Q, add me.

What is kendo ui? The source code I wrote down is html, css, and js.

The Kendo UI is built based on the latest WEB technologies HTML5, CSS3, and JavaScript.