Kendo filter field dropdown not loading.

[Jawwad]

I have a filter on a datasource which in return updates a grid. The following are the code to filter and its' template handler.

 

The problem with this is that, I can load the categories at first when I'm creating the filters. But when I save and reload the filter from local storage, the category dropdown does not load. Please help me with this. It loads up only on a fresh filter.

Thanks in advance.

@(Html.Kendo().Filter<Lovely>()
                                .Name("OrgFilter")
                                .ApplyButton(true)
                                .ExpressionPreview(true)
                                .DataSource("DataSource")
                                .Fields(f =>
                                {
                                    f.Add(p=>p.OrgName).Label("Organization");
                                    f.Add(p=>p.CategoryId).Label("Category").EditorTemplateHandler("CategoryDropdown");
                                    f.Add(p=>p.AsAtDate).Label("As At Date");
                                }))

<script>
function CategoryDropdown(container, options) {
        $('<input data-bind="value: value" name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "CategoryId",
                dataValueField: "CategoryId",
                dataSource: @Json.Serialize(ViewData["Catogories"])
            });
    }
</script>

[Aleksandar]

Hi Jawwad,

The observed behavior will be expected - the getOptions method calls JSON.stringify and JSON.stringify() cannot serialize function references (e.g. event handlers), so if stringification is used for the retrieved state, all configuration fields, which represent function references, will be lost. You have two options to avoid this limitation: use a custom implementation to serialize JavaScript functions, or add the function references back to the deserialized configuration object before passing it to the setOptions method.

if (options) {
                options = JSON.parse(options);
                options.dataSource = OrganizationDataSource;
                options.fields[1].editorTemplate = CategoryDropdown;
                filter.setOptions(options);
                filter.applyFilter();
            }

Here is a sample REPL.

Regards,
Aleksandar
Progress Telerik

[Jawwad]

Thanks Aleksander. That was a great help.

Jawwad

 

[John]

I'm actually facing the same issue because I'm using Kendo but the solution that Aleksanders gave worked for me.

[Johhny]

Thanks that was helpful.