I have two issues when running the grid in ie7 and ie8 compatibility mode:
- Paging does not work. After paging I get the js errors shown in the attached screen shot.
- The Grid cells collapse down and the data is abbreviated or not shown and is out of alignment with the headers.
Here’s my config:
#Grids{
width: 100%;
height:400px;
overflow-y: auto;
overflow-x: auto;
border:1px solid #00215C;
}
<div id="Grids">
<div id="gridMoneyOrders" class="hidden"></div>
</div>
var loadMoneyOrderDetailsGrid = function(details){
$("#gridMoneyOrders").show().kendoGrid({
dataSource: {
data: details,
pageSize: 10,
schema: {
model: {
fields: {
FacilityName: { type: "string" },
MoneyOrderID: { type: "string" },
IssueID: { type: "string" },
ClerkID: { type: "string" },
IssueDateTime: { type: "date" },
SaleAmount: { type: "string" },
PaidAmount: { type: "string" },
ProcessDate: { type: "date" },
SerialNumber: { type: "string" }
}
}
}
},
//change: onChange,
selectable: "row",
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: false
}
,
columns: [ {
field: "FacilityName",
width: 40,
title: "Facility Name"
} , {
field: "MoneyOrderID",
width: 10,
title: "City"
} , {
field: "IssueID",
title: "Issue",
width: 10
}, {
field: "ClerkID",
title: "Clerk",
width: 10
}, {
field: "IssueDateTime",
title: "Issue Date",
width: 20,
format: "{0:MM/dd/yyyy}"
}, {
field: "SaleAmount",
title: "Sale Amount",
format: "{0:$0.00}",
width: 20
}, {
field: "PaidAmount",
title: "Paid Amount",
format: "{0:$0.00}",
width: 20
}, {
field: "ProcessDate",
title: "Process Date",
format: "{0:MM/dd/yyyy}",
width: 20
}, {
field: "SerialNumber",
title: "Serial Number",
width: 20
}
]
});
var grid = $("#gridMoneyOrders").data("kendoGrid");
grid.refresh();
};