Events
The FloatingActionButton for ASP.NET Core exposes the Click(), Expand(), and Collapse() events. For a complete example on FloatingActionButton events, refer to the demo on using the events of the FloatingActionButton.
The following example demonstrates how to subscribe to the FloatingActionButton events.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Align(FloatingActionButtonAlign.BottomCenter)
.AlignOffset(ao=>ao.Vertical(50))
.PositionMode(FloatingActionButtonPositionMode.Fixed)
.Items(items=>{
items.Add().Icon("download").Label("Download").Click(onItemClick);
items.Add().Icon("print").Label("Print").Click(onItemClick);
items.Add().Icon("envelop").Label("Email").Click(onItemClick);
})
.Events(e =>
{
e.Click("onClick");
e.Expand("onExpand");
e.Collapse("onExpand");
})
)
<script>
function onClick(e){
// Handle the FloatingActionButton click event.
};
function onExpand(e){
// Handle the FloatingActionButton expand event.
};
function onCollapse(e){
// Handle the FloatingActionButton collapse event.
};
function onItemClick(e){
// Handle the FloatingActionButton action item event.
};
</script>
<kendo-floatingactionbutton name="fab"
on-click="onClick"
on-expand="onExpand"
on-collapse="onCollapse"
align="FloatingActionButtonAlign.BottomCenter"
align-offset-vertical="50"
position-mode="FloatingActionButtonPositionMode.Fixed"
icon="share">
<floatingactionbutton-items>
<floatingactionbutton-item label="Download" icon="download" click="onItemClick"></floatingactionbutton-item>
<floatingactionbutton-item label="Print" icon="print" click="onItemClick"></floatingactionbutton-item>
<floatingactionbutton-item label="Email" icon="envelop" click="onItemClick"></floatingactionbutton-item>
</floatingactionbutton-items>
</kendo-floatingactionbutton>
<script>
function onClick(e){
// Handle the FloatingActionButton click event.
};
function onExpand(e){
// Handle the FloatingActionButton expand event.
};
function onCollapse(e){
// Handle the FloatingActionButton collapse event.
};
function onItemClick(e){
// Handle the FloatingActionButton action item event.
};
</script>