items.template String|Function

Specifies the template used to render the contents of the speed-dial item.

The fields which can be used inside the template are:

  • text String - the label of the item (if configured).
  • icon String - the icon specified for this step (if configured).

Example - Use a string template

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        icon: 'home',
        items: [{
            label: 'print',
            template: '#:text#',
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('print action'); }
        }]
    });
</script>

Example - Use a function

<button id="fab-items"></button>

<script>
    $('#fab-items').kendoFloatingActionButton({
        icon: 'home',
        items: [{
            label: 'print',
            template: function(e) {
                return '<strong>' + e.text + '</strong>';
            },
/* The result can be observed in the DevTools(F12) console of the browser. */
            click: function() { console.log('print action'); }
        }]
    });
</script>
In this article