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

Sorting a grid, first column size changes

16 Answers 712 Views

Grid

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

John asked on 21 Mar 2013, 09:23 PM

unsorted.png

sorted.png

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 { %>
 
<% } %>
</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

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.

answered on 03 Mar 2014, 02:32 PM

kendogridissue1.png

kendogridissue2.png

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.

answered on 03 Mar 2014, 07:19 PM

notakendogridissue.png

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.

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!