EDIT: solved with 2013Q1 by adding grid.wrapper.empty()
Sorry, I cannot get this working on jsBin but it works locally on my PC. It should be easy enough to assemble on your end.
In addition to grouping issue, the column-sort seems to have three modes: A-Z, Z-A, and random order.
Am I doing something wrong, or incompletely, when I destroy the grid in my SimulateSearchResults function?
NOTE: This problem is with 2012 version. When I use 2013 Q1, different issue -- a phantom column is created.
<body>
<div>
Wait until you see the both datasets created message before clicking these buttons.<br />
First click [First Dataset] button and try to group by City. Success. It works.<br />
Then click [Second Dataset] button and notice that grouping by City is disabled.<br />
<input type="button" onclick="javascript: SimulateSearchResults('one');" value="first dataset" />
<input type="button" onclick="javascript: SimulateSearchResults('two');" value="second dataset" />
<div id="grid">
</div>
</div>
</body>
file: ui.js
var datasets = {};
var points = [100, 120, 150, 220, 265, 340, 385, 388, 415, 426, 450, 471, 511, 522, 555, 616, 455, 483, 699, 700, 825, 850, 875, 900, 925, 935, 977, 1000];
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nigel", "Henry", "Harry", "Joe", "Tom", "Bill"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White", "Green", "Black", "Jones", "Reed"];
var cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"];
var titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"];
var 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 generatePeople(itemCount, which) {
var data = [],
delay = 25,
interval = 500,
starttime;
var now = new Date();
//setTimeout(function () {
starttime = +new Date();
do {
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(),
point = points[Math.floor(Math.random() * points.length)];
data.push({
Id: data.length + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age,
Points: point
});
} while (data.length < itemCount && +new Date() - starttime < interval);
if (data.length < itemCount) {
setTimeout(arguments.callee, delay);
} else {
//callback(data);
datasets[which] = data;
alert('dataset ' + which + ' created');
}
//}, delay);
}
$(document).ready(function () {
generatePeople(1000, 'one');
generatePeople(1000, 'two');
});
function SimulateSearchResults(which) {
var existingGrid = $('#grid').data('kendoGrid');
if (existingGrid) {
existingGrid.destroy();
existingGrid.wrapper.html("");
}
setTimeout(function () {
configureGrid(datasets[which]);
}, 222);
}
function configureGrid(data) {
$("#grid").kendoGrid({
dataSource: {
data: data,
aggregate: [
{ field: "Points", aggregate: "sum" }
]
},
groupable: true,
sortable: true,
height: 400,
pageSize: 22,
columns: [{
field: "FirstName",
groupable: false,
width: "150px",
title: "firstname"
}, {
field: "LastName",
width: "200px",
title: "lastname",
groupable: false
}, {
width: "200px",
field: "City",
title: "city",
groupable: true
},
{
width: "125px",
field: "Points",
title: "points",
aggregates: ["sum"],
footerTemplate: "Points for all Cities: #: data.Points.sum #",
groupFooterTemplate: "Points: #: data.Points.sum #"
}
]
});
}
Sorry, I cannot get this working on jsBin but it works locally on my PC. It should be easy enough to assemble on your end.
In addition to grouping issue, the column-sort seems to have three modes: A-Z, Z-A, and random order.
Am I doing something wrong, or incompletely, when I destroy the grid in my SimulateSearchResults function?
NOTE: This problem is with 2012 version. When I use 2013 Q1, different issue -- a phantom column is created.
<body>
<div>
Wait until you see the both datasets created message before clicking these buttons.<br />
First click [First Dataset] button and try to group by City. Success. It works.<br />
Then click [Second Dataset] button and notice that grouping by City is disabled.<br />
<input type="button" onclick="javascript: SimulateSearchResults('one');" value="first dataset" />
<input type="button" onclick="javascript: SimulateSearchResults('two');" value="second dataset" />
<div id="grid">
</div>
</div>
</body>
file: ui.js
var datasets = {};
var points = [100, 120, 150, 220, 265, 340, 385, 388, 415, 426, 450, 471, 511, 522, 555, 616, 455, 483, 699, 700, 825, 850, 875, 900, 925, 935, 977, 1000];
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nigel", "Henry", "Harry", "Joe", "Tom", "Bill"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White", "Green", "Black", "Jones", "Reed"];
var cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"];
var titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"];
var 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 generatePeople(itemCount, which) {
var data = [],
delay = 25,
interval = 500,
starttime;
var now = new Date();
//setTimeout(function () {
starttime = +new Date();
do {
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(),
point = points[Math.floor(Math.random() * points.length)];
data.push({
Id: data.length + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age,
Points: point
});
} while (data.length < itemCount && +new Date() - starttime < interval);
if (data.length < itemCount) {
setTimeout(arguments.callee, delay);
} else {
//callback(data);
datasets[which] = data;
alert('dataset ' + which + ' created');
}
//}, delay);
}
$(document).ready(function () {
generatePeople(1000, 'one');
generatePeople(1000, 'two');
});
function SimulateSearchResults(which) {
var existingGrid = $('#grid').data('kendoGrid');
if (existingGrid) {
existingGrid.destroy();
existingGrid.wrapper.html("");
}
setTimeout(function () {
configureGrid(datasets[which]);
}, 222);
}
function configureGrid(data) {
$("#grid").kendoGrid({
dataSource: {
data: data,
aggregate: [
{ field: "Points", aggregate: "sum" }
]
},
groupable: true,
sortable: true,
height: 400,
pageSize: 22,
columns: [{
field: "FirstName",
groupable: false,
width: "150px",
title: "firstname"
}, {
field: "LastName",
width: "200px",
title: "lastname",
groupable: false
}, {
width: "200px",
field: "City",
title: "city",
groupable: true
},
{
width: "125px",
field: "Points",
title: "points",
aggregates: ["sum"],
footerTemplate: "Points for all Cities: #: data.Points.sum #",
groupFooterTemplate: "Points: #: data.Points.sum #"
}
]
});
}