Toolbar Template Syntax in Razor

2 posts, 0 answers
  1. Ristogod
    Ristogod avatar
    63 posts
    Member since:
    Aug 2008

    Posted 13 Mar 2014 Link to this post

    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
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 14 Mar 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top