New to Telerik UI for ASP.NET Core? Download free 30-day trial

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("email").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="email" 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>

Next Steps

See Also

In this article