Approved
Last Updated: 31 May 2019 15:01 by ADMIN
Ale
Created on: 28 May 2019 07:58
Category: Grid
Type: Bug Report
1
Cannot read property 'groupHeaderColumnTemplate' of undefined

Cannot read property 'groupHeaderColumnTemplate' of undefined.

I have my grid, with 4 columns:

 

var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: Utils.getUrlServices() + "getGrid",
                            dataType: "json",
                        }
                    },
                    requestEnd: function (e) {
                    },
                    schema: {
                        model: {
                            fields: {
                                id: {type: "number"},
                                name: { type: "string" },
                                    namecompany: { type: "string" },
                                hours: {type: "number"},
                                date: {type: "date"}
                            }
                        }
                    },
                    pageSize: 500,
                    group: [
                         {
                             field: 'name',
                             aggregates: [
                                          {field: "hours", aggregate: "sum" }
                                      ]
                         }, {
                             field: 'nomeImpresa',
                             aggregates: [
                                          {field: "hours", aggregate: "sum" }
                                      ]
                         },
                         { field: "hours",
                             aggregates: [
                                  {field: "hours", aggregate: "sum" },
                                  {field: "name", aggregate: "sum"},
                                  {field: "nameCompany", aggregate: "sum"},
                                  {field: 'date', aggregate: 'sum'}
                              ]
                         },
                         {field: 'date',
                             aggregates: [
                                          {field: "hours", aggregate: "sum" }
                             ]
                         }
                     ],
                     aggregate: [
                         {field: 'hours',aggregate: 'sum'}
                     ]
                });
                self.Grid.set("source", dataSource);

 

 

When i grouping for Date field, the browser run this error: 

 

kendo.all.js:65435 Uncaught TypeError: Cannot read property 'groupHeaderColumnTemplate' of undefined
    at HTMLTableRowElement.<anonymous> (kendo.all.js:65435)
    at Function.each (jquery.min.js:2)
    at I.fn.init.each (jquery.min.js:2)
    at init._renderGroupRows (kendo.all.js:65417)
    at init.hideColumn (kendo.all.js:64983)
    at Function.KendoUtils.hideGridColumns (kendo.utils.js:330)
    at init.dataBound (eval at <anonymous> (jquery.min.js:2), <anonymous>:77:32)
    at d (jquery.min.js:2)
    at init.handlers.<computed> (kendo.all.js:9520)
    at init.trigger (kendo.all.js:124)

 

 

 

 

 

 

 

 

 

6 comments
ADMIN
Alex Hajigeorgieva
Posted on: 31 May 2019 15:01
Hello, Ale,

The reported issue has been assigned to a developer to fix.

Can you please let us know what is the expected behaviour when all the columns are hidden?

Should the group headers be visible but without any columns or do you expect the grid to have no content at all?

1) Visible group headers and all columns hidden:



2) Nothing is visible when all columns are hidden



Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Alex Hajigeorgieva
Posted on: 30 May 2019 11:48
Hello, Ale,

Thank you for providing the additional information.

You are absolutely correct that this is where the error occurs - when all columns are hidden and the grid is grouped. Interacting with the column menu, this error will never occur because Kendo UI disables the last column to be made invisible, however it is possible to cause that error if all the columns are set as hidden true via the configuration or by using the hideColumn() method programmatically:



If the last column is hidden then the user would have no option to see anything at all and the column menu would be gone, hidden, too. 

I can confirm that this is a bug in Kendo UI and I have logged it to be fixed and also moved this thread to our Public Feedback portal and voted on your behalf here:

https://feedback.telerik.com/kendo-jquery-ui/1410772-cannot-read-property-groupheadercolumntemplate-of-undefined

I have also logged it in our public repository here:

https://github.com/telerik/kendo-ui-core/issues/5085

The fix would require a change in the source of the private _renderGroupRows function so a workaround could be to override that function before the grid is initialized.

Alternatively, you could leave at least one column visible or if all have to be hidden for some reason, you could do this:

- get the grid instance and set the first column programmatically as "hidden:false"
- set the grid as "autoBind: false"
- read() the grid dataSource and then
- hide the cells

grid.columns[0].hidden = false;
grid.dataSource.read().then(function(){
  grid.tbody.find("td").css({display: "none"})
});

Here is a runnable example:

https://dojo.telerik.com/aNaheGOd/2

Finally, as a token of appreciation for helping us improve I have also added some Telerik points to your account. 

Please accept our apology for any inconvenience this may have caused.

Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Ale
Posted on: 30 May 2019 09:04

The problem is that the situation in which I have all the columns grouped and invisible is not managed.
I must have at least one column that is visible: true and groupable: true otherwise the error is displayed

This is the point when the error is launched:

firstColumnGroupData = !column.groupHeaderTemplate && visibleColumns(that.columns)[0].groupHeaderColumnTemplate ? visibleColumns(that.columns)[0] : false;

 

at 65435 line of kendo.all.js

 

Ale
Posted on: 30 May 2019 08:16
Grid: {
                visible: false,
                source: [],
                dataBound: function () {

                   Utils.hiddenColumn(JSPage.kendoGridWidget);

                },
            },

 

I'm using MVVM pattern.

This error will only be executed when I group the date column.

At the dataBound of Grid, i run my util(a function) :

I have a function that hides the grouped columns. When this util is run on the date column, the error is thrown.

This is the code of my util:

//hide columns grouped

var group = grid.dataSource.group();
    for(var i=0; i < group.length; i++){
            grid.hideColumn(group[i].field);
     }

 

 

 

 

 

Ale
Posted on: 30 May 2019 08:06

self is the viemodel.

"var self = JSPage.viewModel;"

ADMIN
Alex Hajigeorgieva
Posted on: 30 May 2019 07:25
Hello, Ale,

Thank you for the provided code snippet and trying out Kendo UI.

To be able to assist you further, I would need some context - can you let me know what is self.Grid?

I tried to reproduce a similar behaviour with our MVVM grid, is this what is used in your application? 

Please check this runnable Dojo and let me know if you are using MVVM and if not, please advise on the specific way that the data source is set to the grid:

https://dojo.telerik.com/@bubblemaster/aTuzASIw

Look forward to hearing more from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.