Toolbar Template Syntax in Razor in UI for ASP.NET MVC

This is a migrated thread and some comments may be shown as answers.

Toolbar Template Syntax in Razor

3 Answers 249 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Ristogod asked on 13 Mar 2014, 04:47 PM

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

3 Answers, 1 is accepted

answered on 14 Mar 2014, 08:36 AM

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

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

answered on 06 Feb 2020, 02:25 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.