Columns

17 May 202124 minutes to read

Column fields are present in the DataSource schema and it is rendering cards based its mapping column values.

Key Mapping

To render Kanban with simple cards, you need to map the DataSource fields to Kanban cards and Columns. The required mapping field are listed as follows

Mapping Fields Description
KeyField Map the column name to use as Key values to columns.
Columns.KanbanColumn.Key Map the corresponding key values of KeyField column to each columns.
Columns.KanbanColumn.HeaderText It represents the title for particular column
Fields.Content Map the column name to use as content to cards.

NOTE

1.If the column with KeyField is not in the DataSource and key values specified will not available in column values, then the cards will not be rendered.

NOTE

2.If the Fields.Content is not in the DataSource, then empty cards will be rendered.

The following code example describes the above behavior.

<ej:Kanban ID="Kanban" runat="server" KeyField="Status">
                <Columns>
                    <ej:KanbanColumn HeaderText="Backlog" Key="Open" />
                    <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" />
                    <ej:KanbanColumn HeaderText="Testing" Key="Testing" />
                    <ej:KanbanColumn HeaderText="Done" Key="Close" />
                </Columns>
                <Fields Content="Summary" />
     </ej:Kanban>
List<Tasks> Task = new List<Tasks>();  
          protected void Page_Load(object sender, EventArgs e)
          {
            Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
            Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
            Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
            Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
            Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
            Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
            Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
            Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
            Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
            Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
            Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
            Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
            Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
            Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
            Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
            this.Kanban.DataSource = Task;
            this.Kanban.DataBind();
           }
           public class Tasks
           {
              public Tasks()
              {
              }
              public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
              {
                  this.Id = Id;
                  this.Status = Status;
                  this.Summary = Summary;
                  this.Type = Type;
                  this.Priority = Priority;
                  this.Tags = Tags;
                  this.Estimate = Estimate;
                  this.Assignee = Assignee;
                  this.ImgUrl = ImgUrl;
                  this.RankId = RankId;
              }
              public int Id { get; set; }
              public string Status { get; set; }
              public string Summary { get; set; }
              public string Type { get; set; }
              public string Priority { get; set; }
              public string Tags { get; set; }
              public double Estimate { get; set; }
              public string Assignee { get; set; }
              public string ImgUrl { get; set; }
              public int RankId { get; set; }
          }

The following output is displayed as a result of the above code example.

ASPNET Kanban Columns image

Multiple Key Mapping

You can map more than one datasource fields as Key values to show different key cards into single column. For e.g , you can map “Validate,In progress” keys under “In progress” column.

The following code example and screenshot which describes the above behavior.

<ej:Kanban ID="Kanban" runat="server" KeyField="Status">
                <Columns>
                    <ej:KanbanColumn HeaderText="Backlog" Key="Open" />
                    <ej:KanbanColumn HeaderText="In Progress or Validate" Key="InProgress,Validate" />
                    <ej:KanbanColumn HeaderText="Testing" Key="Testing" />
                    <ej:KanbanColumn HeaderText="Done" Key="Close" />
                </Columns>
                <Fields Content="Summary" />
     </ej:Kanban>
List<Tasks> Task = new List<Tasks>();  
          protected void Page_Load(object sender, EventArgs e)
          {
            Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
            Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
            Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
            Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
            Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
            Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
            Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
            Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
            Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
            Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
            Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
            Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
            Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
            Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
            Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
            this.Kanban.DataSource = Task;
            this.Kanban.DataBind();
           }

           public class Tasks
           {
              public Tasks()
              {
              }
              public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
              {
                  this.Id = Id;
                  this.Status = Status;
                  this.Summary = Summary;
                  this.Type = Type;
                  this.Priority = Priority;
                  this.Tags = Tags;
                  this.Estimate = Estimate;
                  this.Assignee = Assignee;
                  this.ImgUrl = ImgUrl;
                  this.RankId = RankId;
              }
              public int Id { get; set; }
              public string Status { get; set; }
              public string Summary { get; set; }
              public string Type { get; set; }
              public string Priority { get; set; }
              public string Tags { get; set; }
              public double Estimate { get; set; }
              public string Assignee { get; set; }
              public string ImgUrl { get; set; }
              public int RankId { get; set; }
          }

The following output is displayed as a result of the above code example.

ASPNET Kanban Columns image9

Headers

Header Template

The template design that applies on for the column header. To render template, set HeaderTemplate.

You can use JsRender syntax in the template. For more information about JsRender syntax, please refer the link.

The following code example describes the above behavior.

<ej:Kanban ID="Kanban" runat="server" AllowSelection="false" AllowTitle="true" KeyField="Status">
            <Columns>
                <ej:KanbanColumn HeaderText="Backlog" Key="Open" HeaderTemplate="#column1" />
                <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" />
                <ej:KanbanColumn HeaderText="Testing" Key="Testing" />
                <ej:KanbanColumn HeaderText="Done" Key="Close" HeaderTemplate="#column4" />
            </Columns>
            <Fields Content="Summary" />
        </ej:Kanban>
        <script id="column1" type="text/x-jsrender">
            <span class="e-backlog e-icon"></span>
            Backlog
        </script>
        <script id="column4" type="text/x-jsrender">
            <span class="e-done e-icon"></span>
            Done
        </script>
List<Tasks> Task = new List<Tasks>();  
          protected void Page_Load(object sender, EventArgs e)
          {
            Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
            Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
            Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
            Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
            Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
            Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
            Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
            Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
            Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
            Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
            Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
            Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
            Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
            Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
            Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
            this.Kanban.DataSource = Task;
            this.Kanban.DataBind();
           }

           public class Tasks
           {
              public Tasks()
              {
              }
              public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
              {
                  this.Id = Id;
                  this.Status = Status;
                  this.Summary = Summary;
                  this.Type = Type;
                  this.Priority = Priority;
                  this.Tags = Tags;
                  this.Estimate = Estimate;
                  this.Assignee = Assignee;
                  this.ImgUrl = ImgUrl;
                  this.RankId = RankId;
              }
              public int Id { get; set; }
              public string Status { get; set; }
              public string Summary { get; set; }
              public string Type { get; set; }
              public string Priority { get; set; }
              public string Tags { get; set; }
              public double Estimate { get; set; }
              public string Assignee { get; set; }
              public string ImgUrl { get; set; }
              public int RankId { get; set; }
          }
  • css
  • /*CSS for Header template icon*/
        .e-backlog, .e-done {
            font-size: 16px;
            padding-right: 5px;
            display: inline-block;
         }
         .e-backlog:before {
               content: "\e807";
          }
         .e-done:before {
                   content: "\e80a";
          }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image1

    Width

    You can specify the width for particular column by setting Width property of KanbanColumn as in pixel (ex: 100) or in percentage (ex: 40%).

    The following code example describes the above behavior.

    <ej:Kanban ID="Kanban" runat="server" AllowSelection="false" AllowTitle="true" KeyField="Status">
                <Columns>
                    <ej:KanbanColumn HeaderText="Backlog" Key="Open" Width="5%"/>
                    <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" Width="12%" />
                    <ej:KanbanColumn HeaderText="Testing" Key="Testing" Width="100" />
                    <ej:KanbanColumn HeaderText="Done" Key="Close" Width="100" />
                </Columns>
                <Fields Content="Summary" />
            </ej:Kanban>
    List<Tasks> Task = new List<Tasks>();  
              protected void Page_Load(object sender, EventArgs e)
              {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
                Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
                Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
                Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
                Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
                Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
                Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
                Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
                Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
                Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
                Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
                this.Kanban.DataSource = Task;
                this.Kanban.DataBind();
               }
               public class Tasks
               {
                  public Tasks()
                  {
                  }
                  public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                  {
                      this.Id = Id;
                      this.Status = Status;
                      this.Summary = Summary;
                      this.Type = Type;
                      this.Priority = Priority;
                      this.Tags = Tags;
                      this.Estimate = Estimate;
                      this.Assignee = Assignee;
                      this.ImgUrl = ImgUrl;
                      this.RankId = RankId;
                  }
                  public int Id { get; set; }
                  public string Status { get; set; }
                  public string Summary { get; set; }
                  public string Type { get; set; }
                  public string Priority { get; set; }
                  public string Tags { get; set; }
                  public double Estimate { get; set; }
                  public string Assignee { get; set; }
                  public string ImgUrl { get; set; }
                  public int RankId { get; set; }
              }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image2

    Visibility

    You can hide particular column in Kanban by setting Visible property of it as false.

    The following code example describes the above behavior.

    <ej:Kanban ID="Kanban" runat="server" AllowSelection="false" AllowTitle="true" KeyField="Status">
                <Columns>
                    <ej:KanbanColumn HeaderText="Backlog" Key="Open"/>
                    <ej:KanbanColumn HeaderText="In Progress" Key="InProgress"/>
                    <ej:KanbanColumn HeaderText="Testing" Key="Testing" Visible="false" />
                    <ej:KanbanColumn HeaderText="Done" Key="Close"/>
                </Columns>
                <Fields Content="Summary" />
            </ej:Kanban>
    List<Tasks> Task = new List<Tasks>();  
              protected void Page_Load(object sender, EventArgs e)
              {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
                Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
                Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
                Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
                Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
                Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
                Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
                Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
                Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
                Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
                Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
                this.Kanban.DataSource = Task;
                this.Kanban.DataBind();
               }
               public class Tasks
               {
                  public Tasks()
                  {
                  }
                  public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                  {
                      this.Id = Id;
                      this.Status = Status;
                      this.Summary = Summary;
                      this.Type = Type;
                      this.Priority = Priority;
                      this.Tags = Tags;
                      this.Estimate = Estimate;
                      this.Assignee = Assignee;
                      this.ImgUrl = ImgUrl;
                      this.RankId = RankId;
                  }
                  public int Id { get; set; }
                  public string Status { get; set; }
                  public string Summary { get; set; }
                  public string Type { get; set; }
                  public string Priority { get; set; }
                  public string Tags { get; set; }
                  public double Estimate { get; set; }
                  public string Assignee { get; set; }
                  public string ImgUrl { get; set; }
                  public int RankId { get; set; }
              }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image3

    Toggle

    You can set particular column collapsed state in Kanban by setting IsCollapsed as true to use Expand/Collapse Column.

    The following code example describes the above behavior.

    <ej:Kanban ID="Kanban" runat="server" AllowToggleColumn="true" AllowSelection="false" AllowTitle="true" KeyField="Status">
                <Columns>
                    <ej:KanbanColumn HeaderText="Backlog" Key="Open" IsCollapsed="true"/>
                    <ej:KanbanColumn HeaderText="In Progress" Key="InProgress"/>
                    <ej:KanbanColumn HeaderText="Testing" Key="Testing"/>
                    <ej:KanbanColumn HeaderText="Done" Key="Close"/>
                </Columns>
                <Fields Content="Summary" />
            </ej:Kanban>
    List<Tasks> Task = new List<Tasks>();  
              protected void Page_Load(object sender, EventArgs e)
              {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
                Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
                Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
                Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
                Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
                Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
                Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
                Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
                Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
                Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
                Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
                this.Kanban.DataSource = Task;
                this.Kanban.DataBind();
               }
               public class Tasks
               {
                  public Tasks()
                  {
                  }
                  public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                  {
                      this.Id = Id;
                      this.Status = Status;
                      this.Summary = Summary;
                      this.Type = Type;
                      this.Priority = Priority;
                      this.Tags = Tags;
                      this.Estimate = Estimate;
                      this.Assignee = Assignee;
                      this.ImgUrl = ImgUrl;
                      this.RankId = RankId;
                  }
                  public int Id { get; set; }
                  public string Status { get; set; }
                  public string Summary { get; set; }
                  public string Type { get; set; }
                  public string Priority { get; set; }
                  public string Tags { get; set; }
                  public double Estimate { get; set; }
                  public string Assignee { get; set; }
                  public string ImgUrl { get; set; }
                  public int RankId { get; set; }
              }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image4

    Allow Dragging

    You can enable and disable card drag behavior to the Kanban columns using the AllowDrag property and the default value is true.

    The following code example describes the above behavior.

    <ej:Kanban ID="Kanban" runat="server" KeyField="Status">
                    <Columns>
                        <ej:KanbanColumn HeaderText="Backlog" Key="Open" AllowDrag="false" />
                        <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" />
                        <ej:KanbanColumn HeaderText="Done" Key="Close" />
                    </Columns>
                    <Fields Content="Summary" ImageUrl="ImgUrl" Priority="RankId" />
         </ej:Kanban>
    List<Tasks> Task = new List<Tasks>();  
              protected void Page_Load(object sender, EventArgs e)
              {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
                Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
                Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
                Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
                Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
                Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
                Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
                Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
                Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
                Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
                Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
                this.Kanban.DataSource = Task;
                this.Kanban.DataBind();
               }
               public class Tasks
               {
                  public Tasks()
                  {
                  }
                  public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                  {
                      this.Id = Id;
                      this.Status = Status;
                      this.Summary = Summary;
                      this.Type = Type;
                      this.Priority = Priority;
                      this.Tags = Tags;
                      this.Estimate = Estimate;
                      this.Assignee = Assignee;
                      this.ImgUrl = ImgUrl;
                      this.RankId = RankId;
                  }
                  public int Id { get; set; }
                  public string Status { get; set; }
                  public string Summary { get; set; }
                  public string Type { get; set; }
                  public string Priority { get; set; }
                  public string Tags { get; set; }
                  public double Estimate { get; set; }
                  public string Assignee { get; set; }
                  public string ImgUrl { get; set; }
                  public int RankId { get; set; }
              }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image5

    Allow Dropping

    You can enable and disable card drop behavior to the Kanban columns using the AllowDrop property and the default value is true.

    The following code example describes the above behavior.

    <ej:Kanban ID="Kanban" runat="server" KeyField="Status">
                    <Columns>
                        <ej:KanbanColumn HeaderText="Backlog" Key="Open" AllowDrag="false" />
                        <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" />
                        <ej:KanbanColumn HeaderText="Done" Key="Close" AllowDrop="false" />
                    </Columns>
                    <Fields Content="Summary" ImageUrl="ImgUrl" Priority="RankId" />
         </ej:Kanban>
    List<Tasks> Task = new List<Tasks>();  
              protected void Page_Load(object sender, EventArgs e)
              {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
                Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
                Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
                Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
                Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
                Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
                Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
                Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
                Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
                Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
                Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
                this.Kanban.DataSource = Task;
                this.Kanban.DataBind();
               }
               public class Tasks
               {
                  public Tasks()
                  {
                  }
                  public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                  {
                      this.Id = Id;
                      this.Status = Status;
                      this.Summary = Summary;
                      this.Type = Type;
                      this.Priority = Priority;
                      this.Tags = Tags;
                      this.Estimate = Estimate;
                      this.Assignee = Assignee;
                      this.ImgUrl = ImgUrl;
                      this.RankId = RankId;
                  }
                  public int Id { get; set; }
                  public string Status { get; set; }
                  public string Summary { get; set; }
                  public string Type { get; set; }
                  public string Priority { get; set; }
                  public string Tags { get; set; }
                  public double Estimate { get; set; }
                  public string Assignee { get; set; }
                  public string ImgUrl { get; set; }
                  public int RankId { get; set; }
              }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image6

    Items Count

    You can show total cards count in each column’s header using the property EnableTotalCount and the default value is false.

    The following code example describes the above behavior.

    <ej:Kanban ID="Kanban" EnableTotalCount="true" runat="server" KeyField="Status">
                    <Columns>
                        <ej:KanbanColumn HeaderText="Backlog" Key="Open" />
                        <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" />
                        <ej:KanbanColumn HeaderText="Done" Key="Close" />
                    </Columns>
                    <Fields Content="Summary" ImageUrl="ImgUrl" />
         </ej:Kanban>
    List<Tasks> Task = new List<Tasks>();  
              protected void Page_Load(object sender, EventArgs e)
              {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
                Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
                Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
                Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
                Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
                Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
                Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
                Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
                Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
                Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
                Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
                this.Kanban.DataSource = Task;
                this.Kanban.DataBind();
               }
               public class Tasks
               {
                  public Tasks()
                  {
                  }
                  public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                  {
                      this.Id = Id;
                      this.Status = Status;
                      this.Summary = Summary;
                      this.Type = Type;
                      this.Priority = Priority;
                      this.Tags = Tags;
                      this.Estimate = Estimate;
                      this.Assignee = Assignee;
                      this.ImgUrl = ImgUrl;
                      this.RankId = RankId;
                  }
                  public int Id { get; set; }
                  public string Status { get; set; }
                  public string Summary { get; set; }
                  public string Type { get; set; }
                  public string Priority { get; set; }
                  public string Tags { get; set; }
                  public double Estimate { get; set; }
                  public string Assignee { get; set; }
                  public string ImgUrl { get; set; }
                  public int RankId { get; set; }
              }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image7

    Customize Items Count Text

    You can customize the Items count text using the property Text of TotalCount.

    The following code example describes the above behavior.

    <ej:Kanban ID="Kanban" EnableTotalCount="true" runat="server" KeyField="Status">
                    <Columns>
                       <ej:KanbanColumn HeaderText="Backlog" Key="Open">
                            <TotalCount Text="Backlog Count"/>
                        </ej:KanbanColumn>
                        <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" />
                        <ej:KanbanColumn HeaderText="Done" Key="Close" />
                    </Columns>
                    <Fields Content="Summary" PrimaryKey="Id"/>
         </ej:Kanban>
    List<Tasks> Task = new List<Tasks>();  
              protected void Page_Load(object sender, EventArgs e)
              {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
                Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael", "../content/images/kanban/6.png", 1));
                Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert", "../content/images/kanban/7.png", 4));
                Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura", "../content/images/kanban/8.png", 2));
                Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy", "../content/images/kanban/1.png", 2));
                Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret", "../content/images/kanban/4.png", 3));
                Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven", "../content/images/kanban/5.png", 5));
                Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael", "../content/images/kanban/6.png", 3));
                Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert", "../content/images/kanban/7.png", 3));
                Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura", "../content/images/kanban/8.png", 3));
                Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret", "../content/images/kanban/4.png", 4));
                this.Kanban.DataSource = Task;
                this.Kanban.DataBind();
               }
               public class Tasks
               {
                  public Tasks()
                  {
                  }
                  public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                  {
                      this.Id = Id;
                      this.Status = Status;
                      this.Summary = Summary;
                      this.Type = Type;
                      this.Priority = Priority;
                      this.Tags = Tags;
                      this.Estimate = Estimate;
                      this.Assignee = Assignee;
                      this.ImgUrl = ImgUrl;
                      this.RankId = RankId;
                  }
                  public int Id { get; set; }
                  public string Status { get; set; }
                  public string Summary { get; set; }
                  public string Type { get; set; }
                  public string Priority { get; set; }
                  public string Tags { get; set; }
                  public double Estimate { get; set; }
                  public string Assignee { get; set; }
                  public string ImgUrl { get; set; }
                  public int RankId { get; set; }
              }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image8

    Display Empty Column

    On binding empty data source to Kanban control, it displays “No cards to display” text. Using ShowColumnWhenEmpty property, we can render empty kanban columns. Set AllowEditing and AllowAdding property as true to add new data into the empty kanban column.

    The following code example describes the above behavior.

    <ej:Kanban ID="Kanban" runat="server" AllowSelection="true" KeyField="Status" ShowColumnWhenEmpty="true">
            <Columns>
                    <ej:KanbanColumn HeaderText="Backlog" Key="Open" ShowAddButton="true"/>
                    <ej:KanbanColumn HeaderText="In Progress" Key="InProgress"/>
                    <ej:KanbanColumn HeaderText="Done" Key="Close" />
            </Columns>
            <Fields Content="Summary" Color="Type" ImageUrl="ImgUrl" Tag="Tags"  SwimlaneKey="Assignee" PrimaryKey="Id" />
    		<EditSettings AllowAdding="true" AllowEditing="true" EditMode="Dialog">
                <EditItems>
                    <ej:KanbanEditItem  EditType="String" Field="Id">
                        <ValidationRules><ej:KeyValue Key="required" Value="true"  /></ValidationRules>
                    </ej:KanbanEditItem>
                    <ej:KanbanEditItem  EditType="String"  Field="Status"></ej:KanbanEditItem>
                    <ej:KanbanEditItem  EditType="String" Field="Assignee"></ej:KanbanEditItem>
                    <ej:KanbanEditItem EditType="Numeric" Field="Estimate">
                        <NumericEditOptions DecimalPlaces="2" /><ValidationRules><ej:KeyValue Key="range" Value="[0, 1000]" /></ValidationRules>
                    </ej:KanbanEditItem>
                    <ej:KanbanEditItem EditType="TextArea" Field="Summary"><ValidationRules><ej:KeyValue Key="required" Value="true" /></ValidationRules>  </ej:KanbanEditItem>
                </EditItems>
            </EditSettings> 
        </ej:Kanban>
    List<Tasks> Task = new List<Tasks>();  
              protected void Page_Load(object sender, EventArgs e)
              {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven", "../content/images/kanban/5.png", 1));
                this.Kanban.DataSource = Task.Take(0);
                this.Kanban.DataBind();
               }
               public class Tasks
               {
                  public Tasks()
                  {
                  }
                  public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                  {
                      this.Id = Id;
                      this.Status = Status;
                      this.Summary = Summary;
                      this.Type = Type;
                      this.Priority = Priority;
                      this.Tags = Tags;
                      this.Estimate = Estimate;
                      this.Assignee = Assignee;
                      this.ImgUrl = ImgUrl;
                      this.RankId = RankId;
                  }
                  public int Id { get; set; }
                  public string Status { get; set; }
                  public string Summary { get; set; }
                  public string Type { get; set; }
                  public string Priority { get; set; }
                  public string Tags { get; set; }
                  public double Estimate { get; set; }
                  public string Assignee { get; set; }
                  public string ImgUrl { get; set; }
                  public int RankId { get; set; }
              }

    The following output is displayed as a result of the above code example.

    ASPNET Kanban Columns image10