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

Sorting a grid, first column size changes

16 Answers 246 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 21 Mar 2013, 09:23 PM
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.

16 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 25 Mar 2013, 04:17 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 26 Mar 2013, 01:14 PM
Yes, it reproduces here:

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

Click to sort id, then name.  You'll see the ID column resize.
0
Alexander Valchev
Telerik team
answered on 28 Mar 2013, 09:56 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 28 Mar 2013, 12:43 PM
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?
0
Alexander Valchev
Telerik team
answered on 01 Apr 2013, 10:40 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doug
Top achievements
Rank 1
answered on 18 Dec 2013, 07:14 PM
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.
0
Atanas Korchev
Telerik team
answered on 19 Dec 2013, 01:04 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doug
Top achievements
Rank 1
answered on 03 Mar 2014, 02:32 PM
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.
0
Doug
Top achievements
Rank 1
answered on 03 Mar 2014, 07:19 PM
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.
0
Doug
Top achievements
Rank 1
answered on 03 Mar 2014, 07:21 PM
...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.
0
Atanas Korchev
Telerik team
answered on 04 Mar 2014, 08:12 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doug
Top achievements
Rank 1
answered on 06 Mar 2014, 07:13 PM
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?
0
Atanas Korchev
Telerik team
answered on 07 Mar 2014, 08:02 AM
Hi Doug,

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

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doug
Top achievements
Rank 1
answered on 07 Mar 2014, 12:39 PM
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);



0
Atanas Korchev
Telerik team
answered on 07 Mar 2014, 02:03 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doug
Top achievements
Rank 1
answered on 07 Mar 2014, 02:58 PM
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!


Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
John
Top achievements
Rank 1
Doug
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or