pivotgrid template and angularjs not working together

[ron]

hey, i'm ecaluating the pivot grid using the trial version. i seem to have problems getting angularjs and the pivot templates to work together.

my script imports in the index are as follows: 

  <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/kendo-ui/js/kendo.all.min.js"></script>

in the HTML page i have: 

    <div class="col-md-12" ng-if="vm.data.HeatChartSkillsPerResource && vm.data.HeatChartSkillsPerResource.length > 0">
        <kendo-pivot-grid  k-data-source="vm.dataSource" k-options="vm.options" id="pivotgrid" class="hidden-on-narrow">
            <div k-column-header-template>
                {{member.caption}}
            </div>
        </kendo-pivot-grid>

in the relevant controller: 

 

    vm.dataSource = new kendo.data.PivotDataSource({
                    data: vm.gridOptions.data,
                    schema: {
                        model: {
                            fields: {
                                FullName: {
                                    type: 'string'
                                },
                                skill_rating: {
                                    type: 'number'
                                },
                                skill_name: {
                                    field: 'Skill.SkillName'
                                },
                                Category: {
                                    field: 'Skill.Category'
                                }
                            }
                        },
                        cube: {
                            dimensions: {
                                FullName: {
                                    caption: 'Resources'
                                },
                                Category: {
                                    caption: 'Categories'
                                },
                                skill_name: {
                                    caption: 'Skills'
                                }
                            },
                            measures: {
                                'Average': {
                                    field: 'skill_rating', aggregate: 'average'
                                }
                            }
                        }
                    },
                    columns: [{ name: 'FullName', expand: true }],
                    rows: [{ name: 'Category', expand: true }, { name: 'skill_name', expand: true }],
                    measures: ['Average']
                });

 

        vm.options = {
            columnWidth: 100,
            height: 500,
            filterable: true,
            sortable: true,
            reorderable: false
        }

 

the data is loaded as expected but column header templates (or any other templates) don't recognize angularjs. what i see is {{member.caption}} inside the headers. (as in the attached file).

i don't see any errors.

any help on that?

[Stefan]

Hello, Ron,

Thank you for reporting this.

This is a known issue which is already added to our internal backlog. I have raised its priority, but please have in mind that it is a complex scenario.

Currently, we can suggest using the Kendo UI template syntax for setting the template:

$scope.options = {
          columnHeaderTemplate: "#=member.caption#",

Apologies for the inconvenience this may have caused you.

Regards,
Stefan
Progress Telerik

[ron]

but what if i need something more complex, with angular directives and accessing data from a controller?

is there any progress on this issue?

because i see angular is used inside the templates of other components like the list view.

is there a problem with trial version maybe?

[Stefan]

Hello, Ron,

I do understand that the suggested approach has its limitations, but currently, it is the supported one due to the mentioned issue.

The issue is a complex one and it is covering more than one widget.

Please have in mind that as the Angular team is mostly working on Angular 2+, we are also focusing our efforts on improving our Angular 2+ suite and the ETA for fixing this one may vary depending on the community demand.

Regards,
Stefan
Progress Telerik

[ron]

is this issue specific to the PivotGrid? because is see angularjs is used in the templates on the demos of other components

[Stefan]

Hello, Ron,

The issue is for these controls and some of them supported it partially:

- AutoComplete
- Calendar
- ComboBox
- DatePicker
- DateTimePicker
- DropDownList 
- ListView
- MultiSelect
- PivotGrid
- Scheduler
- TreeList
- TreeView



Regards,
Stefan
Progress Telerik

[ron]

well that's just NOT OK of you guys to say in the documentation that angularjs is supported for these controllers, give examples of templates and than this....

[ron]

this https://docs.telerik.com/kendo-ui/AngularJS/introduction#template-directives documentation is very misleading!

[Pavlina]

Hello,

Thank you for your feedback. We will edit the misleading section of the documentation and the tutorial will showcase the workaround suggested by my colleague Stefan as a temporary solution until the issue is resolved. Additionally we will do our best to resolve the problem with the wrong Angular Template as soon as possible.

Please excuse us once again for the inconvenience caused by this bug.

Regards,
Pavlina
Progress Telerik