We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Return a json-type message to a kanban event when editing a card

Thread ID:

Created:

Updated:

Platform:

Replies:

145187 Jun 11,2019 07:28 PM UTC Jun 14,2019 11:49 AM UTC jQuery 1
loading
Tags: ejKanban
Mauricio Hernandez
Asked On June 11, 2019 07:28 PM UTC

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.


Arun Palaniyandi [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon