pivotgrid template and angularjs not working together

9 posts, 0 answers
  1. ron
    ron avatar
    5 posts
    Member since:
    Jan 2018

    Posted 14 Jan Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    1970 posts

    Posted 16 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. ron
    ron avatar
    5 posts
    Member since:
    Jan 2018

    Posted 29 Jan in reply to Stefan Link to this post

    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?

  4. Stefan
    Admin
    Stefan avatar
    1970 posts

    Posted 30 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. ron
    ron avatar
    5 posts
    Member since:
    Jan 2018

    Posted 08 Feb Link to this post

    is this issue specific to the PivotGrid? because is see angularjs is used in the templates on the demos of other components
  6. Stefan
    Admin
    Stefan avatar
    1970 posts

    Posted 09 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. ron
    ron avatar
    5 posts
    Member since:
    Jan 2018

    Posted 11 Feb in reply to Stefan Link to this post

    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....
  8. ron
    ron avatar
    5 posts
    Member since:
    Jan 2018

    Posted 11 Feb in reply to Stefan Link to this post

    this https://docs.telerik.com/kendo-ui/AngularJS/introduction#template-directives documentation is very misleading!
  9. Pavlina
    Admin
    Pavlina avatar
    6182 posts

    Posted 13 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top