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

Creating Custom Grid Toolbar Template


Product Telerik UI for ASP.NET Core Grid
Product Version 2017.3 1026


We recently upgraded our ASP.NET MVC 5 to ASP.NET MVC Core 2.0.1 (running on net471), however we're running into some issues. The .ToolBar( t => t.Template( does not exist anymore and we had a drop-down list and a button we want to implement. Is there a workaround for it or if it needs to be replaced by something else what would be the best approach?


Indeed the changes in ASP.NET Core affect the server rendering, however, you can still have the same toolbar template using a client template. Here is how:

  1. Add the toolbar configuration like this: .ToolBar(t=>t.ClientTemplateId("toolbar")) // this should be the script tag id
  2. Move the HTML which is between the text tags into a script tag with the respective id:
    <script id="toolbar" type="text/kendo-tmpl">
        <div class="pull-left">
                    .BindTo(new List<SelectListItem>() {
                new SelectListItem() {
                    Text = "All",
                    Value = "0"
                new SelectListItem() {
                    Text = "Processing",
                    Value = "1"
                new SelectListItem() {
                    Text = "Ready",
                    Value = "3"

                .HtmlAttributes(new { type = "button", @class = "k-button" })
                .Events(ev => ev.Click("onStatusSelectPending")).ToClientTemplate())
        <div class="pull-right">
            <i class="icon-barcode"></i>

                .HtmlAttributes(new { placeholder = "Barcode Search", style = "width:250px" })

                    .HtmlAttributes(new { type = "button", @class = "k-button" })
                    .Events(ev => ev.Click("onSelectBarcodeSearchPending")).ToClientTemplate())

        function onStatusSelectPending() { alert("onStatusSelectPending") }
        function onSelectBarcodeSearchPending() { alert("onSelectBarcodeSearchPending") }

    .k-grid .pull-right {
            margin-left: auto;
            margin-right: 0;

Here is a REPL example demonstrating the above with version 2021.3.914

More ASP.NET Core Grid Resources

See Also

In this article