Use editor template handler with tag helper

[Euan]

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

https://100001.link/ https://192168101.dev/ https://1921681254.link/

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 Euan,

You could create a custom editor in a FIlter TagHelper as per the example below:

 

<kendo-filter name="filter" apply-button="true" expression-preview="true" datasource-id="dataSource1">
        <fields>
            <filter-field name="ProductName"></filter-field>
            <filter-field name="CategoryID" editor-template="#=categoryDropDownEditor(data)#"></filter-field>
        </fields>
</kendo-filter>

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

According to the example above, you could pass the name of the field through the "categoryDropDownEditor" function (data.field).

Alternatively, the custom editor can be set by using the "editor-template-id" attribute:

 

<kendo-filter name="filter" apply-button="true" expression-preview="true" datasource-id="dataSource1">
        <fields>
            <filter-field name="ProductName"></filter-field>
            <filter-field name="CategoryID" editor-template-id="categoryDropDownEditor"></filter-field>
        </fields>
</kendo-filter>

<script type="text/html" id="categoryDropDownEditor">
    <kendo-dropdownlist name="CategoryID" is-in-client-template="true"
                        datatextfield="CategoryName"
                        datavaluefield="CategoryID"
                        data-bind="value: value">
        <datasource custom-type="odata">
            <transport>
                <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories" />
            </transport>
        </datasource>
    </kendo-dropdownlist>
</script>

Regarding the passing of additional parameters to the "categoryDropDownEditor" function, would you please explain the result you would like to achieve?

 

 

Regards, Mihaela Progress Telerik

[Paul]

Hi

For an example extending the built-in editor templates (such as numbers), you can just supply the template markup (for example only allowing integers) and Kendo will automatically call the NumericTextBox for you as if it was it's own so something like:

<script type="text/x-kendo-template" id="FilterValueNumberIntegerEditorTemplate">
    <input id="#: data.id #" name="#: data.field #" type="text" data-bind="value: value" class="numeric-integer" title="Enter a number" data-role="numerictextbox" data-decimals="0" data-format="0" data-restrict-decimals="true" />
</script>

This was enough for me to provide support for integers and decimals differently so in theory you could do the same for the textbox and date pickers.

The difficulty I had using the template approach here was working out a method to resolve the correct container for the appendTo() method call when your requirements are for an editor not the same type as those built-in.  In the drop down list example above the container jquery will result in multiple instances being created.  

In the end I had to resort to supplying the my editor function via the setOptions() method as this will automatically be supplied the correct container reference when called.

Kind regards, Paul

 

 

 

 

 

[Mihaela]

Hi Paul,

Thank you for sharing your solution with the community. It is much appreciated!