how to use itemTemplate to customize filter menu?

[James]

I have a column configured as below:

.Filterable(f => f.Multi(true)
            .CheckAll(true)
            .ItemTemplate("itemTemplate")
            .Search(true)
            .DataSource(ds => ds.Read(r => r.Action("Items_Distinct", "Admin")))

Items_Distinct method is returning a collection (List) of strings.

itemTemplate function is as below:

function itemTemplate(e) {
        if (e.field == "all") {
            //handle the check-all checkbox template
            return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>";
        } else {
            //handle the other checkboxes
            return "<span><label><input type='checkbox' name='" + e.field + "' value='#=Label#'/>&nbsp;<span>#= Label #</span></label></span><br/>"
        }
    }

When I run the application and open the filter menu, I get below error:

Uncaught ReferenceError: Label is not defined
    at eval (eval at compile (kendo.all.js:309417:87), <anonymous>:3:148)
    at Object.render (kendo.all.js:309417:87)
    at init.createCheckBoxes (kendo.all.js:309417:87)
    at init.refresh (kendo.all.js:309417:87)
    at init.checkChangeHandler (kendo.all.js:309417:87)
    at init.trigger (kendo.all.js:309417:87)
    at init._process (kendo.all.js:309417:87)
    at init.success (kendo.all.js:309417:87)
    at success (kendo.all.js:309417:87)
    at t.success (kendo.all.js:309417:87)

Can someone please point my mistake? I used one of the dojo's as template to develop my itemTemplate function and apparently I did not understand where "Label" is defined. What am I missing?

Thanks.

[Alexander]

Hi James,

Generally, when the templating syntax is utilized within the boundaries of the Grid, it will provide the column's field value which can be further used for customizing any arbitrary client-side template that is used on the premises. Based on the provided error, it appears that the template cannot find a "Label" column field within the Grid's model definition. Thus, could you please confirm whether this is the case? For example:

Grid:

@(Html.Kendo().Grid<OrderViewModel>

Grid Model:

public class OrderViewModel
{
    // Additional fields...

    public string Label
    {
        get;
        set;
    }

}

Or, try to reproduce the behavior within the following Telerik REPL example used for testing purposes. Notice, that the template is used particularly for the "Country" field:

• Telerik REPL for ASP.NET Core Example

You can also review the following demo that demonstrates the full implementation of the MultiCheckbox filtering whilst having a item template utilized as well which you can use as an anchor point as well:

• Grid Filter Multi Checkboxes Demo - open the "View Source" tab to observe the Grid's configuration.

Looking forward to hearing back from you.

Kind Regards,
Alexander
Progress Telerik

[James]

Yes, that was the issue. Items_Distinct method was not returning a list of anonymous objects with Label property in them.

That solved the issue for me. Thank you!