New to Kendo UI for jQuery? Download free 30-day trial

Templates

The FloatingActionButton provides full control over the rendering of the speed dial action items by using Kendo UI templates.

For a complete example, refer to the demo on customizing the FloatingActionButton templates.

Item Templates

The items.template configuration options manages the way the speed dial action items of a FloatingActionButton are rendered.

    <div id="fab"></div>

    <script>
      $(document).ready(function () {
        $("#fab").kendoFloatingActionButton({
          icon:"plus",
          items:[{
                icon:"star",
                label:"Add Rating",
                template:kendo.template($("#fabTemplate").html())
            },{
                icon: "pencil",
                label:"Add Comment",
                template:kendo.template($("#fabTemplate").html())}]
        });
      });
    </script>

    <script id="fabTemplate">
      <span class="k-fab-item-text"><strong>#:text#</strong></span>
      <span class= "k-fab-item-icon k-icon k-i-#:icon#"></span>
    </script>

See Also

In this article