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

After replacing dataSource data with different data (same structure) grouping is disabled

0 Answers 51 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tim R
Top achievements
Rank 1
Tim R asked on 01 Jul 2013, 05:59 PM
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 #"
         }
          ]
    });

}





No answers yet. Maybe you can help?

Tags
Grid
Asked by
Tim R
Top achievements
Rank 1
Share this question
or