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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Does Kanban Columns could display from Data?

Thread ID:

Created:

Updated:

Platform:

Replies:

126250 Oct 4,2016 07:47 AM UTC Oct 6,2016 06:15 AM UTC ASP.NET MVC 4
loading
Tags: Kanban
anubischiang
Asked On October 4, 2016 07:47 AM UTC

I want to build a function that user can define their own columns name and number of columns.
But I couldn't find any example about dynamic setting Kanban Columns.
Does anyone know how to do that?
Or where can I find the demo code?
Thanks a lot.

Buvana Sathasivam [Syncfusion]
Replied On October 5, 2016 01:18 PM UTC

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. 

 
Regards, 
Buvana S 


anubischiang
Replied On October 6, 2016 01:12 AM UTC

Hi Buvana
Thanks for your helping. 
I built one test page follow the steps that you wrote.
And that was what I need.
Then I can save the columns' data in the database.

Best regards,

anubisciang

Buvana Sathasivam [Syncfusion]
Replied On October 6, 2016 06:15 AM UTC

Hi Anubischiang, 
 
Thanks for your update. Happy to hear that your requirement satisfied.  

 

 

Please let us know if you need any further assistance. 

 

Regards, 

Buvana S 

  


Buvana Sathasivam [Syncfusion]
Replied On October 6, 2016 06:15 AM UTC

Hi Anubischiang, 
 
Thanks for your update. Happy to hear that your requirement satisfied.  

 

 

Please let us know if you need any further assistance. 

 

Regards, 

Buvana S 

  


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.

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

;