This is a migrated thread and some comments may be shown as answers.

[Solved] Grid with multi column headers after binding desynchronizes field and title in some columns

6 Answers 392 Views

Grid

This is a migrated thread and some comments may be shown as answers.

José Angel asked on 23 Jan 2015, 07:07 PM

template.zip

Hi,

I'm getting a strange behavior in a grid after update to the latest 2014.3.1316 version in some header elements where values of "data-field" attribute mismatched the expected value however the title and the rest of attributes are correct. As I have described it in the title this occurs when I arrange the column's configuration array for multicolumns mode but not if I use single column headers.

After a while debugging, I've found that headers are well generated and fields are synchronized before binding the view and the model. Just after returning from the bind function is when headers change incorrectly.

The grid is defined inside a template file and it is compile as follow:

<div id="product-grid4"

class="product_grid_widget"

data-role="grid"

data-auto-bind="false"

data-sortable="true"

data-pageable="false"

data-filterable="{ extra: false }"

data-bind="source: products.dataSource"

data-editable="false"

data-selectable="true"

data-resizable="true"

data-scrollable="true"

data-reorderable="false"

data-columns='[{

"field" : "_SELECTED_",

"type" : "integer",

"filterable" : false,

"title" : "",

"width" : 29,

"headerTemplate" : "",

"template" : "<div id=\"#=Order_Code#\" class=\"grid-selection-column-box#if(_SELECTED_>-1){# #=WE.selectionColumnTemplate(Order_Code)##}#\"><

div class=\"checkmark\"></div></div>",

"attributes" : {

"class" : "checkmark"

}

}, {

"field" : "Series",

"type" : "string",

"title" : "Series",

"width" : 85,

"filterable" : true

}, ...

(The complete text is attached)

As I mentioned. Before binding, the header elements are correctly defined:

<th class="k-header" role="columnheader" rowspan="2" data-field="_SELECTED_" data-role="columnsorter" data-index="0">

<a class="k-link" href="#"/>

</th>

<th class="k-header k-with-icon k-filterable" role="columnheader" rowspan="2" data-field="Series" data-role="columnsorter" data-index="1" data-title="Series">

<a tabindex="-1" class="k-grid-filter" href="#">

<span class="k-icon k-filter"/>

</a><a class="k-link" href="#">Series</a>

</th>

<th class="k-header k-with-icon k-filterable" role="columnheader" rowspan="2" data-field="Order_Code" data-role="columnsorter" data-index="2" data-title="Order Code">

<a tabindex="-1" class="k-grid-filter" href="#">

<span class="k-icon k-filter"/>

</a><a class="k-link" href="#">Order Code</a>

</th>

<th class="k-header" role="columnheader" rowspan="2" data-field="Datasheet" data-index="3" data-title="Spec">Spec</th>

<th class="k-header k-with-icon k-filterable" role="columnheader" rowspan="2" data-field="Type" data-role="columnsorter" data-index="4" data-title="Type">

<a tabindex="-1" class="k-grid-filter" href="#">

<span class="k-icon k-filter"/>

</a><a class="k-link" href="#">Type</a>

</th>

<th class="k-header" role="columnheader" colspan="6" data-field="" data-title="Electrical Properties" data-colspan="6">Electrical Properties</th>

<th class="k-header" role="columnheader" colspan="5" data-field="" data-title="Dimensions" data-colspan="5">Dimensions</th>

<th class="k-header" role="columnheader" colspan="3" data-field="" data-title="Temperature" data-colspan="3">Temperature</th>

<th class="k-header" role="columnheader" colspan="4" data-field="" data-title="Construction" data-colspan="4">Construction</th>

However after binding, this what happens:

<th class="k-header" role="columnheader" rowspan="2" data-field="_SELECTED_" data-role="columnsorter" data-index="0">

<a class="k-link" href="#"/>

</th>

<th class="k-header k-with-icon k-filterable" role="columnheader" rowspan="2" data-field="Order_Code" data-role="columnsorter" data-index="1" data-title="Series">

<a tabindex="-1" class="k-grid-filter" href="#">

<span class="k-icon k-filter"/>

</a><a class="k-link" href="#">Series</a>

</th>

<th class="k-header k-with-icon k-filterable" role="columnheader" rowspan="2" data-field="Type" data-role="columnsorter" data-index="2" data-title="Order Code">

<a tabindex="-1" class="k-grid-filter" href="#">

<span class="k-icon k-filter"/>

</a><a class="k-link" href="#">Order Code</a>

</th>

<th class="k-header k-with-icon k-filterable" role="columnheader" rowspan="2" data-field="Temperature_Warming" data-role="columnsorter" data-index="3" data-title="Spec">

<a tabindex="-1" class="k-grid-filter" href="#">

<span class="k-icon k-filter"/>

</a><a class="k-link" href="#">Spec</a>

</th>

<th class="k-header k-with-icon k-filterable" role="columnheader" rowspan="2" data-field="Rated_Current" data-role="columnsorter" data-index="4" data-title="Type">

<a tabindex="-1" class="k-grid-filter" href="#">

<span class="k-icon k-filter"/>

</a><a class="k-link" href="#">Type</a>

</th>

<th class="k-header" role="columnheader" colspan="6" data-field="" data-index="5" data-title="Electrical Properties" data-colspan="6">Electrical Properties</th>

<th class="k-header" role="columnheader" colspan="5" data-field="" data-index="6" data-title="Dimensions" data-colspan="5">Dimensions</th>

<th class="k-header" role="columnheader" colspan="3" data-field="" data-index="7" data-title="Temperature" data-colspan="3">Temperature</th>

<th class="k-header" role="columnheader" colspan="4" data-field="" data-index="8" data-title="Construction" data-colspan="4">Construction</th>

Of course, this cause many unexpected problems when filter or show/hide columns.

I chose to avoid the multicolumn by the moment because I has not been able to found a solution.

Thanks so much.

6 Answers, 1 is accepted

answered on 01 Mar 2015, 08:27 AM

Hi Rosen,

Unfortunately, this still doesn't seem to be working quite right. Here's an example that demonstrates the problem I'm seeing: http://dojo.telerik.com/ILihE. When using Kendo 2014 Q3 SP2 (2014.3.1411) or 2014 Q3 SP1 (2014.3.1316), the columns are out of sync in both IE and Chrome. This behavior is the same with the latest internal build. Try sorting "Column 2" in this example.

When going back to Kendo 2014 Q3 (2014.3.1119), it's still out of sync in Chrome, albeit in a different way, but it works fine in IE. I've been sticking with the older version because things work fine in at least one browser, but I definitely want my web app to work in Chrome too. Are there any possible workarounds to this issue?

Thanks,
John