# Columns

The TaskBoard displays cards grouped by specific criteria in columns (lanes). Different aspects of the columns such as column width, the buttons rendered in the columns, and others can be controlled through the `ColumnSettings` configuration. The `ColumnSettings` configuration affects all columns.

## Column Settings

The default buttons rendered in the TaskBoard columns are: `edit column`, `add card` and `delete column`.

The following example demonstrates how to customize the columns by setting `width` and display only one of the three default column buttons.

```Razor HtmlHelper
    @(Html.Kendo().TaskBoard()
        .Name("taskBoard")
        .ColumnSettings(s =>
        {
            s.Width("200");
            s.Buttons(b =>
            {
                b.Add().Command("AddCardCommand").Text("addCard");
            });
        })
        .Columns(c =>
        {
            c.Add().Text("To-do").Status("todo");
            c.Add().Text("In Progress").Status("inProgress");
            c.Add().Text("Done").Status("done");
        })
        .DataDescriptionField("Description")
        .DataStatusField("Status")
        .DataTitleField("Title")
        .DataOrderField("Order")
        .BindTo((IEnumerable<Kendo.Mvc.Examples.Models.TaskBoard.CardViewModel>)ViewBag.Cards)
    )
```

```Razor TagHelper
    @{
        var cards = (IEnumerable<CardViewModel>)ViewBag.Cards;
    }

    <kendo-taskboard 
        dataorderfield="Order" 
        datacategoryfield="Color" 
        datadescriptionfield="Description" 
        datastatusfield="Status"
        datatitlefield="Title"
        name="taskBoard"
        bind-to="cards">
        <taskboard-columns>
                <column text="To-do" status="todo"></column>
                <column text="In progress" status="inProgress"></column>
                <column text="Done" status="done"></column>
        </taskboard-columns>
        <column-settings datastatusfield="Status" datatextfield="Text" width="200">
            <buttons>
                <button text="addCard" command="AddCardCommand">
                </button>
            </buttons>
        </column-settings>
    </kendo-taskboard>

```

## Column Commands

The available column commands are:

* AddColumnCommand
* EditColumnCommand
* DeleteColumnCommand
* SaveColumnCommand
* CancelEditColumnCommand

In addition to the default buttons, you have the option to add custom buttons to the TaskBoard columns.

The following example demonstrates how to use the `ColumnSettings` configuration to add a custom button. A custom command is created, to be triggered on clicking the custom button.

```Razor HtmlHelper
    <script>
        kendo.ui.taskboard.commands["MyCustomCommand"] = kendo.ui.taskboard.Command.extend({
            exec: function () {
                var taskboard = this.taskboard;
                var options = this.options;
                var column = options.column;
                var columnElm = options.columnElement;

                columnElm.css("border", "solid red 3px");
                alert(kendo.format("Custom command executed for column with status {0} and value {1}", column.get("status"), options.value));
            } 
        });
    </script>

    @(Html.Kendo().TaskBoard()
        .Name("taskBoard")
        .ColumnSettings(s =>
        {
            s.Buttons(b =>
            {
                b.Add().Name("CustomButton").Text("My Custom Tool").Icon("gear").Command("MyCustomCommand").Options("myvalue");
            });
        })
        .Columns(c =>
        {
            c.Add().Text("To-do").Status("todo");
            c.Add().Text("In Progress").Status("inProgress");
            c.Add().Text("Done").Status("done");
        })
        .DataDescriptionField("Description")
        .DataStatusField("Status")
        .DataTitleField("Title")
        .DataOrderField("Order")
        .BindTo((IEnumerable<Kendo.Mvc.Examples.Models.TaskBoard.CardViewModel>)ViewBag.Cards)
    )
```

```Razor TagHelper
    <script>
        kendo.ui.taskboard.commands["MyCustomCommand"] = kendo.ui.taskboard.Command.extend({
            exec: function () {
                var taskboard = this.taskboard;
                var options = this.options;
                var column = options.column;
                var columnElm = options.columnElement;

                columnElm.css("border", "solid red 3px");
                alert(kendo.format("Custom command executed for column with status {0} and value {1}", column.get("status"), options.value));
            } 
        });
    </script>

    @{
        var cards = (IEnumerable<CardViewModel>)ViewBag.Cards;
    }

    <kendo-taskboard 
        dataorderfield="Order" 
        datacategoryfield="Color" 
        datadescriptionfield="Description" 
        datastatusfield="Status"
        datatitlefield="Title"
        name="taskBoard"
        bind-to="cards">
        <taskboard-columns>
                <column text="To-do" status="todo"></column>
                <column text="In progress" status="inProgress"></column>
                <column text="Done" status="done"></column>
        </taskboard-columns>
        <column-settings datastatusfield="Status" datatextfield="Text" width="200">
            <buttons>
                <button name="CustomButton" text="My Custom Tool" icon="gear" command="MyCustomCommand" options="myvalue">
	 	 	    </button>
            </buttons>
        </column-settings>
    </kendo-taskboard>

```

## See Also

* [Kendo UI TaskBoard Cards](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/data-management/taskboard/cards)
* [JavaScript API Reference of the TaskBoard](https://docs.telerik.com/kendo-ui/api/ui/taskboard)