Creating Custom Grid Toolbar Template
Environment
| Product | Telerik UI for ASP.NET Core Grid |
| Product Version | 2017.3 1026 |
Description
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?
Solution
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:
- Add the toolbar configuration like this:
.ToolBar(t=>t.ClientTemplateId("toolbar")) // this should be the script tag id - 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">
@(Html.Kendo().DropDownList()
.Name("SomeName")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "All",
Value = "0"
},
new SelectListItem() {
Text = "Processing",
Value = "1"
},
new SelectListItem() {
Text = "Ready",
Value = "3"
}
}).ToClientTemplate())
@(Html.Kendo().Button()
.Name("statusSelectButton")
.Content("Go!")
.HtmlAttributes(new { type = "button", @class = "k-button" })
.Events(ev => ev.Click("onStatusSelectPending")).ToClientTemplate())
</div>
<div class="pull-right">
<i class="icon-barcode"></i>
@(Html.Kendo().TextBox()
.Name("barcodeSearchPending")
.HtmlAttributes(new { placeholder = "Barcode Search", style = "width:250px" })
.ToClientTemplate())
@(Html.Kendo().Button()
.Name("barcodeSearchButtonPending")
.Content("Search")
.HtmlAttributes(new { type = "button", @class = "k-button" })
.Events(ev => ev.Click("onSelectBarcodeSearchPending")).ToClientTemplate())
</div>
</script>
<script>
function onStatusSelectPending() { alert("onStatusSelectPending") }
function onSelectBarcodeSearchPending() { alert("onSelectBarcodeSearchPending") }
</script>
<style>
.k-grid .pull-right {
margin-left: auto;
margin-right: 0;
}
</style>
Here is a REPL example demonstrating the above with version 2021.3.914