Getting error when using @<text> on my Razor page

[Ryan]

Hi All,

I'm trying out https://demos.telerik.com/aspnet-mvc/grid/toolbar-template on my razor page

but I'm getting error "Cannot convert lambda expression to type 'string' because it is not a delegate type" when using @<text>

if I change the @<text></text> to "" it works but adding  @(Html.Kendo().DropDownList() ..... shows as text only.

toolbar.ClientTemplate(@<text>
<div class='toolbar'>
  <label class='category-label' for='category'>Show products by category:</label>
</div>
</text>);

[Petar]

Hi Ryan,

I've tested the code from the linked example and the custom Toolbar is displayed as expected on my side. Please find attached a project demonstrating the implementation of the Toolbar from the demo(the filtering functionality is not implemented). 

You can compare the attached application to the one you are working on and try to identify what are the differences and thus find the reason for the reported behavior.

If the issue continues to exist, please modify the attached project in a way the reported behavior could be reproduced or send me a new runnable project that demonstrates it. 

Regards,
Petar
Progress Telerik

[Ryan]

Its not working at my end.

Please check attached proj. I have commented out the code, but if you uncomment it, it will show error.

Thanks

[Petar]

Hi Ryan,

The project I've sent you is using ASP.NET MVC because of the Product set for the current ticket. The project you've sent me is using Razor Pages and this makes it an ASP.NET Core project. The way you can achieve the desired functionality in the context of Razor Pages is to use a ClientTemplateID. With it the definition of the Grid will look like:

 @(Html.Kendo().Grid<UserList>().Name("grid")
    .HtmlAttributes(new { style = "font-family: verdana,arial,sans-serif; font-size: 13px;color: #333333;border-color: #999999;" })
    .Filterable()
    .Sortable()
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Scrollable()
    .Columns(columns =>
    {
        columns.Select().Width(50);
        columns.Bound(column => column.Username).ClientFooterTemplate("<input id='dropDownList'></input>"); ;
        columns.Bound(column => column.FirstName);
        columns.Bound(column => column.LastName);
        columns.Bound(column => column.Email);
    })
    .Excel(excel => excel
    .FileName("Export.xlsx")
    .Filterable(true)
    .ProxyURL("/Grid?handler=Save")
    )
    .Events(ev => ev.DataBound("onDataBound"))
    .DataSource(ds => ds.Ajax()
            .Read(r => r.Url("/Grid?handler=Read").Data("forgeryToken"))
            .Model(m => m.Id(id => id.Username))
        .PageSize(20)
    )
    .ToolBar(toolbar =>
    {
        toolbar.ClientTemplateId("toolBarTemplate");
    })
    .Search(search => { search.Field(f => f.Username); search.Field(f => f.FirstName); search.Field(f => f.LastName); search.Field(f => f.Email); })
    .Pageable(pageable => pageable
    .PageSizes(true)
    .ButtonCount(2))
    )

where the definition of the "toolBarTemplate" looks like:

<script id="toolBarTemplate" type="text/x-kendo-template">
    <text>
        <div class="refreshBtnContainer">
            <a href="\\#" class="k-pager-refresh k-link k-button k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
        </div>
        <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)
                .HtmlAttributes(new { style = "width: 150px;" })
                .DataSource(ds =>
                {
                    ds.Read("ToolbarTemplate_Categories", "Grid");
                })
                .ToClientTemplate()
            )
        </div>
    </text>
</script>

It is important to add the "ToClientTemplate" configuration to the definition of the DropDownList. 

Please find attached a project demonstrating the implementation of the above code. Let me know if you have any questions regarding the proposed implementation.

Regards,
Petar
Progress Telerik

[Stefan]

Hi @Petar,

 

please allow another question on this (old) topic.

Does it mean that in ASP.NET Core it's no longer possible to use the razor text tag when defining the template?

I mean this: toolbar.ClientTemplate(@<text>

 

Thanks

Sven

 

[Alexander]

Hi,

At this stage, the .ClientTemplate() API configuration only exposes two overloads that can be utilized in the context of the Telerik UI for ASP.NET Core Grid incarnation.

This can be observed within the "GridToolBarCommandFactory" class:

public class GridToolBarCommandFactory<T> : IHideObjectMembers where T : class
{

    public void ClientTemplate(string template)
    {
        settings.ClientTemplate = template;
    }


    public void ClientTemplate<TModel>(TemplateBuilder<TModel> template)
    {
        settings.ClientTemplateHandler = template.ToString();
    }
}

However, if the desired outcome is to omit the need to explicitly define an additional "<script>" block in the razor view, I would recommend the following more razor-friendly alternatives instead:

• Partial Client Templates (Documentation) - showcases a Grid ToolBar scenario.

• Template Component (Documentation) - the same approach is also applicable to the Grid Toolbar.

Nevertheless, adding a delegate overload for the Grid's Toolbar has not been requested thus far. In this regard, I have additionally logged a feature request and added a vote on your behalf. You can find the item here:

Add Delegate overload for the ToolBar.ClientTemplate() API

Please give the aforementioned suggestions a try and let me know how it works out for you.