Kendo-angular: Kendo Angular Grid shows columns and column headers out of order

[tmiranda]

I'm submitting a...

Bug report

Current behavior

After updating the angular grid component to version ~1.7, data displayed in the grid columns are out of order and the column headers no longer match the data in the column. This only presents itself if the number of columns is greater than 10. If the number of columns is 10 or less, it functions as expected, but if the number of columns is greater than 10, the problem presents itself. This only presents itself in the Chrome browser (currently using Version 64.0.3282.119 64-bit). It functions correctly in Internet Explorer 11 and the latest Firefox (currently version 57.0.4)

Expected behavior

The columns and column headers are rendered in order and the column headers match the data in the columns.

Minimal reproduction of the problem with instructions

I attempted to create a Plunker with some minimal made up data, but the problem did not present itself with more than 10 columns. I am attempting to create a plunker that will reproduce and will update the ticket.

Environment

Package versions:
Kendo Angular Grid ~1.7

Browser:

• Chrome (desktop) version 64.0.3282.119 (fails)
• Firefox version 57.0.4 (works)
• IE version 11.0.9600.18893

System:

• TypeScript version: 2.5.3
• Node version: 6.9.1
• Platform: Windows

I have spent quite a bit of time testing and the following are my findings:

If I limit the number of columns to 10, it works fine. Increasing the number of columns even by 1, to 11, causes it to fail.
The same exact page works fine in Internet Explorer 11 and the latest Firefox.
The order of the column headers is not random. The column headers are out of order in exactly the same way every time the data is loaded.
The order of the grid columns, although they don't all match the order of the headers, are not random either. They are out of order in exactly the same way every time the data is loaded.
I am using some logic to show a different template for the cell based on whether the column is the first column or not using

The cell template looks like this:

{{dataItem[column.name]}}
{{dataItem[column.name]}}

Even though the columns appear out of order, the column that should be first, shows up in the second column, but it uses the anchor cell template as though it were in the first column. In other words, the data for the first column shows up as an anchor but is actually shown in the second column, not the first.

[rkonstantinov]

Hey @tmiranda, thanks for the report. Unfortunately, we are not aware of such a problem, nor we are able to re-create it locally. Thus, a small sample which demonstrate the issue will be highly appreciated.

[tmiranda]

Thanks, @rkonstantinov. I am attempting to create an example that breaks. I created a simple Plunker and was not able to replicate the problem, so I am continuing to try to create an example that breaks. I was hoping with all the information I had provided, it might trigger a thought as to what the problem might be. As I said, it works fine in IE and Firefox. So my feeling is that it is not anything I am doing in code (unless there is some styling issue that could cause the problem and would render differently in Chrome). While I am trying to create a sample to demonstrate the problem, do you have any thoughts on what might be causing the problem?

[tmiranda]

As more information on this issue: In Chrome: if I interrogate the properties of the grid component in the browser debug tools, I notice that the order of the fields in the "columns" property is the intended order. The order of the fields in the "columnList" property is the order that is displayed for the content of the grid which does not match the "columns" property or the headers of the grid.
In Internet Explorer (where the grid appears to be working properly): the order of the fields in the "columns" property matches that of the "columnList" property which also matches the headers.

Why would the columnList property contain a different order of the fields from one browser to the next?

[tsvetomir]

Can you try the same in an "incognito window", e.g. without browser plug-ins?

[rkonstantinov]

@tmiranda, could you please verify that you are using latest version (1.1.2) of kendo-data-query package.

[tmiranda]

Thanks guys. The issue was with the kendo-data-query package. I am upgrading an existing application. As a result, I was being very particular as to what I was upgrading attempting to keep the scope as small as possible. The kendo-data-query package had not been updated. I updated the kendo-data-query package to 1.1.2 and everything works. Thanks for all the help!

[samunro]

I had exactly the same behaviour as @tmiranda and upgrading from version 1.0.4 of @progress/kendo-data-query to 1.1.2 as he described did the trick for me too.