Hi Anubischiang ,
Thanks for your update.
We cannot load directly from Data source. You need to define columns collection with “headerText” and “key” properties.
“keyField” - Map the data source column name to use as key value for each column.
“key” - Use as mapping value for each column. For e.g. if key is ‘Open’ , then cards with value ‘Open’ will be displayed under that particular column.
“headerText” - Use as heading for each column.
So we suggest you to follow the below steps to bind dynamic columns to Kanban column collection.
[Controller]
1. Create your datasource with two keys. one for headertext and one for mapping key. Use default values 'headerText', 'key' will be bind with columns or other values.
For example, here we used columnText and columnkey.
2. columnText- Use as heading to each column. columnKey - Used as mapping value for each column. E.g. if key is ‘Open’ , then cards with value ‘Open’ will display under particular column..
3. Send the formatted data to view page using view bag like below.
|
public ActionResult Index()
{
List<Column> Cols = new List<Column>();
Cols.Add(new Column() { columnText = "To Do", columnKey = "Open" });
Cols.Add(new Column() { columnText = "Doing", columnKey = "InProgress" });
Cols.Add(new Column() { columnText = "Testing", columnKey = "Testing" });
Cols.Add(new Column() { columnText = "Done", columnKey = "Close" });
ViewBag.colsArray = JsonConvert.SerializeObject(Cols);
return View();
}
public class Column
{
public string columnText { get; set; }
public string columnKey { get; set; }
} |
[JavaScript]
4. Set the column data (sent from controller) to columns array collection. If you received default collection (with naming headerText and key), the data will directly assigned to columns array collection. Else, it will format to headerText and key format and assigned to columns array collection.
|
$(function () {
var data = ej.DataManager(window.kanbanData).executeLocal(ej.Query().take(30)), colsData,columnsData=[];
colsData = @Html.Raw(@ViewBag.colsArray);
for(var i=0;i<colsData.length;i++){
if(colsData[i]['headerText']!=undefined && colsData[i]['key']!=undefined){
columnsData=colsData; // default type of columns
break;
}
else if(colsData[i]['columnText']!=undefined && colsData[i]['columnKey']!=undefined)
// user defined column collection converted here to default naming and pushed to columns collection
columnsData.push({ headerText:colsData[i]['columnText'],key: colsData[i]['columnKey']});
}
$("#Kanban").ejKanban(
{
dataSource: data,
columns:columnsData,
keyField: "Status",
allowTitle: true,
fields: {
content: "Summary",
primaryKey: "Id"
},
allowSelection: false
});
}); |
Please let us know if you have any questions.
