[Solved] frozen columns in grid

[Bertha]

I have the latest version of kendo ui Kendo UI v2014.3.1119.  When I set the first column to be frozen, the 2nd column went to the next row, not in the same row as first column.  The width of the grid is restricted by bootstrap <div class="col-md-10"> and it has horizontal scrollbar before the frozen column.  What did I miss? How can I fix it?
Thanks.

$("#gdActualReport").kendoGrid({
dataSource: reportDataSource,
sortable: false,
pageable: false,
selectable: "row",
scrobllable: true,
height: 700,
toolbar: ["excel"],
excel: {
fileName: "Report.xlsx",
allPages: true
},
columns: [
{ field: "itemName", title: "Item Name", locked: true, lockable: false, attributes: { style: "text-align:left" }, width: "200px" },
{ field: "actual[0]", title: "January", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[1]", title: "February", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[2]", title: "March", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[3]", title: "April", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[4]", title: "May", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[5]", title: "June", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[6]", title: "July", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[7]", title: "August", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[8]", title: "September", attributes: { style: "text-align:right" }, width: "90px" },
{ field: "actual[9]", title: "October", attributes: { style: "text-align:right" }, width: "80px" },
{ field: "actual[10]", title: "November", attributes: { style: "text-align:right" }, width: "90px" },
{ field: "actual[11]", title: "December", attributes: { style: "text-align:right" }, width: "90px" },
{ field: "actual[12]", title: "Total", attributes: { style: "text-align:right" }, width: "80px" }
]
});

[Alexander Popov]

Hello Bertha,

I tried reproducing the issue using the code you shared, but to no avail. Would you please check this example and let me know if I am missing something?

Regards,
Alexander Popov
Telerik

 

 

[Bertha]

Thanks for the useful example.  It helps to narrow down one of my library file is out-dated.

Now, I have another issue.  I use rowTemplate and altRowTemplate.  How can I maintain the first column to be frozen?  Thanks.

rowTemplate: '<tr class="#:itemName.indexOf(\"Total\") > -1 ? \"skyblue\" : \"whiteRow\"#" data-uid="#= uid #"><td>#:itemName #</td><td style=\"text-align:right\">#: (actual[0] == null) ? \"\" : kendo.toString(actual[0], \"c0\") #</td><td style=\"text-align:right\">#: (actual[1] == null) ? \"\" : kendo.toString(actual[1], \"c0\") #</td><td style=\"text-align:right\">#: (actual[2] == null) ? \"\" : kendo.toString(actual[2], \"c0\") #</td><td style=\"text-align:right\">#: (actual[3] == null) ? \"\" : kendo.toString(actual[3], \"c0\") #</td><td style=\"text-align:right\">#: (actual[4] == null) ? \"\" : kendo.toString(actual[4], \"c0\") #</td><td style=\"text-align:right\">#: (actual[5] == null) ? \"\" : kendo.toString(actual[5], \"c0\") #</td><td style=\"text-align:right\">#: (actual[6] == null) ? \"\" : kendo.toString(actual[6], \"c0\") #</td><td style=\"text-align:right\">#: (actual[7] == null) ? \"\" : kendo.toString(actual[7], \"c0\") #</td><td style=\"text-align:right\">#: (actual[8] == null) ? \"\" : kendo.toString(actual[8], \"c0\") #</td><td style=\"text-align:right\">#: (actual[9] == null) ? \"\" : kendo.toString(actual[9], \"c0\") #</td><td style=\"text-align:right\">#: (actual[10] == null) ? \"\" : kendo.toString(actual[10], \"c0\") #</td><td style=\"text-align:right\">#: (actual[11] == null) ? \"\" : kendo.toString(actual[11], \"c0\") #</td><td style=\"text-align:right\">#: (actual[12] == null) ? \"\" : kendo.toString(actual[12], \"c0\") #</td></tr>',       

[Bertha]

Thanks for the useful example.  It helps me to find one of my library file is out-dated.

But another issue comes up.  I use rowTemplate and altRowTemplate.  How to make the first column frozen?  Thanks.

rowTemplate: '<tr class="#:itemName.indexOf(\"Total\") > -1 ? \"skyblue\" : \"whiteRow\"#"

[Alexander Popov]

Hi Bertha,

I am afraid that having both row templates and locked columns is not supported and there is no workaround that we can recommend.

Regards,
Alexander Popov
Telerik