I am using the following components:
Kendo 2015.3.1111 Commercial
jQuery 2.1.4
I have 2 grids setup with DragDrop. Each grid is bound to a kendo.data.DataSource. If a user removes an item from one grid and then decides to add that item back (before saving to the remote data source) I would like to cancelChanges on the datasource bound to the grid for the one item that was previously removed. This will prevent a remote destroy and remote create call for this one item where the user changed his/her mind.
* Everything else works in this configuration except the cancelChanges(model) call. I do not receive an error on the cancelChanges call, but the item does not go back to its pristine state and remains in the destroyed collection. When I make the sync call, the item is destroyed on the remote data. DataSource documentation suggests that cancelChanges will meet my needs. Please let me know where I am going wrong.
Here is my code in the Drop event of the grid. (DataSource config is below the Drop Code) Thanks for your help.
Ben
gridUserRoles.element.kendoDropTarget({
drop:
function
(e) {
if
(viewModel.get(
'isInputEnabled'
)) {
var
dataItem = rolesNotAssignedDataSource.getByUid(e.draggable.currentTarget.data(
"uid"
));
rolesNotAssignedDataSource.remove(dataItem);
var
destroyedData = rolesDataSource.destroyed();
if
(destroyedData.length > 0) {
//see if tenantApplicationRoleKey is in the already destroyed items of the datasource
for
(
var
i = 0; i < destroyedData.length; i++) {
if
(dataItem.tenantApplicationRoleKey === destroyedData[i].tenantApplicationRoleKey) {
//Cancel destroy for this one item
var
itemToRestore = destroyedData[i];
rolesDataSource.cancelChanges(itemToRestore);
return
;
}
}
}
var
addItem = {
tenantApplicationRoleId: dataItem.tenantApplicationRoleId,
tenantApplicationRoleKey: dataItem.tenantApplicationRoleKey,
name: dataItem.name,
tenantUserTenantApplicationRoleKey: 0,
tenantUserKey: viewModel.get(
'selectedUser.tenantUserKey'
)
};
rolesDataSource.add(addItem);
}
rolesDataSource =
new
kendo.data.DataSource({
schema: {
model: {
id:
'tenantUserTenantApplicationRoleKey'
,
fields: {
tenantUserTenantApplicationRoleKey: {type:
'number'
},
createdByTenantUserName: { type:
'string'
, editable:
false
},
createdOnDate: { type:
'date'
, editable:
false
},
modifiedByTenantUserName: { type:
'string'
, editable:
false
},
modifiedOnDate: { type:
'date'
, editable:
false
},
name: { type:
'string'
, validation: { required:
true
} },
tenantApplicationRoleId: { type:
'string'
, validation: { required:
true
} },
tenantApplicationRoleKey: { type:
'number'
, validation: { required:
true
} },
tenantUserKey: { type:
'number'
, validation: {required:
true
}}
},
errors:
'message'
}
},
error:
function
(e) {
console.log(e.xhr.responseText);
var
errorString = config.getErrorMessage(e);
viewModel.set(
'showAlert'
,
true
);
viewModel.set(
'alertMessage'
, errorString);
kendo.ui.progress(editWindow.element,
false
);
},
transport: {
read: {
type:
'GET'
,
url: config.apiUrl +
'api/Users/0/Roles'
,
dataType:
'json'
,
contentType:
"application/json"
,
beforeSend:
function
(req) {
req.setRequestHeader(
'Authorization'
,
'Bearer '
+ user.userProfile.token);
}
},
create: {
type:
'POST'
,
url:
function
(e) {
return
config.apiUrl +
'api/Users/'
+ e.tenantUserKey +
'/Roles'
;
},
dataType:
'json'
,
contentType:
"application/json"
,
beforeSend:
function
(req) {
req.setRequestHeader(
'Authorization'
,
'Bearer '
+ user.userProfile.token);
}
},
destroy: {
type:
'DELETE'
,
url:
function
(e) {
return
config.apiUrl +
'api/Users/'
+ e.tenantUserKey +
'/Roles/'
+ e.tenantUserTenantApplicationRoleKey;
},
//dataType: 'json',
contentType:
"application/json"
,
beforeSend:
function
(req) {
req.setRequestHeader(
'Authorization'
,
'Bearer '
+ user.userProfile.token);
}
},
parameterMap:
function
(data, type) {
if
(type !==
'read'
) {
return
kendo.stringify(data);
}
}
}
});