1. Home
  2. Forum
  3. jQuery
  4. Return a json-type message to a kanban event when editing a card

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.


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. 


Loader.
Up arrow icon