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

Allowing end user to change card color, header and columns in Kanban board

Platform: JavaScript |
Control: ejKanban |
Published Date: August 18, 2017 |
Last Revised Date: May 27, 2019

This Knowledge base explains the way of how to customize card color and columns in Kanban. We can customize the card color and columns through set model property in Kanban. We need to follow the below steps to achieve this.

Step-1:

Initialize the Kanban with necessary properties defined. Refer to the code for control creation - [Kanban.html]

 
 // Added <Button> element to create a button control.
<button id="customizecards">
     Click to change columns and card colors
</button>
<script type="text/javascript">
    $(function () {
        var data = ej. DataManager(window. kanbanData).executeLocal(ej.Query().take(10));
      // Initialize the Kanban with its properties
        $("#Kanban").ejKanban(
          {
               dataSource: data,
  columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Done", key: "Close" }
               ],
               keyField: "Status",
  allowTitle: true,
  fields: {
          content: "Summary",
                       primaryKey: "Id",
                       color: "Type",
                       tag: "Tags"
  },
               cardSettings: {
                     colorMapping: {
                          "#ee4e75": "Bug,Story",
                          "#57b94c": "Improvement",
                          "#edba3c": "Epic",
                          "#5187c6": "Others",
                     },
               }
        });
        // Initializing button with click event.
        $("#customizecards").ejButton({ click: "customizecards"});
    });        
</script>

 

Step-2:

You can customize the card color using the set model methods with click event of Button.

 
  function customizecards(args) {
        $("#Kanban").ejKanban(
        {
             // To map data source field
             fields : { color: "Priority"},
             cardSettings: {
                 colorMapping: {
                      // customized color values with database values
                      "#008000": "High",     
                      "#800000": "Low",
                      "#BA55D3": "Release Breaker",
                      "#ADFF2F": "Critical",
                 }
             }
        })
    }
 

 

Step-3:

You can customize the header text and columns using the click event of button.

 
  function customizecards(args) {
      // dynamically change column and header text
      $("#Kanban").ejKanban(
      {
                 columns: [
                        { headerText: "Andrew Fuller", key: "Andrew Fuller" },
                        { headerText: "Janet Leverling", key: "Janet Leverling" },
                        { headerText: "Nancy Davloio", key: "Nancy Davloio" }
                 ],
                 keyField: "Assignee",
      })
  }
 

 

Output:

Before customization

Figure 1 : Before customization

After customization

Figure 2: After Customization

JS Playground Sample Link:

http://jsplayground.syncfusion.com/bhnnya40

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

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