This is a migrated thread and some comments may be shown as answers.

Use editor template handler with tag helper

2 Answers 65 Views
Filter
This is a migrated thread and some comments may be shown as answers.
Dubravko
Top achievements
Rank 1
Dubravko asked on 09 Apr 2021, 01:29 PM

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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Mihaela
Telerik team
answered on 13 Apr 2021, 02:12 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dubravko
Top achievements
Rank 1
answered on 13 Apr 2021, 04:39 PM
Thank you, this solved my problem.
Tags
Filter
Asked by
Dubravko
Top achievements
Rank 1
Answers by
Mihaela
Telerik team
Dubravko
Top achievements
Rank 1
Share this question
or