Manoj Kapoor
Top achievements
Rank 2
Rank 2
Manoj Kapoor
asked on 03 Feb 2012, 08:23 AM
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SortingIssue.aspx.cs" Inherits="CMCKendoUI.Web.SortingIssue" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sorting Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="js/kendo.all.js" type="text/javascript"></script>
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];
function createRandomData(count) {
var data = [], now = new Date();
for (var i = 0; i < 50; i++) {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
age = now.getFullYear() - birthDate.getFullYear();
data.push({
Id: i + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age
});
}
return data;
}
var KendoGridModel = kendo.data.Model.define({ id: 'Id' });
$(document).ready(function ($) {
var ctlGrid = $("#gridDiv");
ctlGrid.kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 5
},
schema: { model: KendoGridModel },
selectable: true,
//sortable:false,
//sortable: { mode: 'single', allowUnsort: false },
pageable: true
});
});
</script>
<body>
<form id="form1" runat="server">
<div id="gridDiv" runat="server" />
</form>
</body>
</html>
For the above code, I cant get the grid rendered in FIrefox (10.0) till the time I comment out the sortable attribute. Its working fine in IE (7 to 9) But I want my grid to be rendered with the sortable attribute in addition to allowunsort attribute. Can you guide me how can I get the needed functionality?
Thanks & Regards,
Manoj Kapoor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sorting Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="js/kendo.all.js" type="text/javascript"></script>
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];
function createRandomData(count) {
var data = [], now = new Date();
for (var i = 0; i < 50; i++) {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
age = now.getFullYear() - birthDate.getFullYear();
data.push({
Id: i + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age
});
}
return data;
}
var KendoGridModel = kendo.data.Model.define({ id: 'Id' });
$(document).ready(function ($) {
var ctlGrid = $("#gridDiv");
ctlGrid.kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 5
},
schema: { model: KendoGridModel },
selectable: true,
//sortable:false,
//sortable: { mode: 'single', allowUnsort: false },
pageable: true
});
});
</script>
<body>
<form id="form1" runat="server">
<div id="gridDiv" runat="server" />
</form>
</body>
</html>
Thanks & Regards,
Manoj Kapoor
4 Answers, 1 is accepted
0
Hi Manoj,
Rosen
the Telerik team
Could you please specify in more details what you meant by not rendered? Also are you able to observe the same behavior on our online demos?
Regards,Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Manoj Kapoor
Top achievements
Rank 2
Rank 2
answered on 03 Feb 2012, 10:37 AM
I am attaching a snapshot of the grid that is rendered using the code I gave in the original post in both IE & Firefox for your reference. On firefox, I can just see an empty grid with the pager, but IE displays data too in the Grid.
I have checked the online demo using same version of Firefox & they just works fine.
I have checked the online demo using same version of Firefox & they just works fine.
0
Hello Manoj,
Greetings,
Rosen
the Telerik team
Could you please set the height of the grid and see if this makes any difference in the observed behavior.
ctlGrid.kendoGrid({ height: 250, //....});Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Manoj Kapoor
Top achievements
Rank 2
Rank 2
answered on 03 Feb 2012, 02:32 PM
Thanks Rosen, setting height on the grid worked. It now renders the grid correctly on all browsers