New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Getting Started with the FloatingToolBar

Updated on Oct 9, 2026

This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC FloatingToolBar and highlights the major steps in the configuration of the component.

You will initialize a FloatingToolBar with text formatting tools inside a positioned container. Next, you will handle its events and reference the client-side instance of the component.

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

To create a new pre-configured project for the Telerik UI for ASP.NET MVC components, you can use a project template.
To manually configure an existing project by using NuGet, see the Adding Telerik UI through NuGet.

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

To use the Telerik UI for ASP.NET MVC HtmlHelpers:
cshtml
```
@using Kendo.Mvc.UI
```

Add a container that holds the content and the toolbar. The FloatingToolBar aligns itself to its closest positioned ancestor, so set the position CSS property of the container to relative.

Razor

    @using Kendo.Mvc.UI

    <div id="document-editor" style="position: relative; height: 260px; padding: 16px; border: 1px solid #ccc;">
        <h4>Customs Declaration</h4>
        <p>Container MSKU 7720145 holds 18 pallets of medical supplies, temperature-controlled at 2-8&deg;C.</p>
    </div>

2. Initialize the FloatingToolBar

Use the FloatingToolBar HtmlHelper to add the component inside the container:

The Name() configuration method is mandatory as its value is used for the id and the name attributes of the FloatingToolBar element.
The Visible() option shows the toolbar when the page loads. By default, the toolbar is hidden until you call its show() client-side method.
The ContainerAlign() option places the toolbar at the bottom center of the container.
The Items() option defines the commands. It accepts the same item configuration as the ToolBar.

Razor

    @using Kendo.Mvc.UI

    <div id="document-editor" style="position: relative; height: 260px; padding: 16px; border: 1px solid #ccc;">
        <h4>Customs Declaration</h4>
        <p>Container MSKU 7720145 holds 18 pallets of medical supplies, temperature-controlled at 2-8&deg;C.</p>

        @(Html.Kendo().FloatingToolBar()
            .Name("floatingtoolbar")
            .Visible(true)
            .ContainerAlign(align => align
                .Horizontal(FloatingToolBarHorizontalAlign.Center)
                .Vertical(FloatingToolBarVerticalAlign.Bottom))
            .Margin(margin => margin.Vertical(-16))
            .Items(items =>
            {
                items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
                {
                    buttons.Add().Text("Bold").Icon("bold").Togglable(true).ShowText(ShowIn.Overflow);
                    buttons.Add().Text("Italic").Icon("italic").Togglable(true).ShowText(ShowIn.Overflow);
                    buttons.Add().Text("Underline").Icon("underline").Togglable(true).ShowText(ShowIn.Overflow);
                });
                items.Add().Type(CommandType.Separator);
                items.Add().Type(CommandType.Button).Text("Insert Link").Icon("link").ShowText(ShowIn.Overflow);
            })
        )
    </div>

3. Handle the FloatingToolBar Events

The FloatingToolBar exposes events that you can handle to respond to user actions. In this tutorial, you will handle the Show and Hide events of the component.

Razor

    @(Html.Kendo().FloatingToolBar()
        .Name("floatingtoolbar")
        .Visible(true)
        .Events(events => events
            .Show("onShow")
            .Hide("onHide"))
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Insert Link").Icon("link");
        })
    )

    <script>
        function onShow(e) {
            console.log("The FloatingToolBar is shown.");
        }

        function onHide(e) {
            console.log("The FloatingToolBar is hidden.");
        }
    </script>

4. (Optional) Reference Existing FloatingToolBar Instances

To use the client-side API of the FloatingToolBar, get a reference to the component instance by using its Name(). Then, call the client-side methods to control the toolbar.

Razor

    @(Html.Kendo().Button()
        .Name("showToolbar")
        .Content("Show Toolbar")
        .Events(events => events.Click("onShowClick"))
    )
    @(Html.Kendo().Button()
        .Name("hideToolbar")
        .Content("Hide Toolbar")
        .Events(events => events.Click("onHideClick"))
    )

    <script>
        function onShowClick() {
            $("#floatingtoolbar").data("kendoFloatingToolBar").show();
        }

        function onHideClick() {
            $("#floatingtoolbar").data("kendoFloatingToolBar").hide();
        }
    </script>

Getting Started with the FloatingToolBar

Prerequisites

1. Prepare the CSHTML File

2. Initialize the FloatingToolBar

3. Handle the FloatingToolBar Events

4. (Optional) Reference Existing FloatingToolBar Instances

Next Steps

See Also