В моем примере я использую DropdownList внутри ячейки Grid.
Я могу выбрать элемент из выпадающего списка, отредактировать его и удалить строку, но после всех изменений DataSource.parameterMap спит, и между сервером и DataSource не передается транспорт.
Эта проблема возникает, когда сетка настроена без опции toolbar: ["create", "save"], но только с toolbar: ["create"]. Я хочу отправлять изменения в режиме реального времени.
var allUsersDataSource = new kendo.data.DataSource({
transport: {
read: {
url: API + "nk/getusers",
dataType: "json"
}
},
});
allUsersDataSource.fetch(function() {
allUsers = allUsersDataSource.data();
})
var assignedUsersDataSource = new kendo.data.DataSource({
transport: {
read:{
url: API+"nk/getassignedusers/"+documentId,
dataType: "json"
},
create: {
type: "POST",
url: API+"nk/addusertodocument",
dataType: "json"
},
update: {
type: "POST",
url: API+"nk/editusertodocument",
dataType: "json"
},
destroy:{
type: "POST",
url: API+"nk/removeuserdocument",
dataType: "json"
},
parameterMap: function(data, operation) {
console.log ("parameterMap");
if (operation === "destroy" ) {
console.log("!!!!!!!!!!!!!!!destroy", data.models)
}
if (operation === "create" && data.UserID) {
console.log("!!!!!!kendo.stringify(data.models)", kendo.stringify(data.models))
console.log ("parameterMap: data.models: ",data.models);
console.log("parameterMap: data.UserID: ", data.UserID)
console.log("parameterMap: documentId: ", documentId)
return {
models: kendo.stringify(data.models),
user_id: data.UserID,
document_id: documentId,
api_key: '1aa53f75-55c8-41a7-8554-25e094c71b47',
user: user
};
}
}
},
change: function(e) {
console.log("!!!!!!change: e.action:: " + e.action);
console.log("!!!!!!change: e.action:: ", e);
console.log("!!!!!!change: e.action:: ", e.models);
console.log("!!!!!!change: e.action:: ", e.UserID);
},
pageSize: 4,
schema: {
model: {
fields: {
UserName: { editable: false, nullable: true },
Surname: { editable: false, nullable: true },
UserID: { field: "UserID", defaultValue: 1 },
GroupName: { editable: false, nullable: true },
}
}
}
});
var _grid = $("\#grid-single-user-groups").kendoGrid({
dataSource: assignedUsersDataSource,
filterable: true,
scrollable: false,
// toolbar: ["create", "save"],
toolbar: ["create"],
pageable: true,
columns: [
{
field: "UserID", width: "100%",
editor: userDropDownEditor,
title: "Agent",
template: function(userID) {
for (var idx = 0, length = allUsers.length; idx < length; idx++) {
if (allUsers[idx].UserNameID == userID.UserID) {
return allUsers[idx].Login;
}
}
}
},
{ command: [ "destroy"], title: " ", width: "250px" }
],
editable: {mode: "incell"},
save: function(e) {
if (e.values.UserID !== "") {
if (e.values.UserID !== e.model.UserID) {
console.log("!!!UserID is modified");
}
} else {
e.preventDefault();
console.log("UserID cannot be empty");
}
if (e.values.UserName !== "") {
if (e.values.UserName !== e.model.UserName) {
console.log("!!!UserName is modified");
}
} else {
e.preventDefault();
console.log("UserName cannot be empty");
}
},
saveChanges: function(e) {
if (!confirm("Are you sure you want to save all changes?")) {
e.preventDefault();
}else{
console.log("!!!!confirmeddddddd", documentId)
$.ajax({
url: API+"nk/removeuserdocument",
type: 'POST',
dataType: "json",
data: {
api_key: '1aa53f75-55c8-41a7-8554-25e094c71b47',
user: user,
documentId: documentId
},
success : function(response) {
console.log("Pomyslnie usunięto wszystkich użytkowników.", response)
},
error: function(xhr, status, error) {
alert(xhr.responseText);
var err = eval("(" + xhr.responseText + ")");
console.log("NIE usunięto użytkowników.", err.Message)
}
});
}
},
remove: function(e) {
console.log("!!!!!Removing", e.model.UserID);
},
cellClose: function(e){
console.log('Closing Cell Edit e::', e);
console.log('Closing Cell Edit e.type::', e.type);
console.log('Closing Cell Edit e.container::', e.container);
console.log('Closing Cell Edit e.model::', e.model);
console.log('!!!! Closing Cell Edit e.model.UserID::', e.model.UserID);
console.log('Closing Cell Edit e.model.isNew()::', e.model.isNew());
console.log('Closing Cell Edit e.sender ::', e.sender );
e.container.find("input[name=id]")
}
});
function userDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Login",
dataValueField: "UserNameID",
filter: "contains",
dataSource: allUsersDataSource,
valuePrimitive:true,
select: function(e) {
if (e.item) {
var dataItem = this.dataItem(e.item);
console.log("event :: select (" + dataItem.Login + " : " + dataItem.UserNameID + ")");
} else {
console.log("nie jest dobrze");
}
}
})
}
Если сетка настроена с опцией сохранения: toolbar: ["create", "save"] и появляется кнопка Сохранить изменения (для всех изменений в сетке), при нажатии этой кнопки вызывается параметр Map для каждой строки в сетке, но у меня возникла новая проблема: теперь мне нужно удалить базу данных данные, относящиеся к этой сетке, и заново создайте все данные, и это вызывает проблему: (после удаления всех данных базы данных, связанных с сеткой), для создания новых строк отправляется несколько почтовых запросов на сервер (для каждой строки сетки) один за другим и сервер не может сохранить эти новые данные; например, с той же сеткой из 3 строк, один раз нажав «Сохранить изменения», сохранив 1 строку, в другой раз сохранив 2 строки, другой раз сохранив 3 или 0 строк.