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

Grid does not show up in IE9

1 Answer 108 Views

Grid

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

T. asked on 13 Sep 2012, 10:47 AM

Hi,

I have a simple grid example:

<!doctype html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="/css/kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="/css/kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="/css/intranet.css" rel="stylesheet" type="text/css" />

<script src="/js/kendo/js/jquery.min.js" type="text/javascript"></script>

<script src="/js/kendo/js/kendo.web.min.js" type="text/javascript"></script>

</head>

<body>

<div id="grid">

</div>

<ul id="items"></ul>

</body>

<script id="template" type="text/x-kendo-template">

<li class="items">

<span>#= itemno #</span>

<span>#= description #</span>

<span>#= unitprice #</span>

</li>

</script>

<script type="text/javascript">

$(

function()

{

function onChange() {

$("#items").html(kendo.render(template, this.view()));

}

// create a template using the above definition

var template = kendo.template($("#template").html());

var rawData = {"items":{"myItem":[{"No":"001A","Description":"1A Item","UnitPrice":"17.10"},{"No":"002B","Description":"2B Item","UnitPrice":"7.20"}]}};

var dsXMLoData = new kendo.data.DataSource (

{

type: "json",

data: rawData,

schema:

{

data: "items.myItem",

model: {

id: "No",

fields: { No: {editable: false, type: "string"},

Description: {editable: false, type: "string"},

UnitPrice: {editable: false, type: "number"}

}

},

error: function(e)

{

alert(e.errorThrown);

},

change: function()

{

//alert(this.data());

}

});

dsXMLoData.read();

$("#grid").kendoGrid(

{

dataSource: dsXMLoData,

columns: [{title: "Artikel Nr.", field: "No"},

{title: "Beschreibung", field: "Description"},

{title: "VK-Preis", field: "UnitPrice", width: "80px", format: "{0:N2}"}],

scrollable: true,

sortable: {

mode: "multiple",

unsort: true

},

selectable: "multiple, row"

});

}

);

</script>

</html>

This simple grid shows up correctly in FireFox and Chrome.
Unfortunately the Internet Explorer 9 (IE 9) shows only a blank white page :-(

What I am missing?

Thanks!

Grid does not show up in IE9

1 Answer, 1 is accepted