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

Source: Internet
Author: User

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

 

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: Add}, scrollable: false, toolbar: [{name: create, text: add 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) {$ (''). 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)

 

 

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.