Kendo Grid with angularjs Filter Row Custom Directive

Question

I've been trying to no end to try and create a custom filter template for Kendo grid, when the grid is in filterMode: "row". I can get the HTML to appear, but the angular directive is never compiled.

This is the filter configuration for the column:

filterable: {
                        cell: {
                            template: function getTemplate(args) {
                                var container = $("<span>").appendTo(args.element.parent());
                                var buttonTemplate = kendoGridService.compileTemplate({
                                    template: "modules/common/templates/kendo/columns/days-of-week-edit.tpl.html",
                                    data: options
                                });
                                container.append(buttonTemplate);
                            },
                            showOperators: false
                        }
                    }

Here is the compile template function mentioned above:

compileTemplate: function compileTemplate(options) {

                var template = $templateCache.get(options.template);
                var templateFn = kendo.template(template);
                var result = templateFn(options.data);

                return result;
            }

Here is what I see in the HTML:

<span class="k-operator-hidden">
  <input data-bind="value: value">
  <span>
   <days-of-week-edit data-item="dataItem"></days-of-week-edit>
  </span>
</span>

And finally, this is what I see in the UI. Not that the default input field is there, but nothing else is rendered.

M. Noreikis M. Noreikis · Accepted Answer · 2015-12-07T12:39:08

Seems like you also have to compile your template with Angular. Try using $compile service:

            var template = $templateCache.get(options.template);
            var templateFn = kendo.template(template);
            var result = templateFn(options.data);

            $compile(result)($scope);

            return result;

Just make sure you have a valid $scope object with the dataItem property inside

Kendo Grid with angularjs Filter Row Custom Directive

1 Answers