Taskboard Custom Editor and Customization

1 Answer 15 Views

TaskBoard

Joshua asked on 18 Sep 2025, 03:17 PM

Hello. I am planning to use the taskboard for my code, but I would like to customize it a little bit. However Im finding almost any customization to be not possible. Im working with Copilot and its telling me a couple things that dont appear to be true:

1. On the datasource tab, I have commented out code because Copilot has told me that if I use the from attribute when defining the model that those fields would automatically map to its default title and description fields. It stays undefined until I switch to the default values.

2. The custom editor I have specified does not get acknowledged by the code. It simply loads the default one with Title and description fields. At the very minimum I just want it to show different labels than title and descritpion, such as PartyName and comments. However Im not seeing any way to not just load the out of the box solution.

Are my requests possible? The example code on this site just appear to use out of the box editing and mapping.

<body>
    <div id="taskBoard"></div>
    <script id="JurisdictionEditor" type="text/x-kendo-template">
        <div style="padding:2em; color:red;">Custom Editor Rendered!</div>
    </script>
    <script>
        $(function () {
            $("#taskBoard").kendoTaskBoard({
                dataSource: [
                    { id: 1, title: "Jane", description: "Test", status: "cited" }
                    // { id: 1, PartyName: "Jane", comments: "Test", status: "cited" } //doesnt work
                ],
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number" },
                            title: { from: "PartyName", type: "string" },
                            description: { from: "comments", type: "string" },
                            PartyName: { type: "string" },
                            comments: { type: "string" },
                            status: { type: "string" }
                        }
                    }
                },
                columns: [
                    { text: "Cited", status: "cited" }
                ],
                cardTemplate: "<div class='k-card-header'>#: PartyName #</div><div class='k-card-body'>#: comments #</div>",
                editorTemplate: kendo.template($("#JurisdictionEditor").html())
            });
        });
    </script>
</body>

1 Answer, 1 is accepted

answered on 23 Sep 2025, 06:04 AM

Hello Joshua,

You can achieve custom field mapping and a custom editor in the Kendo UI TaskBoard, but there are important details to consider:

Field Mapping with from Attribute

The from attribute in the schema model maps your custom field names to the default ones expected by the TaskBoard (title and description). For this to work, your data source must use the custom field names (PartyName and comments), not the default ones.

Example of correct data source:

dataSource: [
    { id: 1, PartyName: "Jane", comments: "Test", status: "cited" }
]

In your current code, you are using title and description in the data source, which bypasses the mapping and uses the default fields. To use custom fields, update your data source to use PartyName and comments.

Custom Editor Template

The editorTemplate option allows you to fully customize the editor's layout and fields.
For the editor to work with your custom fields, the template must include inputs bound to those fields using Kendo's MVVM syntax.

Example editor template:

<script id="JurisdictionEditor" type="text/x-kendo-template">
    <label>Party Name:</label>
    <input data-bind="value:PartyName" />
    <label>Comments:</label>
    <textarea data-bind="value:comments"></textarea>
</script>

In your example, the template only displays a message. You need to include input elements bound to your custom fields for editing to be possible.

Card Template

You are correctly customizing the card display using cardTemplate. This will show PartyName and comments on the cards.

Summary of Steps

Update your data source to use your custom field names.
Ensure your schema model maps those fields using the from attribute.
Create an editor template that binds to your custom fields using Kendo MVVM.
Use cardTemplate to control card appearance.

Example Setup

$("#taskBoard").kendoTaskBoard({
    dataSource: [
        { id: 1, PartyName: "Jane", comments: "Test", status: "cited" }
    ],
    schema: {
        model: {
            id: "id",
            fields: {
                title: { from: "PartyName", type: "string" },
                description: { from: "comments", type: "string" },
                PartyName: { type: "string" },
                comments: { type: "string" },
                status: { type: "string" }
            }
        }
    },
    columns: [
        { text: "Cited", status: "cited" }
    ],
    cardTemplate: "<div class='k-card-header'>#: PartyName #</div><div class='k-card-body'>#: comments #</div>",
    editorTemplate: kendo.template($("#JurisdictionEditor").html())
});

And for your editor template:

<script id="JurisdictionEditor" type="text/x-kendo-template">
    <label>Party Name:</label>
    <input data-bind="value:PartyName" />
    <label>Comments:</label>
    <textarea data-bind="value:comments"></textarea>
</script>

Additional Notes

The TaskBoard does not automatically change labels in the default editor. You must use a custom editor template for custom labels and fields.
All customization (mapping, labels, editing) is possible with the correct configuration and template binding.

I hope this helps.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.