Overview

Loading Demo...

EXAMPLE
VIEW SOURCE
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.cshtml
                    
                        IndexController.cs

Also available for:

API REFERENCE

# var src = "/aspnet-core/shared/web/treelist/people/" + data.EmployeeId + ".jpg"# # if(data.isNew() || data.EmployeeId > 100) {# # src = "/aspnet-core/shared/web/Kendoka-32.png" # # } # <div class="k-avatar k-avatar-md k-avatar-image k-avatar-circle employee-photo"> <img src="#=src#" /> </div> <div class="employee-name">#: FirstName #</div> kendo.syncReady(function(){jQuery("#treelist").kendoTreeList({"columns":[{"field":"FirstName","template":jQuery('#photo-template').html(),"title":"First name","width":"280px","filterable":true},{"field":"LastName","title":"Last name","width":"160px","filterable":true},{"field":"Position","filterable":true},{"field":"HireDate","format":"{0:dd/MM/yyyy}","title":"Hire Date","filterable":true},{"field":"Phone","width":"200px","filterable":true}],"editable":{"mode":"popup","template":"\u003cdiv class=\"k-edit-label\"\u003e\u003clabel for=\"FirstName\"\u003eFirst name\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-field\"\u003e\u003cinput data-val=\"true\" data-val-required=\"The First name field is required.\" id=\"FirstName\" name=\"FirstName\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#FirstName\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"FirstName\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-label\"\u003e\u003clabel for=\"LastName\"\u003eLast name\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-field\"\u003e\u003cinput data-val=\"true\" data-val-required=\"The Last name field is required.\" id=\"LastName\" name=\"LastName\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#LastName\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"LastName\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-label\"\u003e\u003clabel for=\"Phone\"\u003ePhone\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-field\"\u003e\u003cinput id=\"Phone\" name=\"Phone\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#Phone\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Phone\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-label\"\u003e\u003clabel for=\"Extension\"\u003eExtension\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-field\"\u003e\u003cinput data-val=\"true\" data-val-range=\"The field Extension must be between 0 and 9999.\" data-val-range-max=\"9999\" data-val-range-min=\"0\" data-val-required=\"The Extension field is required.\" id=\"Extension\" name=\"Extension\" style=\"width:100%\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#Extension\").kendoNumericTextBox({\"decimals\":0,\"format\":\"n0\",\"max\":2147483647,\"min\":-2147483648});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Extension\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-label\"\u003e\u003clabel for=\"Position\"\u003ePosition\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-field\"\u003e\u003cinput id=\"Position\" name=\"Position\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#Position\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Position\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-label\"\u003e\u003clabel for=\"HireDate\"\u003eHire Date\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"k-edit-field\"\u003e\u003cinput id=\"HireDate\" name=\"HireDate\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#HireDate\").kendoDatePicker({\"format\":\"d\"});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"HireDate\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e"},"filterable":true,"height":540,"pageable":{"pageSize":20,"pageSizes":[5,10,20]},"sortable":true,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-core/employeedirectory/all"},"prefix":"","update":{"url":"/aspnet-core/employeedirectory/update"},"create":{"url":"/aspnet-core/employeedirectory/create"},"destroy":{"url":"/aspnet-core/employeedirectory/destroy"}},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"EmployeeId","parentId":"ReportsTo","fields":{"EmployeeId":{"nullable":false,"type":"number"},"FirstName":{"nullable":false,"type":"string"},"LastName":{"nullable":false,"type":"string"},"ReportsTo":{"nullable":true,"type":"number","defaultValue":null},"Phone":{"nullable":false,"type":"string"},"Extension":{"nullable":false,"type":"number","defaultValue":null},"Position":{"nullable":false,"type":"string"},"hasChildren":{"nullable":false,"type":"boolean"},"HireDate":{"nullable":false,"type":"date","defaultValue":null}},"expanded":true}}}});});kendo.syncReady(function(){jQuery("#fab").kendoFloatingActionButton({"click":addItem,"icon":"plus","size":"medium","positionMode":"absolute","themeColor":"primary","alignOffset":{"x":"50px","y":"80px"}});}); .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 Telerik UI for ASP.NET Core, 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 ASP.NET Core 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