Use editor template handler with tag helper

[Dubravko]

When using clasic ASP.NET Core approach user can define custom editor template like this:

f.Add(p=>p.CategoryID).Label("Category").DefaultValue(1).EditorTemplateHandler("categoryDropDownEditor");

function categoryDropDownEditor(container, options) {
        $('<input data-bind="value: value" name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "CategoryName",
                dataValueField: "CategoryID",
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                    }
                }
            });
    }

 

Is this possible to achieve using Tag helpers and is there any way to pass the parameter/s to the categoryDropDownEditor function?

[Mihaela]

Hi Dubravko,

Thank you for the example.

Indeed, you could configure the Kendo UI Filter widget via Tag Helpers and define a custom editor template to a specific field as follows:

• Add the "editor-template-id" property to the 'filter field tag and specify the id of the Kendo UI Template:

<kendo-filter name="filter" apply-button="true" datasource-id="dataSource1">
  <fields>
    <filter-field name="CategoryID" default-value="1" editor-template-id="myTemplate"></filter-field>
  </fields>
</kendo-filter>

<script type="text/x-kendo-template" id="myTemplate">
  ...
</script>

• Insert the function "categoryDropDownEditor" in the template and specify its parameters:
  

1. The HTML element, which contains the value of the filter's field --> $('.k-filter-toolbar-item.k-filter-value')
2. The object "data", which stores the name of the filter's field (i.e. "CategoryID"). It is passed to the template from the field.

<script>
  function categoryDropDownEditor(container, options) {
       //initializing and appending the Kendo UI DropDownList
  }
</script>

<script type="text/x-kendo-template" id="myTemplate">
  # categoryDropDownEditor($('.k-filter-toolbar-item.k-filter-value'), data) #
</script>

Hopefully, this example would be helpful to your case.

In case of any additional questions, please let me know.

 

Regards, Mihaela Lukanova Progress Telerik

[Dubravko]

Thank you, this solved my problem.