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

Changing Grid Data

4 Answers 189 Views

Grid

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

4 Answers, 1 is accepted

Accepted

answered on 29 Jan 2012, 03:17 AM

Hi Rafi,

My thought would be to empty the contents of the element and then create a new grid with the same element.

For example, if I had an the following html element defined:

<div id="grid"></div>

And I initialized the grid with person information like this:

$(document).ready(function

() {

var peopleData =

[

{ Id: 1, FirstName: "John", LastName: "Doe", Age: 46 },

{ Id: 2, FirstName: "Jayne", LastName: "Smith", Age: 13 }

];

$('#grid').kendoGrid({

dataSource: { data: peopleData },

height: 250,

columns:

[{

field: 'FirstName',

title: 'First Name',

width: 200

}, {

field: 'LastName',

title: 'Last Name',

width: 200

}, {

field: 'Age',

title: 'Age',

width: 50

}]

});

I could empty the div and populate the grid with product information like this:

changeDataSource = function () {

// Define an array of products.

var productData =

[

{ Id: 1, ProductName: "Widget A", Sold: 1000 },

{ Id: 2, ProductName: "Widget B", Sold: 2000 }

];

// Empty the grid element of all html.

$('#grid').empty();

// Initialize a new grid with the product information.

$('#grid').kendoGrid({

dataSource: { data: productData },

columns:

[{

field: 'ProductName',

title: 'Product Name'

}, {

field: 'Sold'

}]

});

}

Hope this helps....

Regards,

John DeVight