RatingItem

Item displaying a star rating.

Rating is determined by the value of the configured field. A max rating can be configured using the max config.

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

    features : {
        columnToolbars : false
    },

    bodyItems : {
        rating : {
            type : 'rating',
            max  : 5
        }
    },

    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   : 'Learn Angular',
                status : 'doing',
                rating : 1
            },
            {
                id     : 2,
                name   : 'Learn React',
                status : 'done',
                rating : 2
            },
            {
                id     : 3,
                name   : 'Learn Vue',
                status : 'todo',
                rating : 5
            }
        ]
    }
});

Configs

7
editor: String | Object= null

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

RatingItems are un-editable by default.

max: Number

Max rating.

const taskBoard = new TaskBoard({
   bodyItems : {
      grade : { type : 'ratingitem', max : 5 }
   },

   project : {
       tasks : [
           { id : 1, name : 'Task #1', grade : 3 }
       ]
   }
});

// Card for task #1 will render 3 full stars and 2 faded,
// for a total of 5 stars
clsTaskItem
fieldTaskItem
hiddenTaskItem
orderTaskItem
styleTaskItem

Properties

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

Typedefs

1

CSS variables

2
NameDescription
--b-task-board-rating-item-colorUnfilled rating item color
--b-task-board-rating-item-filled-colorFilled rating item color