Toolbar Template Syntax in Razor

4 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
  3. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 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.

     
  5. Chris
    Chris avatar
    119 posts
    Member since:
    Oct 2015

    Posted 05 Feb 2020 in reply to Nikolay Rusev Link to this post

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

      toolbar.Template(@<text>

     

    Best regards

     

    Chris

     

     

  7. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 06 Feb 2020 Link to this post

    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.
  8.
Back to Top