New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Editing

The TaskBoard allows column and card editing. By default, editing in the TaskBoard is enabled for both columns and cards.

Editing Configuration

To set up editing:

  1. Configure the Model and the CRUD operations in the DataSource
  2. Set the Editable configuration (optional)

The following example demonstrates how to configure CRUD (Create, Read, Update, Destroy) data operations for columns and the cards of the TaskBoard. For an example of the editing functionality, refer to the Editing (Demo).

Razor
    @(Html.Kendo().TaskBoard<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel, Kendo.Mvc.Examples.Models.TaskBoard.Column>()
        .Name("taskBoard")
        .ColumnSettings(columnSettings => columnSettings
            .DataTextField("Text")
            .DataStatusField("ID")
        )
        .Columns(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.ID))
            .Read("Editing_Columns_Read", "TaskBoard")
            .Create("Editing_Columns_Create", "TaskBoard")
            .Update("Editing_Columns_Update", "TaskBoard")
            .Destroy("Editing_Columns_Destroy", "TaskBoard")
        )
        .DataTitleField("Title")
        .DataStatusField("OwnerID")
        .DataDescriptionField("Description")
        .DataCategoryField("ID")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.TaskID))
            .Read(read => read.Action("Tasks_Read", "TaskBoard"))
            .Create(create => create.Action("Tasks_Create", "TaskBoard"))
            .Update(update => update.Action("Tasks_Update", "TaskBoard"))
            .Destroy(destroy => destroy.Action("Tasks_Destroy", "TaskBoard"))
        )
    )

Configuring the Data Source

The TaskBoard uses two different data source instances for its columns and cards.

Configure the actions, which the DataSource will call when an "Update", "Destroy", or a "Create" operation is triggered. An important part of the CRUD operations is the response from the service, which needs to return the manipulated data, so that the TaskBoard can apply the changes to the DataSource accordingly. For more information on the CRUD capabilities of the DataSource, refer to DataSource CRUD.

The following example demonstrates how to configure the data source of the columns.

Razor
    .Columns(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.ID))
        .Read("Editing_Columns_Read", "TaskBoard")
        .Create("Editing_Columns_Create", "TaskBoard")
        .Update("Editing_Columns_Update", "TaskBoard")
        .Destroy("Editing_Columns_Destroy", "TaskBoard")
    )

The following example demonstrates how to configure the data source of the cards.

Razor
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.TaskID))
        .Read(read => read.Action("Tasks_Read", "TaskBoard"))
        .Create(create => create.Action("Tasks_Create", "TaskBoard"))
        .Update(update => update.Action("Tasks_Update", "TaskBoard"))
        .Destroy(destroy => destroy.Action("Tasks_Destroy", "TaskBoard"))
    )

Setting the Editable Option

Editing is enabled by default, but the Editable configuration exposes a number of customization options.

The following example demonstrates how to set the Editable configuration.

Razor
    .Editable(ed => ed.Form(f => f.Items(it =>
    {
        it.Add().Field("Title").Label("Title");
        it.Add().Field("Description").Label("Description");
        it.Add().Field("Category").Label("Priority").Editor(e =>
        {
            e.DropDownList()
            .DataTextField("Text")
            .DataValueField("Value")
            .BindTo(new List<SelectListItem>() {
                new SelectListItem() {
                    Text = "Low",
                    Value = "1"
                },
                new SelectListItem() {
                    Text = "High",
                    Value = "2"
                },
                new SelectListItem() {
                    Text = "Critical",
                    Value = "3"
                }
            })
            .Template("<span style='color: red'>#:Text#</span>")
            .ValueTemplate("<span style='color: blue'>#:Text#</span>");
        });
    })))

See Also