Excel Export Column Template with Multiple Header Not Working

2 posts, 0 answers
  1. Brad
    Brad avatar
    2 posts
    Member since:
    Feb 2016

    Posted 01 May 2017 Link to this post

    When attempting to find my column template using

    var userActivityTemplate = kendo.template(this.columns[9].template);

     

    I am receiving the following error:

    Uncaught TypeError: Cannot read property 'template' of undefined
        at init.excelExport (user-task-summary.js:328)
        at init.trigger (kendo.all.min.js:25)
        at init.<anonymous> (kendo.all.min.js:30)
        at Object.proxy (jquery-2.1.4.js:512)
        at Object.<anonymous> (jquery-2.1.4.js:3256)
        at fire (jquery-2.1.4.js:3099)
        at Object.add [as done] (jquery-2.1.4.js:3145)
        at Array.<anonymous> (jquery-2.1.4.js:3255)
        at Function.each (jquery-2.1.4.js:374)
        at Object.<anonymous> (jquery-2.1.4.js:3252)

     

    It appears that when using multiple header rows, the template is not a defined key.

    Here is my multiple header column definition

    {
                    title: "Activity",
                    columns: [
                        {
                            field: "estimatedHours",
                            title: "Estimated"
                        },
                        {
                            field: "userActivityMinutes",
                            title: "User",
                            template: function (dataItem) {
                                return FormatMinutesToHours(dataItem.userActivityMinutes);
                            }
                        },
                        {
                            field: "activityTotalMinutes",
                            title: "Total",
                            template: function (dataItem) {
                                return FormatMinutesToHours(dataItem.activityTotalMinutes);
                            }
                        }
                    ]
                }

     

    attached is the console output with the column definition expanded.

    Can you tell me the proper way to locate the template definition in this scenario?

    Thank you

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 03 May 2017 Link to this post

    Hi Brad,

    The error that you are getting means that you do not have a column at this index at all. If only the template was missing, you would just get an undefined result (you can try with a smaller index to see it for yourself).
    When declaring nested columns, the structure at which they will be stored in the Grid is exactly the same as what you declare in the options. So, if you have the following columns list:
    columns: [{
        field: "CompanyName",
        title: "Company Name",
        width: 420
    },
    {
        title: "Contact Info",
        columns: [{
            field: "ContactTitle",
            title: "Contact Title",
            width: 200
        },{
            field: "ContactName",
            title: "Contact Name",
             template: "name: #:ContactName#",
            width: 200
        },{
            title: "Location",
            columns: [ {
                field: "Country",
                width: 200
            },{
                field: "City",
                width: 200
            }]
        },{
            field: "Phone",
            title: "Phone"
        }]
    }]

    and want to get the template of the ContactName column, it will be in:
    var template =  this.columns[1].columns[1].template;

    If this way of hard-coding indexes is not convenient, you can consider declaring the template in a separate variable and use it both in the columns definition and in your excelExport event:
    var template = "name: #:ContactName#";
     
       //.........
    columns: [{
        field: "CompanyName",
        title: "Company Name",
        width: 420
    },
    {
        title: "Contact Info",
        columns: [{
            field: "ContactTitle",
            title: "Contact Title",
            width: 200
        },{
            field: "ContactName",
            title: "Contact Name",
             template: template,
            width: 200
        }]
    }],
    excelExport: function(e){
       // use template
    }



    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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