Return a json-type message to a kanban event when editing a card
Hello, first of all thank you for your help.
The drawback I have, is that I can not return a message from my webApp (mvc with c #) when I finish editing a card with drag and drop.
My control is parameterized in the following way:
var dataManager = ej.DataManager({
url: '/gestion/Kanban/getKanbanData/KAN_3',
crossDomain: true,
adaptor: "UrlAdaptor",
crudUrl: '/gestion/Kanban/EditKanban/KAN_3',
});
$("#Kanban").ejKanban(
{
dataSource: dataManager,
isResponsive: false,
allowToggleColumn: true,//t permite colapsa la columna, f no permite
columns: stateResponse,
keyField: "Status",
allowTitle: true,
locale: "es-ES",
isResponsive: false,
allowScrolling: true,
scrollSettings: {
width: "100%",
height: "100%"
},
fields: {
content: "Summary",
primaryKey: "Id",
title: "Title",
swimlaneKey: "Assignee",
tag: "Tags",
imageUrl: "UrlOpen"
},
cardSettings: {
template: "#template"
},
actionComplete: function (args) {
console.log("return actionComplete");
console.log(args);
UpdateAvatar();
},
allowSelection: false,
allowDragAndDrop: true,
allowEditing: true,
swimlaneSettings: {
allowDragAndDrop: true,
},
contextMenuSettings: {
enable: false,
},
dataBound: function (args) {
UpdateAvatar();
setStorageMemory();
},
cardDragStart: function (args) {
},
actionBegin: function (args) {
console.log("action begin");
console.log(args);
},
cardDragStop: function (args) {
console.log("cardDragStop");
console.log(args);
},
endEdit: function (args) {
console.log("endEdit");
console.log(args);
},
cardDrop: function (args) {
console.log("cardDrop");
console.log(args);
},
actionFailure: function (args) {
UpdateAvatar();
},
load: function (args) {
console.log("load");
console.log(args);
},
cardDoubleClick: function (args) {
loadingDisable();
if (args.data.Modal == "1") {
var url = '/' +args.data.UrlModal + args.data.Id;
var tituloAct = args.data.Title;
$.get(url, function (d) {
OpenModal(d, tituloAct, args.data.UrlEditMod, args.data.Id, '/');
}).done(function () {
loadingRemove();
});
} else if (args.data.Modal == "0") {
loadingRemove();
window.open('/' + args.data.UrlOpenDC + '', '_blank')
}
}
});
and my backend code to update the card is:
public ActionResult EditKanban(string id, List<KanbanData> changed, string sqlValues)
{string DataChanged;Message resultado = new Message();KanbanStructure Properties = getProperties(id, tokenId);if (changed != null && !string.IsNullOrEmpty(id)){var JsonData = JsonConvert.SerializeObject(changed,Formatting.Indented);DataChanged = JsonData.Replace('[', ' ').Replace(']', ' ').Trim();try{resultado = Repository.KanbanEdit(tokenId, DataChanged, id, Properties.SQL_Edit);}catch (Exception ex){return Json(new { code = "Err", status = "Fatal Error", desc = null }, JsonRequestBehavior.AllowGet);}return Json(new { code = resultado.Code, status = resultado.Status, desc = resultado.Description }, JsonRequestBehavior.AllowGet);}the incident comes in that no args of the events used in the definition of the kanban return the Json of my actionResult EditKanban, and I would like to be able to show an alert with that information. They could advise me on how I should proceed.
Best regards.
SIGN IN To post a reply.
1 Reply
AP
Arun Palaniyandi
Syncfusion Team
June 14, 2019 11:49 AM UTC
Hi Mauricio,
Thank you for contacting Syncfusion support.
To return a json-type message to the client from the controller, we can use the customadaptor in our Kanban to achieve this requirement. In the custom adaptor, the processResponse has to be overridden to process the data from the server. We have to extend the processResponse method of the ej.UrlAdaptor and in the extended method we can display the returned message.
The custom adaptor has to be given in the Kanban Load event. Please find the below code snippets.
|
<script type="text/javascript">
$(function () {
var dataManager = ej.DataManager({
url: 'GetData',
crossDomain: true,
adaptor: "UrlAdaptor",
crudUrl: 'Crud',
});
$("#Kanban").ejKanban(
{
dataSource: dataManager,
isResponsive: false,
.
.
.
load: function (args) { // load event
this.model.dataSource.adaptor = new customAdaptor();
}
});
var customAdaptor = new ej.UrlAdaptor().extend({
processResponse: function (data, ds, query, xhr, request, changes) {
if (data.success != undefined)
alert(data.success); // returned message displayed as alert
var obj = ej.UrlAdaptor.prototype.processResponse(data, ds, query, xhr, request, changes);
return obj;
},
});
</script>
Controller:
public ActionResult Crud(List<Task> changed, List<Task> added, List<Task> deleted)
{
.
.
.
.
var data = db.Tasks.ToList();
if (data != null)
return Json(new { result = data, success = "success" }, JsonRequestBehavior.AllowGet);
else
return Json(new { result = data, success = "failure" }, JsonRequestBehavior.AllowGet);
}
}
|
Please find the below sample for more reference.
Please let us know if you need any further assistance.
Regards,
Arun P.
SIGN IN To post a reply.
