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

2 mins read

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