Sorting a grid, first column size changes

[John]

I have a grid, where the first column changes size when its being sorted.  No other column has this issue.  The issue persists when I specify a column width attribute as well.  Attached are screen shots.

Here is my grid definition:

this.qrList = $("#grid1").kendoGrid({
dataSource : this.ds,
sortable : {
mode : "single",
allowUnsort : false
},
selectable : "row",
pageable : {
buttonCount : 5
},
scrollable : false,
rowTemplate : _.template(QRListRow),
columns : [ {
field : "id",
title : "ID",
headerAttributes : {
"class" : "gridHeader"
}
}, {
field : "name",
title : "Name",
headerAttributes : {
"class" : "gridHeader"
}
}, {
field : "customerName",
title : "Customer",
headerAttributes : {
"class" : "gridHeader"
}
}, {
field : "createDate",
title : "Created",
headerAttributes : {
"class" : "gridHeader"
}
}, {
field : "dueDate",
title : "Due",
headerAttributes : {
"class" : "gridHeader"
}
}, {
command : {
text : "View Details"
},
title : " "
} ],
pageable : true,
navigatable : true
});

In addition, I use an underscore template for the row template:

<tr class="qrGridRow">
<td><%= id %></td>
<td><%= name ? name : '' %></td>
<td><%= customerName %></td>
<td><%= moment(new Number(createDate)).format('MMM D, YYYY') %> <span class="gridTime"><%= moment(new Number(createDate)).format('[at] h:mm a') %></span>
</td>
<td>
<% if(dueDate) { %>
<%= moment(new Number(dueDate)).format('MMM D, YYYY') %>
<% } else { %>
&nbsp;
<% } %>
</td>
<td>
<a class="viewDetails btn-mini btn btn-info" href="#view-qr<%= id %>"><i class="icon-eye-open icon-white"></i> View Details</a>
</td>
</tr>

Any idea why it abruptly resizes?

Note, you can see the discrepancy when you move from unsorted to sorted.

[Alexander Valchev]

Hello John,

I am afraid that the provided information is not sufficient enough in order to determine what exactly is going wrong. Can you reproduce the behaviour in any of the on-line demos? Could you please provide a small but runnable example that demonstrates the issue? You may use this sample page as a start point (kendo resources are included).

Please send such sample and I will check it right away.
Thank you in advance for the cooperation.

Kind regards,
Alexander Valchev
the Telerik team

[John]

Yes, it reproduces here:

http://jsbin.com/ucowix/8/

Click to sort id, then name.  You'll see the ID column resize.

[Alexander Valchev]

Hi John,

Thank you for the example. The problem occurs because scrollable option is set to false, as a result the table-layout is set to auto.

The easiest solution would be to enable the scrollable option. Example: http://jsbin.com/ucowix/11/edit
Another possible solution is to set table-layout: fixed of the #grid table manually. Example: http://jsbin.com/ucowix/13/edit

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[John]

Unfortunately making it scrollable is not an option for us.  I still believe this is a bug with your product, why wouldn't you have table-layout: fixed by default?  Who would really want to see their columns randomly change size when you sort?

[Alexander Valchev]

Hello John,

The second approach which I suggested does not require making the Grid scrollable, but just setting table-layout: fixed for the Grid's table.
In some cases, not having fixed table layout might be useful - for example when you want the column width to be set according to the widest unbreakable content in the cells.

Kind regards,
Alexander Valchev
the Telerik team

[Doug]

I"m having the same problem with Grid on IE9 - does NOT appear in IE10 or IE10 in IE9 mode (which kinda sucks for debugging, but I digress...)

I have a scrollable, non-fixed Grid.  When column header is clicked to sort, one of the columns gets resized.

grid = $("#blGrid").kendoGrid({
resizable: true,
selectable: "row",
sortable: {
mode: "single",
allowUnsort: false
},
editable: 'inline',
rowTemplate: kendo.template($("#blRowTemplate").html()),
altRowTemplate: kendo.template($("#blAltRowTemplate").html()),
change: function(e) {
 var clickedRow = this.select()[0];
if (clickedRow === lastSelectedRow) {
my.editRowClick(grid.dataItem(clickedRow));
}
lastSelectedRow = clickedRow;
},
columns: [
{
field: "as_of_dt",
title: "As of Date",
//width: 1,
hidden: true
}, {
field: "loc_code",
title: "Loc Code",
width: 70,
sortable: true
}, {
field: "loc_desc_text",
title: "Description",
//width: 600,
sortable: true
}, {
field: "reg_cat_name",
title: "Regulatory Name/Chart of Accounts COA",
width: 300,
sortable: true
}, {
field: "alloc_cat_code",
title: "Allocation Code",
width: 110,
sortable: true
}, {
field: "sub_grp_alloc_cat_code",
title: "Sub Group Codes",
width: 110,
sortable: true
}
]
}).data("kendoGrid");

If I manually resize the column by 1 pixel, it corrects itself.

Any ideas for a work-around?  I think this is really a bug.

[Atanas Korchev]

Hi Doug,

We tried to reproduce the problem here but to no avail. Does it work for you? If yes could you please modify the demo so the column is resized as in your case? If not - could you please tell us which column should we click so the problem manifests itself?

Regards,
Atanas Korchev
Telerik

[Doug]

Hi Atanas,

I'm back working on this problem.  I will try to modify the demo so the problem is visible.  Until then, I've attached screen shots that illustrate the problem.

The first picture is on initial page load.

The second picture is after I grab the header column handle between the "Description" and "Regulatory Name" columns and move one pixel.

[Doug]

Atanas,  after further investigation, this does not appear to be a Grid issue.  I've attached a screenshot with an aberrant data row.  I believe this is a problem with IE 9 as it does not show this problem in IE 8.  I cannot test in FF or Chrome.

[Doug]

...and for those interested, there are no whitespace characters in that data row to cause the shift.  If I manually change that rows data, the rendering issue appears in the previous row.  IE Debugger does not recognize the 2nd column.  Really disturbing.

[Atanas Korchev]

Hi Doug,

The behavior you are observing is indeed not normal. Is there a chance to recreate this behavior somehow? You can use jsbin to create a live demo using your configuration and data. Use this as a starter: http://jsbin.com/xeziceyi/1/edit

Regards,
Atanas Korchev
Telerik

[Doug]

I'm hoping I can save the next person some time here.  IE 9 has a bug:

http://connect.microsoft.com/IE/feedback/details/665694/ie9-skips-cells-when-rendering-large-table-with-multiple-tbody-elements-from-ajax-using-jquery

Any ideas on how I can remove spaces between the <td> </td> tags that Grid is generating?

[Atanas Korchev]

Hi Doug,

We are not sure what whitespace you are referring to. Could you please clarify?

Regards,
Atanas Korchev
Telerik

[Doug]

Its any whitespace between the <td> and </td> tags.  Heres an example I found (this is not my page):

http://ie9tablebug.voytsje.com/

Supposedly, removing whitespace between those tags fixes the problem.  This assumes you have access to the raw markup.

Heres some simple Javascript someone suggested works for them (again, not my code, just an illustration of a solution):

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);

[Atanas Korchev]

Hello Doug,

To the best of my knowledge the Kendo UI Grid doesn't generate any whitespace between the td elements. I've modified the previous jsbin to show how the output of a single table row looks like: http://jsbin.com/xeziceyi/4/edit

Regards,
Atanas Korchev
Telerik

[Doug]

Hi Atanas,

Thanks for posting that jsbin.  I realized that the difference between your example and my production code is that I'm using row templates.  So, you are correct in stating that Grid does NOT introduce any whitespace between <tr> </tr> or <td> </td>.  My templates, however, DID introduce EOL chars. 

So I went from (IE 9 problematic table row markup):

<script id="blRowTemplate" type="text/x-kendo-template">
    <tr role="row" data-uid="#= uid #" class="# if (added || modified || deleted) { # editedRow # } #">
        <td role="gridcell">#: loc_code #</td>
        <td role="gridcell">#: loc_desc_text #</td>
        <td role="gridcell">#: vm.getRegulatoryNameById( reg_cat_name ) #</td>
        <td role="gridcell">#: vm.getAllocationCodeById( alloc_cat_code ) #</td>
        <td role="gridcell">#: vm.getAllocationCodeById( sub_grp_alloc_cat_code ) #</td>
    </tr>
</script>

to (IE 9 works!):

<script id="blRowTemplate" type="text/x-kendo-template">
<tr role="row" data-uid="#= uid #" class="# if (added || modified || deleted) { # editedRow # } #"><td role="gridcell">#: loc_code #</td><td role="gridcell">#: loc_desc_text #</td><td role="gridcell">#: vm.getRegulatoryNameById( reg_cat_name ) #</td><td role="gridcell">#: vm.getAllocationCodeById( alloc_cat_code ) #</td><td role="gridcell">#: vm.getAllocationCodeById( sub_grp_alloc_cat_code ) #</td></tr>
</script>

and the IE 9 table rendering bug was squashed!

Lesson learned:  If Telerik Web Grid developers would like compatibility with IE 9 when using custom row templates, remove all whitespace, including EOL chars, between all table tags, including <tr> </tr> and <td> </td> from their templates.

Thanks for your help!