Kendo ui grid creates a data row and adds it multiple times (kendo ui grid datasource multiple create) and kendodatasource

Kendo ui grid creates a data row and adds it multiple times (kendo ui grid datasource multiple create) and kendodatasource

Today I found a bug when I tested the data table created using the kendo ui grid. I used the function of automatically adding and Editing data in the kendo ui grid system, when adding a data record each time, you will find that the previously added data will be added again. View the official documentation, which indicates that the dataSource schema model id must be a unique key, and a data inclusion id must be returned after the data is added.

Var crudServiceBaseUrl = "/NFC"; var dataSource = new kendo. data. dataSource ({type: "json", transport: {read: {url: crudServiceBaseUrl + "/SearchNFC", type: "POST", dataType: "json", data: additionalData}, create: {url: crudServiceBaseUrl + "/AddNFC", type: "Post", dataType: "json"}, update: {url: crudServiceBaseUrl + "/EditNFC ", type: "Post", dataType: "json"}, destroy: {url: crudServiceBaseUrl + "/DeleteNfc", type: "Post", dataType: "json"}, parameterMap: function (options, operation) {if (operation = "destroy") {return {id: options. id };} else if (operation = "read") {return options;} else if (operation = "create") {if (options & options. workersCapStatus & options. workersCapStatus. id) {options. workersCapStatus = options. workersCapStatus. id;} return options;} else {return options ;}}, schema: {data: "data", total: "total", errors: "errors", model: {id: "id", fields: {id: {editable: false, nullable: true}, nfcIdNumber: {type: "string", nullable: true, validation: {required: {message: "encoding cannot be blank" }}}, nfcStatus: {defaultValue: 3, validation: {required: {message: "status cannot be blank" }}}, supplier: {type: "string", nullable: true}, manufacturer: {type: "string", nullable: true }}, error: function () {this. cancelChanges () ;}, pageSize: 20, serverPaging: true, batch: false });

Grid binding code

$ ("# Grid "). kendoGrid ({dataSource: dataSource, pageable: {refresh: true}, editable: {confirmation: true, mode: "popup", window: {title: "New "}}, scrollable: false, toolbar: [{name: "create", text: "New Device"}], columns: [{field: "nfcIdNumber", title: "encoding "}, {field: "nfcStatus", title: "status", editor: workersCapStatusDropDownEditor, template: workersCapStatusText}, {field: "supplier", title: "supplier" },{ field: "manufacturer", title: "manufacturer" },{ 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 ');}}});

Additional

Function additionalData () {} var data = [{id: 1, text: 'use', text_cn: 'In Use '}, {id: 2, text: 'idle ', text_cn: 'id'}, {id: 3, text: 'waitdistribution', text_cn: 'awaiting allocation'}, {id: 4, text: 'damage', text_cn: 'corrupt '}]; function workersCapStatusText (rowData) {var showText = ""; for (var I = 0; I <data. length; I ++) {if (data [I]. id = rowData. nfcStatus) {showText = data [I]. text_cn; break ;}} return showText;} function workersCapStatusDropDownEditor (container, options) {$ ('<input required data-text-field = "text_cn" data-value-field = "id" data-bind = "value:' + options. field + '"/> '). appendTo (container ). kendoDropDownList ({autoBind: false, dataSource: data });}

Summary:

Cause Analysis: schema data and total used in this program. During read, the information is obtained based on the schema, that is, the remote data format of read is {data: [], total: 123, error: ""}. However, when we use the create method and the update method, datasource also obtains information based on this, when we create a new data record and update a data record, only the updated data record will be returned, causing the data to be read and not updated.

Note:

1. The batch settings in datasource are not required or set to false.

Solution:

1. Use the method of the above Code to add the requestEnd method to datasource, add the parse method to schema, update the format of the updated or new data, and return it. (The server returns a single piece of data)

2. The server returns the same data format as read. {Data: [], total: 123}. Here, a single piece of data to be returned is contained in data. (Ps feels this function is a bit disgusting and does not like it)

If you have any questions, please send me an insite email. It takes a lot of effort to solve the problem, which is disgusting...

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.

ASPNET (C #) MVC JsonResult Kendo Grid

1. take a look at the API public class HomeController: Controller {// GET:/Home/public ActionResult Index () {return View ();} public ActionResult BindDataTable () {var dt = new DataTable (); dt. columns. add ("Id"); dt. columns. add ("Name"); for (int I = 0; I <20; I ++) {var dr = dt. newRow (); dr ["Id"] = I; dr ["Name"] = "" + I; dt. rows. add (dr);} var json = DataTableToJson (dt); JavaScriptSerializer ser = new JavaScriptSerializer (); var list = ser. deserialize <dynamic> (json); return Json (list, JsonRequestBehavior. allowGet);} [NonAction] public string DataTableToJson (DataTable dt) {StringBuilder Json = new StringBuilder (); Json. append ("["); if (dt. rows. count> 0) {for (int I = 0; I <dt. rows. count; I ++) {Json. append ("{"); for (int j = 0; j <dt. columns. count; j ++) {Json. append ("\" "+ dt. columns [j]. columnName. toString () + "\": \ "" + dt. rows [I] [j]. toString () + "\" "); if (j <dt. C ...... remaining full text>