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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: ejKanban

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.


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
<script type="text/javascript">
    $(function () {
        var data = ej. DataManager(window. kanbanData).executeLocal(ej.Query().take(10));
      // Initialize the Kanban with its properties
               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"});



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

  function customizecards(args) {
             // 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",



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

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



Before customization

Figure 1 : Before customization

After customization

Figure 2: After Customization

JS Playground Sample Link:


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.

Up arrow icon

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

Live Chat Icon For mobile