Toolbar Template Syntax in Razor

[Ristogod]

I have a grid where I am trying to put a drop down list in the toolbar of the grid.

This is the syntax I am using:

Html.Kendo()
            .Grid<Fss.Areas.Customers.Models.Contact>()
            .Name("ContactsGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.LastName);
                columns.Bound(c => c.FirstName);
                columns.Bound(c => c.Email);
                columns.Bound(c => c.Phone);
                columns.Bound(c => c.Mobile);
                columns.Bound(c => c.Changed).Format("{0:HH:mm:ss d/M/yyyy}");
                columns.Bound(c => c.ChangedBy);
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                }).Width(172);
            })
            .ToolBar(toolbar =>
            {
                toolbar.Create();
                toolbar.Template(() =>
                {
                    @<div class="toolbar">
                        @{
                            Html.Label("Customer");
                            Html.Kendo()
                                .DropDownList()
                                .Name("CustomersComboBox")
                                .HtmlAttributes(new { style = "width: 400px" })
                                .DataTextField("Name")
                                .DataValueField("CustomerId")
                                .AutoBind(false)
                                .Events(e => e.Change("changeCustomer"))
                                .DataSource(source => source.Read(read => read.Action("GetCustomers", "Contacts")));
                        }
                    </div>
                });
            })
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Pageable()
            .Sortable()
            .Scrollable()
            .Reorderable(con => con.Columns(true))
            .Resizable(con => con.Columns(true))
            .ColumnResizeHandleWidth(5)
            .HtmlAttributes(new { style = "height:600px;" })
            .Events(e => e.Edit("edit"))
            .DataSource(dataSource => dataSource.Ajax()
                                                .PageSize(10)
                                                .Events(events => events.Error("error_handler"))
                                                .Model(model =>
                                                {
                                                    model.Id(c => c.ContactId);
                                                    model.Field(f => f.Changed).Editable(false);
                                                    model.Field(f => f.ChangedBy).Editable(false);
                                                    model.Field(f => f.Error).Editable(false);
                                                })
                                                .Create(c => c.Action("Create", "Contacts"))
                                                .Read(r => r.Action("Read", "Contacts"))
                                                .Update(u => u.Action("Edit", "Contacts"))
                                                .Destroy(d => d.Action("Delete", "Contacts")));

I am following an example found here:
http://demos.telerik.com/kendo-ui/Beta/web/grid/toolbar-template.html

This seems to compile OK, but at runtime it throws this error. It's saying it's missing a semicolon, but I don't understand where I would put one:

Server Error in '/' Application.

Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1002: ; expected

Source Error:

Line 186:EndContext(__razor_template_writer, "~/Areas/Customers/Views/Contacts/Customer.cshtml", 1606, 30, true);
Line 187:
Line 188:})
Line 189:
Line 190: #line 44 "C:\Users\riston\Desktop\Fss\Fss\Areas\Customers\Views\Contacts\Customer.cshtml"
Source File: c:\Users\riston\AppData\Local\Temp\Temporary ASP.NET Files\root\c09ffc8d\a8a27bfd\App_Web_customer.cshtml.d9b99660.sjvq2jbh.0.cs    Line: 188

[Nikolay Rusev]

Hello Ristogod,

Your template doesn't have well formed Razor template. In the demos you mention go to the ASP.NET MVC tab of the code viewer and inspect the `toolbar_template.cshtml` file. Here are the important bits:

.ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
           <div class="toolbar">
                    <label class="category-label" for="category">Show products by category:</label>
                        @(Html.Kendo().DropDownList()
                            .Name("categories")
                            .OptionLabel("All")
                            .DataTextField("CategoryName")
                            .DataValueField("CategoryID")
                            .AutoBind(false)
                            .Events(e => e.Change("categoriesChange"))
                            .DataSource(ds =>
                            {
                                ds.Read("ToolbarTemplate_Categories", "Grid");
                            })
                        )
                        </div>
        </text>);
    })

Regards,
Nikolay Rusev
Telerik

 

 

[Chris]

How to do this in .NET Core Application ?? Template(Func<Grid<T>, object> template) method not found : 

  toolbar.Template(@<text>

 

Best regards

 

Chris

 

 

[Tsvetomir]

Hi Chris,

The implementation toolbar template in ASP.NET Core is different due to rendering differences compared to the ASP.NET MVC framework. Therefore, you should declare it as follows:

 .ToolBar(toolbar => {
        toolbar.ClientTemplateId("GridToolbarTemplate");
    })

<script id="GridToolbarTemplate" type="text/x-kendo-template">
     // content goes here
</script>

You could check out the respective live demo here:

https://demos.telerik.com/aspnet-core/grid/toolbar-template

 

Regards,
Tsvetomir
Progress Telerik