a question about updating a single row's data

1,748 views
Skip to first unread message

Woong Jae Chung

unread,
Jan 31, 2012, 5:40:11 PM1/31/12
to SlickGrid
We're trying to update data in the grid, but we don't want a full
refresh of the grid, only an update of existing information if it's
changed.

Can someone point me to an example that allows me to update a single
row, and an example that shows me how to insert a row at the end of
the grid, or somewhere in the middle?

Thanks

Michael Leibman

unread,
Jan 31, 2012, 5:49:48 PM1/31/12
to slic...@googlegroups.com
Invalidate the updated rows and tell the grid to render:

grid.invalidateRow(index);
grid.render();

Woong Jae Chung

unread,
Jan 31, 2012, 6:09:35 PM1/31/12
to SlickGrid
Can you tell me how to get access to the grid? I can't seem to find
an example that lets me do this.

I have 3 grids on the same page, and they're being loaded using an
ajax callback, that uses: grid_restaurants = new
Slick.Grid("#grid_restaurants", dv_restaurants, col_restaurants,
options);

If I want to get a pointer to grid_restaurants, to be able to set the
grid.invalidateRow(index);, how do i do it?

Thanks

Michael Leibman

unread,
Jan 31, 2012, 6:16:07 PM1/31/12
to slic...@googlegroups.com
Just store the "grid_restaurants" reference somewhere.

Woong Jae Chung

unread,
Jan 31, 2012, 6:31:33 PM1/31/12
to SlickGrid
Please find the sample code below the message.
The code is what I am trying to do and grid_restaurants value does not
exist after ajax callback.

p.s. one more thing is, I was trying to use one of javascript file
(slick.remotemodel.js).
would it possible to have a easy sample code with ajax callback
using slickgrid??

Thanks.

================================================

var grid_restaurants = null;

$(function load_restaurants() {
var dv_restaurants;
var loader = new Slick.Data.RemoteModel("urbanmenu_restaurant.php");
var loadingIndicator = null;
var griddata = [];

$.ajax({
url: "urbanmenu_sql.php",
type: "GET",
contentType: "application/json",
dataType: "json",
success: function (data) {
for(var i=0;i<data.length;i++){
var datarow = (griddata[i] = {});
var obj = data[i];

for(var key in obj){
var attrName = key;
var attrValue = obj[key];

datarow[attrName] = attrValue;
}
}




dv_restaurants = new Slick.Data.DataView();
grid_restaurants = new Slick.Grid("#grid_restaurants",
dv_restaurants, col_restaurants, options);

dv_restaurants.onRowCountChanged.subscribe(function (e, args) {
grid_restaurants.updateRowCount();
grid_restaurants.render();
});




dv_restaurants.onRowsChanged.subscribe(function (e, args) {
grid_restaurants.invalidateRows(args.rows);
grid_restaurants.render();
});




$(grid_restaurants.getHeaderRow()).delegate(":input", "change
keyup", function (e) {
columnFilters[$(this).data("columnId")] = $.trim($(this).val());
dv_restaurants.refresh();
});








grid_restaurants.onColumnsReordered.subscribe(function (e, args) {
updateHeaderRow_restaurants();
});




grid_restaurants.onColumnsResized.subscribe(function (e, args) {
updateHeaderRow_restaurants();
});




dv_restaurants.beginUpdate();
dv_restaurants.setItems(griddata);
dv_restaurants.setFilter(filter_restaurants);
dv_restaurants.endUpdate();




updateHeaderRow_restaurants();
// load the first page
grid_restaurants.onViewportChanged.notify();
//var auto_refresh=setInterval(function(){update_restaurants();},
20000);
},
error: function (msg) {
alert("error! "+msg);
}
});

grid_restaurants.invalidateRow(0);
grid_restaurants.render();

Michael Leibman

unread,
Jan 31, 2012, 6:40:59 PM1/31/12
to slic...@googlegroups.com
The grid_restaurants variable in your code is not initialized until your ajax callback executes.

The ajax example is listed on the Examples page - http://mleibman.github.com/SlickGrid/examples/example6-ajax-loading.html.

Woong Jae Chung

unread,
Feb 1, 2012, 9:41:12 AM2/1/12
to SlickGrid
Still having a problem..

Our call:
req = $.jsonp({
url: url,
callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster
param
success: onSuccess,
error: function () {
alert(url);
onError(fromPage, toPage)
}
});

is returning an error: error loading pages 0 to 0. We've hardcoded
the frompage/topage variables - where do you set these?

If we look at the data being returned by the URL, we see:

[{"id":"100137","NAME":"Indulge Your Palate","ADDRESS_1":"5, 6
Fairlawn
Avenue","ADDRESS_2":"","CITY":"Toronto","PHONE":"416.555.2323","FAX":"","EMAIL":"umt...@reainc.net"},
{"id":"100146","NAME":"Sushi O","ADDRESS_1":"90 Eglinton Avenue
East","ADDRESS_2":",","CITY":"Toronto","PHONE":"1-416-555-2338","FAX":"","EMAIL":"umt...@reainc.net"}]

Is this the correct format that your page is returning?
Reply all
Reply to author
Forward
0 new messages