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" }
]
});