# Integration with Editors

The ToolBar component can be used together with the [Template component](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/template/overview) to present custom content to the user.

The content may include various editors like [NumericTextBox](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/numerictextbox/overview), [Switch](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/switch/overview), 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 HtmlHelper
<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"))
            )
        );
    })
)
```

```Razor TagHelper
@addTagHelper *, Kendo.Mvc

<kendo-toolbar resizable="false" name="ToolBar">
    <toolbar-items>
        <item template="<label>Size:</label><input id='size' style='width: 70px;' type='text' />">
        </item>
    </toolbar-items>
</kendo-toolbar>

<script>
    $("#size").kendoNumericTextBox({
            value: 150,
            decimals: 0,
            format: "n0",
            max: 300,
            min: 50,
            change: function () {
              alert("New Value: " + this.value());
            }
    });
</script>
```

## Next Steps

* [ToolBar Integration with Editors (Demo)](https://demos.telerik.com/aspnet-core/toolbar/integration)
* [Basic Usage of the Template component (Demo)](https://demos.telerik.com/aspnet-core/template)
* [Using the API of the ToolBar for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/toolbar/api)

## See Also

* [Server-Side API of the ToolBar HtmlHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/toolbar)

* [Server-Side API of the ToolBar TagHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/toolbar)

* [Client-Side API of the ToolBar](https://docs.telerik.com/kendo-ui/api/ui/toolbar)