jqGrid - update row and blink / highlight it
Posted by valqk on
Ever wondered how to Update a row in jqGrid and make it blink so user see that it's updated?
Here's how I did it.
It's quite simple - extend the jqGrid and call the method after.
Color and time are set in side the method, but they can easily be passed as params.
After loading the jqGrid add this code:
$.jgrid.extend({
updateRowData: function (rowId, data){
var oGrid = $(this);
oGrid.setRowData(rowId,data);
var blinks = 5;
var delay = 500;
var blinkCnt = 0;
var changeColor='red';
var curr=false;
var rr=setInterval(function() {
var color;
if (curr===false) {
color=changeColor;
curr=color;
} else {
color='';
curr=false;
}
oGrid.setRowData(rowId,false,{background:color});
if (blinkCnt >= blinks*2) {
blinkCnt=0;
clearInterval(rr);
oGrid.setRowData(rowId,false,{background:''});
} else {
blinkCnt++;
}
}, delay);
}
});
then you simply call:
grid.updateRowData(41, { col1: 'do', col2: 'good' });
Where 41 is the row id and grid is my grid variable:
grid = $("#list");
Here's how I did it.
It's quite simple - extend the jqGrid and call the method after.
Color and time are set in side the method, but they can easily be passed as params.
After loading the jqGrid add this code:
$.jgrid.extend({
updateRowData: function (rowId, data){
var oGrid = $(this);
oGrid.setRowData(rowId,data);
var blinks = 5;
var delay = 500;
var blinkCnt = 0;
var changeColor='red';
var curr=false;
var rr=setInterval(function() {
var color;
if (curr===false) {
color=changeColor;
curr=color;
} else {
color='';
curr=false;
}
oGrid.setRowData(rowId,false,{background:color});
if (blinkCnt >= blinks*2) {
blinkCnt=0;
clearInterval(rr);
oGrid.setRowData(rowId,false,{background:''});
} else {
blinkCnt++;
}
}, delay);
}
});
then you simply call:
grid.updateRowData(41, { col1: 'do', col2: 'good' });
Where 41 is the row id and grid is my grid variable:
grid = $("#list");
Trackbacks
Trackback specific URI for this entryThis link is not meant to be clicked. It contains the trackback URI for this entry. You can use this URI to send ping- & trackbacks from your own blog to this entry. To copy the link, right click and select "Copy Shortcut" in Internet Explorer or "Copy Link Location" in Mozilla.
No Trackbacks
Comments
Display comments as Linear | ThreadedNo comments