Overview

Loading Demo...

EXAMPLE
VIEW SOURCE
EDIT
- Edit in Kendo UI Dojo
- Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

index.html

Also available for:

# var src = "../content/web/treelist/people/" + data.EmployeeId + ".jpg"# # if(data.isNew() || data.EmployeeId > 100) {# # src = "../content/web/Kendoka-32.png"# # } # <div class="k-avatar k-avatar-md k-avatar-image k-avatar-circle employee-photo"> <img src="#=src#"></img> </div> <div class="employee-name">#: FirstName #</div> $(document).ready(function () { var fab = $("#fab").kendoFloatingActionButton({ icon: "plus", positionMode: "absolute", alignOffset: { x: 50, y: 80 }, themeColor: "primary", size: "medium", click: addItem }).data("kendoFloatingActionButton"); $("#fab").hover(function () { fab.text("Add New Record"); fab.element.find(".k-fab-text") .stop().toggle(200); }, function () { fab.element.find(".k-fab-text") .stop() .toggle(200) .promise().done(function () { fab.text(""); }); }); var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service"; var dataSource = new kendo.data.TreeListDataSource({ transport: { read: { url: crudServiceBaseUrl + "/EmployeeDirectory/All", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/EmployeeDirectory/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/EmployeeDirectory/Create", dataType: "jsonp" }, parameterMap: function (options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } } }, batch: true, schema: { model: { id: "EmployeeId", parentId: "ReportsTo", fields: { EmployeeId: { type: "number", editable: false, nullable: false }, ReportsTo: { nullable: true, type: "number" }, FirstName: { validation: { required: true } }, LastName: { validation: { required: true } }, HireDate: { type: "date" }, Phone: { type: "string" }, HireDate: { type: "date" }, BirthDate: { type: "date" }, Extension: { type: "number", validation: { min: 0, required: true } }, Position: { type: "string" } }, expanded: true } }, pageSize: 15 }); $("#treelist").kendoTreeList({ dataSource: dataSource, editable: "popup", height: 500, columns: [ { field: "FirstName", title: "First Name", width: 280, template: $("#photo-template").html() }, { field: "LastName", title: "Last Name", width: 160 }, { field: "Position" }, { field: "HireDate", title: "Date Hired", format: "{0:dd/MM/yyyy}" }, { field: "Phone", width: 200 }, ], pageable: { pageSize: 20, pageSizes: true } }); }); function addItem() { var treeList = $("#treelist").getKendoTreeList(); treeList.addRow(); } .k-fab-text { display: none; } .employee-photo { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background-size: 32px 35px; background-position: center center; vertical-align: middle; line-height: 32px; box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); margin-left: 5px; } .employee-name { display: inline-block; vertical-align: middle; line-height: 32px; padding-left: 3px; }

The FloatingActionButton component is part of Kendo UI for jQuery, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Description

The Kendo UI FloatingActionButton is a component, which represents the primary action of a screen. It floats in the application above other items and has some main action that is contextual to the content on the page.

Overview

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo