[Solved] Updating Grid Data

[Chris]

What is the best way to update the data in the grid?

I'm creating the grid like this.

var data = [
    { Name: "One", Data: 1 },
    { Name: "Two", Data: 2 },
    { Name: "Three", Data: 3 }
];

var grid = new Telerik.UI.RadGrid(this.gridElem, {
    dataSource: {
        data: data
    }
});

If I update the data object how can I make the grid reflect the changes?

Thanks
Chris

[Tsvetina]

Hello Chris,

Depending on your requirements, you have two options.

The first one is to simply reassign the data property of the RadGrid dataSource. The change will be detected by the DataSource and will be reflected in RadGrid. You can test it with this piece of code:

var data = [
    { Name: "One", Data: 1 },
    { Name: "Two", Data: 2 },
    { Name: "Three", Data: 3 }
];

var grid = new Telerik.UI.RadGrid(grid1, {
    dataSource: {
        data: data
    }
});
data.push({ Name: "Four", Data: 4 });
grid.dataSource.data = data;

If you want changes in the data object to be observable, you can use the WinJS.Binding.List to wrap your array. This way, when a change occurs, the RadGrid DataSource will automatically detect it and reflect it in the grid:

var data = [
    { Name: "One", Data: 1 },
    { Name: "Two", Data: 2 },
    { Name: "Three", Data: 3 }
];
var list = new WinJS.Binding.List(data);

var grid = new Telerik.UI.RadGrid(grid1, {
    dataSource: list
});
list.push({ Name: "Four", Data: 4 });

After this code executes, RadGrid will display four rows of data.

Let us know should you need further assistance on setting your RadGrid binding.

All the best,
Tsvetina
the Telerik team

[Chris]

When I update a row rather than add one then the grid does not update. I've tried calling notifyMutated but that does not work. notifyReload() does work but that updates the entire grid.

var data = [
    { Name: "One", Data: 1 },
    { Name: "Two", Data: 2 },
    { Name: "Three", Data: 3 }
];
var list = new WinJS.Binding.List(data);

var grid = new Telerik.UI.RadGrid(grid1, {
    dataSource: list
});
list.getAt(1).Name = "2";
list.notifyMutated(2);

[Tsvetina]

Hi Chris,

As mentioned in another post, currently RadGrid does not have editing capabilities. The approach I offer to you is a work around and RadGrid is not aware of data editing taking place at all. Actual editing, including various built-in options for CRUD operations will be introduced in Q2. Then you will not even need the WinJS.Binding.List, as the RadGrid dataSource will handle the editing logic by itself.

With regard to updating the record, note that setAt does not insert a new item but replaces the old one, therefore you can use it for updating.

For more info on the expected features and controls in Q2, you can take a look at the Roadmap:
http://www.telerik.com/products/windows-8/roadmap.aspx

Regards,
Tsvetina
the Telerik team