How to create single Kanban Page that is fed data from multiple databases/controller actions

Question

Basically, I am wanting to have a single javascript and cshtmlpage that I can work on with several different models. If I develop a feature for one data model (EF) I want other data models that use the same view to have those features, so I developed a single view with a model. Now I want to use different data sourcesthat are defined by the model passed to the view. I am at a loss on how I might achieve this with your API, could you provide a snippet?

Arun Palaniyandi · Answer

Hi Matthew,

Thanks for contacting Syncfusion support.

Based on your requirement, we suggest you to use our dataSource property to change to new datasource by using setModel. In the sample, we have updated the Kanban data source dynamically on a button click event. In the click handler, define the new data source URL from table or model in the controller method and set it to DataManager. Then using setModel API you can update Kanban data source.

View:

@(Html.EJ().Kanban("Kanban")

.DataSource(ds => ds.URL("GetData").CrudURL("Crud").Adaptor(AdaptorType.UrlAdaptor))

.Columns(col =>

{

col.HeaderText("Backlog").Key("Open").Add();

col.HeaderText("In Progress").Key("InProgress").Add();

col.HeaderText("Done").Key("Close").Add();

})

.ClientSideEvents(eve => eve.CardDragStart("cardDragStart"))

.AllowTitle(true)

.AllowSelection(true)

.KeyField("Status")

.Fields(field =>

{

field.Color("Type")

.Content("Summary")

.PrimaryKey("Id");

})

.EditSettings(edit =>

{

edit.AllowAdding(true)

.AllowEditing(true)

.EditItems(e =>

{

e.Field("Id").Add();

e.Field("Status").EditType(KanbanEditingType.Dropdown).Add();

e.Field("Assignee").EditType(KanbanEditingType.Dropdown).Add();

e.Field("Summary").EditType(KanbanEditingType.TextArea).Add();

});

})

)

//button to change the datasource

function changeClick(args) {

var kObj = $("#Kanban").data("ejKanban");

var dataManger = ej.DataManager({ url: "/Kanban/GetDatanew" });

kObj.setModel({ dataSource: dataManger })

}

</script>

Controller:

public JsonResult GetDatanew(Syncfusion.JavaScript.DataManager value) //new datasource method

{

var DataSource = db.Tasks.ToList(); // new table datasource called via setmodel.

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);}

}

We have also provided a simple sample for your reference below.

http://www.syncfusion.com/downloads/support/forum/133564/ze/KanbanMVC-EF-1577175223

Note: For a single EF itself you can also define multiple tables to change to multiple datasource. Also you need to map the columns and fields correctly according to the new datasource. This can also be changed using setModel.

If the provided information and sample does not meet your requirement or if we misunderstood your query, please get back to us with more information, so that it will help us to provide the solution at earliest.

Regards,

Arun P.

Matthew Harrison · Answer

I am going to set up a SignalR Hub with the Kanban Control, I would like to set the client's hub based on how they navigated to the page. My hope is to have abstracted out the view enough such that I can reuse it for any hub. After writing out my requirements I am thinking the way to go is to send environment context in the ViewModel or ViewBag, then I could use javascript on the page to parse the Model to determine which Hub to connect to. Once the hub is connected I would then need to populate the Kanban Control with Javascript... am I on the right track?

Matt

Arun Palaniyandi · Answer

Hi Matthew,    
   
Thanks for your update. 
   
Yes, you are on the right track. Based on your requirement, we have created a custom sample by applying signalR in Kanban control with Javascript for the functionalities “Update”, “Add”, “Delete” and “Drag and drop” cards. Please find the below sample for more reference.  
 
Sample: http://www.syncfusion.com/downloads/support/forum/133564/ze/SignalR-527895993 
 
 
UG Links: https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc 
https://help.syncfusion.com/aspnetmvc/kanban/getting-started 
 
  
If the provided information and sample does not meet your requirement or if we misunderstood your query, please get back to us with more information, so that it will help us to provide the solution at earliest. 
  
Regards, 
Arun P.