I have a grid where all the processing is fully server side. This all works fine when I use jquery 1.7, however when I use 1.8.2 the columns filters don't seem to be working.
The icon updates on a column to show it's filterable just when I click it nothing happens. I'm using the latest version of your controls. Has anything happened that may affect behaviour.
Since all my processing is server side it's difficult to provide an example.
The icon updates on a column to show it's filterable just when I click it nothing happens. I'm using the latest version of your controls. Has anything happened that may affect behaviour.
Since all my processing is server side it's difficult to provide an example.
5 Answers, 1 is accepted
0
Hi Keith,
I am afraid that the provided information is not sufficient enough in order to determine where the problem comes from. This on-line demo uses server filtering and jQuery v1.8.2/KendoUI v2012.3.1315. Can you reproduce the problem in it?
Please verify that together with jQuery you updated all KendoUI dependencies. Also check the console for JavaScript errors and network traffic to see if the after filter action the DataSource issues Ajax request to the server.
Kind regards,
Alexander Valchev
the Telerik team
I am afraid that the provided information is not sufficient enough in order to determine where the problem comes from. This on-line demo uses server filtering and jQuery v1.8.2/KendoUI v2012.3.1315. Can you reproduce the problem in it?
Please verify that together with jQuery you updated all KendoUI dependencies. Also check the console for JavaScript errors and network traffic to see if the after filter action the DataSource issues Ajax request to the server.
Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Keith
Top achievements
Rank 1
Rank 1
answered on 04 Feb 2013, 04:16 PM
Hi,
The samples run fine for me. The big difference is I'm using the Kendo grid inside a widget. My main page html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<h1 id="header">Test Widget</h1>
<link href="../../Scripts/kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="../../Scripts/kendo/styles/kendo.default.min.css" rel="stylesheet">
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/kendo/kendo.web.min.js" type="text/javascript"></script>
<script src="../../Scripts/Gridwidget.js" type="text/javascript"></script>
<div id="grid-container"></div>
<script type="text/javascript">
$(function () {
var options = {
userToken: 'abc'
};
$('#grid-container').gridwidget(options);
});
</script>
</body>
</html>
And here is my widget
(function ($) {
$.widget("lgx.gridwidget", {
options: {
authenticationToken: 'aa'
},
_create: function () {
var self = this, optList = self.options, el = self.element;
$.support.cors = true;
var gridDiv = $("<div id='gridWidget" + optList.viewID + "'></div>").appendTo($(this.element));
BuildGrid(optList, gridDiv)
}
});
})(jQuery);
function BuildGrid(optList, gridDiv) {
var grid = (gridDiv).kendoGrid({
dataSource: {
type: "json",
data: createRandomData(50)
},
height: 780,
scrollable: false,
filterable: true
});
}
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 < count; 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;
}
As I said this is fine with an older version Jquery, there definitely seems to be something amiss.
ps. This is just a simplified test to demonstrate my issue.
The samples run fine for me. The big difference is I'm using the Kendo grid inside a widget. My main page html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<h1 id="header">Test Widget</h1>
<link href="../../Scripts/kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="../../Scripts/kendo/styles/kendo.default.min.css" rel="stylesheet">
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/kendo/kendo.web.min.js" type="text/javascript"></script>
<script src="../../Scripts/Gridwidget.js" type="text/javascript"></script>
<div id="grid-container"></div>
<script type="text/javascript">
$(function () {
var options = {
userToken: 'abc'
};
$('#grid-container').gridwidget(options);
});
</script>
</body>
</html>
And here is my widget
(function ($) {
$.widget("lgx.gridwidget", {
options: {
authenticationToken: 'aa'
},
_create: function () {
var self = this, optList = self.options, el = self.element;
$.support.cors = true;
var gridDiv = $("<div id='gridWidget" + optList.viewID + "'></div>").appendTo($(this.element));
BuildGrid(optList, gridDiv)
}
});
})(jQuery);
function BuildGrid(optList, gridDiv) {
var grid = (gridDiv).kendoGrid({
dataSource: {
type: "json",
data: createRandomData(50)
},
height: 780,
scrollable: false,
filterable: true
});
}
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 < count; 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;
}
As I said this is fine with an older version Jquery, there definitely seems to be something amiss.
ps. This is just a simplified test to demonstrate my issue.
0
Keith
Top achievements
Rank 1
Rank 1
answered on 06 Feb 2013, 11:48 AM
I was wondering if anybody has any ideas on this issue? I can't see how anything can be wrong in my code.
0
Accepted
Hi Keith,
Thank you for sharing the code. jQuery UI v1.8.20 is not compatible with jQuery 1.8.2 - it overrides some jQuery methods which breaks KendoUI. The solution is to use newer jQueryUI version.
I tested with 1.8.23 and got it working as expected. Here is a working sample:
Regards,
Alexander Valchev
the Telerik team
Thank you for sharing the code. jQuery UI v1.8.20 is not compatible with jQuery 1.8.2 - it overrides some jQuery methods which breaks KendoUI. The solution is to use newer jQueryUI version.
I tested with 1.8.23 and got it working as expected. Here is a working sample:
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Keith
Top achievements
Rank 1
Rank 1
answered on 06 Feb 2013, 02:43 PM
Brilliant, thanks so much for your help