TemplateItem

Item displaying content generated by a template function, see template

Template item
//<code-header>
fiddle.title = 'Template item';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false
    },

    bodyItems : {
        prio : {
            type     : 'template',
            template : ({ taskRecord }) => `<i class="fa fa-traffic-light"></i> ${taskRecord.prio}`
        }
    },

    columns : [
        { id : 'todo', text : 'Todo', color : 'blue' },
        { id : 'doing', text : 'Doing', color : 'orange' },
        { id : 'done', text : 'Done', color : 'green' }
    ],

    columnField : 'status',

    project : {
        tasks : [
            {
                id     : 1,
                name   : 'Go surfing',
                status : 'doing',
                prio   : 'Low'
            },
            {
                id     : 2,
                name   : 'Go skiing',
                status : 'done',
                prio   : 'Medium'
            },
            {
                id     : 3,
                name   : 'Go camping',
                status : 'todo',
                prio   : 'High'
            }
        ]
    }
});

Configs

8
editor: String | Object= null

Widget type or config to use as the editor for this item. Used in the inline task editor.

TemplateItems are un-editable by default.

renderNull: Boolean= false

Specify as true to render the template item even if the backing field's value is null or undefined. Useful for example to display some custom string for null values ("Empty", "Unset" etc.).

const taskBoard = new TaskBoard({
   footerItems : {
       category : {
         type       : 'template',
         renderNull : true,
         template   : ({ value }) => value ? value : 'Empty'
       }
   }
});
template: function

Template function used to generate task content.

Return an HTML string or a DomConfig object from the function:

const taskBoard = new TaskBoard({
   bodyItems : {
       prio : {
         type     : 'template',
         template : ({ taskRecord }) => `<i class="fa fa-tarffic-light"></i> ${taskRecord.prio}`
       }
   }
});
ParameterTypeDescription
taskRecordTaskModel

Task record

configTemplateItemConfig

Item config

valueObject

Value of the configured field

Returns: String | DomConfig | DomConfig[] -

HTML string, DomConfig or DomConfig array

clsTaskItem
fieldTaskItem
hiddenTaskItem
orderTaskItem
styleTaskItem

Properties

2
isTemplateItem: Boolean= truereadonly
Identifies an object as an instance of TemplateItem class, or subclass thereof.
isTemplateItem: Boolean= truereadonlystatic
Identifies an object as an instance of TemplateItem class, or subclass thereof.

Typedefs

1