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

Grid Toolbar Template


Product Grid for Progress® Telerik® UI for ASP.NET Core
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 dropdown 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 approch?


Indeed the change which ASP.NET Core have made affects 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 v2021.3.914

In this article