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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Kanban doesn't work with JSON data

Kanban doesn't work with JSON data

Hi!
I was following the online documentation for the KanbanBoard.

In my controller I got rid of the ViewBag and changed the ActionResult to JsonResult.

        public JsonResult KanbanFeatures()
        {
            Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Andrew Fuller", 1));
            Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew Fuller", 1));
            Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", 2));
            Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", 2));
            Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Andrew Fuller", 1));
            Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Janet", 1));
            Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Janet", 4));
            Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Andrew Fuller", 2));
            Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Janet", 2));
            Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Andrew Fuller", 3));

            return Json(Task, JsonRequestBehavior.AllowGet);
        }
    }
    public class Tasks
    {
        public Tasks()
        {
        }
        public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, int RankId)
        {
            this.Id = Id;
            this.Status = Status;
            this.Summary = Summary;
            this.Type = Type;
            this.Priority = Priority;
            this.Tags = Tags;
            this.Estimate = Estimate;
            this.Assignee = Assignee;
            this.RankId = RankId;
        }
        public int Id { get; set; }
        public string Status { get; set; }
        public string Summary { get; set; }
        public string Type { get; set; }
        public string Priority { get; set; }
        public string Tags { get; set; }
        public double Estimate { get; set; }
        public string Assignee { get; set; }
        public int RankId { get; set; }
    }

With Postman I get the following output (only showing two here to save space)

[
    {
        "Id": 1,
        "Status": "Open",
        "Summary": "Analyze the new requirements gathered from the customer.",
        "Type": "Story",
        "Priority": "Low",
        "Tags": "Analyze,Customer",
        "Estimate": 3.5,
        "Assignee": "Andrew Fuller",
        "Image": "../content/images/kanban/1.png",
        "RankId": 1
    },
    {
        "Id": 2,
        "Status": "InProgress",
        "Summary": "Improve application performance",
        "Type": "Improvement",
        "Priority": "Normal",
        "Tags": "Improvement",
        "Estimate": 6,
        "Assignee": "Andrew Fuller",
        "Image": "../content/images/kanban/2.png",
        "RankId": 1
    },
   {
      ... 
   }

Here the view:

<div class="col-md-10">
        @(Html.EJ().Kanban("Kanban")
                    .DataSource(ds => ds.URL("/Settings/KanbanFeatures"))
                    .Columns(col =>
                    {
                        col.HeaderText("Backlog").Key("Open").Add();
                        col.HeaderText("In Progress").Key("InProgress").Add();
                        col.HeaderText("Done").Key("Close").Add();
                    })
                    .AllowTitle(true)
                    .AllowSelection(true)
                    .KeyField("Id")
                    .Fields(field =>
                    {
                        field.Color("Type")
                            .Content("Id")
                            .PrimaryKey("Id");
                    })
                    .CardSettings(card =>
                    {
                        card.ColorMapping(color =>
                        {
                            color.Add("#cb2027", "Bug,Story")
                                .Add("#67ab47", "Improvement")
                                .Add("#fbae19", "Epic")
                                .Add("#6a5da8", "Others");
                        });
                    })

        )
    </div>

I tried to just show the Id's but it doesn't work. It only shows "No cards to display"

Why does this happen?


5 Replies
BS Buvana Sathasivam Syncfusion Team September 8, 2017 12:35 PM UTC

Hi Paul Kocher, 

Thanks for using Syncfusion Products. 

Based on the shared code details, it seems that you are using URL to controller that returns a JSON data and this issue occurs because of missing adaptor. We have prepared Kanban sample using DataManager.  DataManager uses three adaptors to process data.  You can use the UrlAdaptor of DataManager when binding DataSource from remote data.  Using Url property of Kanban, data are fetched from remote data and bound to Kanban.  If you use UrlAdaptor, the response from server should be wrapped in an object with properties named result to hold the data and count to hold the total records count.URL property is used to load data into Kanban board and Adaptor property is used to define the dataManager. 

Please find the below code. 

KanbanFeatures.cshtml 

@(Html.EJ().Kanban("Kanban") 
          .DataSource(ds => ds.URL("GetData").Adaptor(AdaptorType.UrlAdaptor)) 
) 

KanbanController.cs 

public JsonResult GetData(Syncfusion.JavaScript.DataManager value) 
        { 
            Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Andrew Fuller", "../content/images/kanban/1.png", 1)); 
            Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew Fuller", "../content/images/kanban/2.png", 1)); 
            …………………… 
            DataResult result = new DataResult(); 
            DataOperations operation = new DataOperations(); 
            result.result = Task;  // result holds data 
            result.count = Task.AsQueryable().Count();  //count holds card count 
            if (value.Skip > 0) 
                result.result = operation.PerformSkip(result.result, value.Skip); 
            if (value.Take > 0) 
                result.result = operation.PerformTake(result.result, value.Take); 
            return Json(result, JsonRequestBehavior.AllowGet); 
        } 
 
    public class DataResult 
    { 
        public IEnumerable result { get; set; } 
        public int count { get; set; } 
    } 

In your code, Kanban keyField is “Id” but columns key mapping value is “Status” values.  KeyField property is used to map datasource field for column values mapping.  Please refer the following code. 

KanbanFeatures.cshtml 

@(Html.EJ().Kanban("Kanban") 
      .Columns(col => 
         { 
             col.HeaderText("Backlog").Key("Open").Add(); 
             col.HeaderText("In Progress").Key("InProgress").Add(); 
             col.HeaderText("Done").Key("Close").Add(); 
         }) 
       .KeyField("Status")  // Based on this key field column key was defined 
) 

Screenshot:   
 


UG link:  

API link: 

Regards, 
Buvana S 
 


PK Paul Kocher September 8, 2017 01:34 PM UTC

Hello Buvana,

thank you so much for your answer! 

I didn't realize there was a section about the DataManager in the documentation. Will have to read through this more carefully as this will be very helpful for the other controls.

Actually I just copied the code from a ListBox I was using which worked without "Adaptor" but ok, I will be doing this the proper way now :)

Thanks again


BS Buvana Sathasivam Syncfusion Team September 11, 2017 05:17 AM UTC

Hi Paul Kocher,   
  
Thanks for your update.  Please let us know if you need any assistances, we would be happy to assist you.     
  
Regards,                         
Buvana S  
 


PK Paul Kocher September 11, 2017 07:12 AM UTC

Hi Buvana,

actually I do have a follow-up question.

In the sample you uploaded - just like in my own version - drag and drop doesn't really work.

When I drop a card to another column it just resets itself to its original position.

How can I fix that?

Paul


BS Buvana Sathasivam Syncfusion Team September 12, 2017 11:21 AM UTC

Hi Paul Kocher,   
  
Thanks for your update.   
  
Yes, you can’t drag and drop the card.  Because, you are using only URL properties.  If you wish to perform drag and drop operation, you should add CrudURL properties. We have prepared a Kanban control sample with CRUD operations using ejDataManager.  URL property is used to load data into Kanban and CrudURL property is used to get post action for processing adding/editing/deleting/updating data.  Please use below the solution to perform CRUD actions. 
   
KanbanFeatures.cshtml   
   
@(Html.EJ().Kanban("Kanban")   
          .DataSource(ds => ds.URL("GetData").CrudURL("Crud").Adaptor(AdaptorType.UrlAdaptor))    
    )   
   
We have database Tasks table data’s into the GetData method which is specified in the URL properties.   
KanbanController.cs   
   
    public partial class KanbanController : Controller   
    {   
         private NORTHWNDEntities db = new NORTHWNDEntities(); // Get all database tables    
        public ActionResult KanbanFeatures()   
        {   
            return View();   
        }   
        public JsonResult GetData(Syncfusion.JavaScript.DataManager value)   
        {   
            var DataSource = db.Tasks.ToList(); // Get Tasks table list     
            DataResult result1 = new DataResult();   
            DataOperations operation = new DataOperations();   
            result1.result = DataSource;     
            result1.count = DataSource.AsQueryable().Count();   
            if (value.Skip > 0)   
                result1.result = operation.PerformSkip(result1.result, value.Skip);   
            if (value.Take > 0)   
                result1.result = operation.PerformTake(result1.result, value.Take);   
            if (value.Select != null && value.Select.Count > 0)   
                return Json(result1.result, JsonRequestBehavior.AllowGet);   
            return Json(result1, JsonRequestBehavior.AllowGet);   
        }   
   
        //Edit multiple cards for priority drag and drop   
        public ActionResult Crud(List<Task> changed, List<Task> added, List<Task> deleted)   
        {   
            //Performing insert operation   
            if (added != null && added.Count() > 0)   
            {   
                foreach (var temp in added)   
                {   
                    db.Tasks.Add(temp);   
                }   
            }   
   
            //Performing update operation (drag and drop the card and save editing data)   
            if (changed != null && changed.Count() > 0)   
            {   
                foreach (var temp in changed)   
                {   
                    Task old = db.Tasks.Where(o => o.Id == temp.Id).SingleOrDefault();   
                    if (old != null)   
                    {   
                        db.Entry(old).CurrentValues.SetValues(temp);   
                    }   
                }   
            }   
   
            //Performing delete operation   
            if (deleted != null && deleted.Count() > 0)   
            {   
                foreach (var temp in deleted)   
                {   
                    db.Tasks.Remove(db.Tasks.Where(o => o.Id == temp.Id).SingleOrDefault());   
                }   
            }   
   
            db.SaveChanges();   
            var data = db.Tasks.ToList();   
            return Json(data, JsonRequestBehavior.AllowGet);   
        }   
    }   
    public class DataResult   
    {   
        public IEnumerable result { get; set; }   
        public int count { get; set; }   
    }   
   
Refer to the below sample and UG documentation:       
  

  
Regards,   
Buvana S   


Loader.
Up arrow icon