Integration with Editors

The ToolBar component can be used together with the Template component to present custom content to the user.

The content may include various editors like NumericTextBox, Switch, and more, as they can be conveniently embedded in the ToolBar definition.

The example below demonstrates how you integrate a NumericTextBox for entering the size of a given product and then accessing the new value at runtime.

Razor

<script>
    function onSizeChange(e) {
        alert("New Value: " + this.value());
    }
</script>

@(Html.Kendo().ToolBar()
    .Name("ToolBar")
    .Resizable(false)
    .Items(items => {
        items.Add().Template(Html.Kendo().Template()
            .AddHtml("<label>Product Size:</label>")
            .AddComponent(numBox => numBox
                .NumericTextBox()
                .Name("size")
                .HtmlAttributes(new { style = "width: 70px;" })
                .Value(150)
                .Decimals(0)
                .Min(50)
                .Max(300)
                .Format("n0")
                .Events(ev => ev.Change("onSizeChange"))
            )
        );
    })
)

Next Steps

• ToolBar Integration with Editors (Demo)
• Basic Usage of the Template component (Demo)
• Using the API of the ToolBar for ASP.NET MVC (Demo)

See Also

• Server-Side API of the ToolBar HtmlHelper

• Client-Side API of the ToolBar