PDA

View Full Version : Grid: highlight a specific row



Frohnix
10 Jul 2010, 12:23 AM
Hi,

how can I highlight a specific row in a Grid dynamically, based on it's value?
For example: Highlight the row where it's value of the id-column is "123"
I don't search the cell-renderer function, but I want to change the row-color after grid rendering based on a AJAX
call from server.

Greetings, Frohnix

Animal
10 Jul 2010, 12:32 AM
http://www.sencha.com/deploy/dev/docs/?class=Ext.grid.GridView&member=getRowClass

Have a Field in the Record provide info which getRowClass uses to decide upon any class name(s)

Frohnix
10 Jul 2010, 1:08 AM
Hmm,
If I understand correctly getRowClass the representation of lines changes during rendering. I am looking for a method that grid-rows changes at runtime.

This is my task that should change the rendered grid at runtime.


var task = {
run: function(){
var conn = new Ext.data.Connection();
conn.request({
url: 'mainListerTask.php',
method: 'POST',
params: {"grid": "1"},
success: function(responseObject) {
var id=responseObject.responseText;
// Server sends: 123
userGrid.changeBackgroundRowColor(id) //<- (dummy function) I don't know what to replace it.

},
failure: function() {


}
});




},
interval: 2000
}
Ext.TaskMgr.start(task);



Greetings, Frohnix

Condor
10 Jul 2010, 1:17 AM
Should it change temporarily or permanently?

For permanentely you should add an extra field to your record that holds a value that getRowClass can use to determine the color on and set the field value in your success handler.

If you only want to change it temporarily then I would recommend using some kind of animation (e.g. highlight) on the row.

Frohnix
10 Jul 2010, 1:26 AM
No, only temporarily.
The background is that other users of the grid-script get an information to which record by another user is selected or edited.

For example: User 1 clicks on line 20. All other clients line 20 should change to red.

Greetings, Frohnix

Animal
10 Jul 2010, 1:33 AM
That's a case for an extra Field and a getRowClass implementation.

The GridPanel does refresh itself when its Record data changes, so setting this Field at any time will cause correct rendering with appropriate row class.

Frohnix
10 Jul 2010, 1:56 AM
Yes i know that the grid refreshes itself.
But how can I prevent that user1 AND user2 edit the same Record?
I wanted to solve that problem that the current active records of all clients are highlighted on every client.
But that's not the problem. The problem is to tell the grid:

Task 2000 millisec.:
- Ask Server ---> Server say: 20 (or 21 or 50 or whatever)
- Find the row where it's value of the column "ID" is 20 (or 21 or 50 or whatever)
- change the backgroundcolor of that row to red.

Greets, Frank

( sorry about my english, it's not my main language :D )

Condor
10 Jul 2010, 2:50 AM
So:
- Add a field named 'isBeingEdited' to the record.
- Write a getRowClass method that shows records with isBeingEdited=true as red.
- Don't allow editing of records with isBeingEdited=true.
- Run a task every n msec that gets the record ids of records being edited. Update the isBeingEdited field of all records to reflect the returned data.

Frohnix
10 Jul 2010, 3:25 AM
Ok, but HOW can I access the rows that should have the editing flag?
Something like: goto row 200 and set 'isBeingEdited'=true
I dont want to reload the whole store every X msec. that's not performant.

Greets Frohnix

Animal
10 Jul 2010, 4:26 AM
The server tells you the IDs

Condor
10 Jul 2010, 4:54 AM
grid.getStore().getById(id).set('isBeingEdited', true);

Frohnix
10 Jul 2010, 11:04 PM
Thanks Condor.

That's the answer I was looking for. :)
Thank you all for the fast help.

Greets, Frank

Frohnix
11 Jul 2010, 2:01 AM
Ok, for all those interested for the complete solution of the problem.

Task: rows based on their id to color in red. The id's are requested from the
Server every 2000 milliseconds..
If no id's are sent or other id's, the red rows have to turn back again to normal.

(id is not the original store index. It's a normal generated grid/store column.)

CSS:

.x-grid3-row-red {
background-color: #dfa8a8 !important;
background-image: none;
border-color:#a3bae9;
}



Now the Taskmanager

Array.prototype.contains = function (elem) {// in_array like function in js
var i;
for (i = 0; i < this.length; i++) {
if (this[i] == elem) {
return true;
}
}
return false;
};

var markedId=Array();// marked row memory
var task = {
run: function(){
var conn = new Ext.data.Connection();
conn.request({
url: 'mainListerTask.php',
method: 'POST',
params: {"grid": "1"},
success: function(responseObject) {
var i;
var ids=responseObject.responseText;
// server sends comma separated numbers or one number or nothing
var idArr=ids.split(",");// split values to array
// remove red css class from not submited id-rows
for(i=0;i<markedId.length;i++){
if(idArr.contains(markedId[i])==false){
var eraseId=userGrid.getStore().findExact('id', markedId[i]);
if(eraseId>=0){
Ext.fly(userGrid.getView().getRow(eraseId)).removeClass('x-grid3-row-red');
}
}
}
markedId=idArr;// load actual id-array in row-memory for next request
// set's submited rows to red css
for(i=0;i<idArr.length;i++){
var storeId=userGrid.getStore().findExact('id', idArr[i]);
if(storeId>=0){
Ext.fly(userGrid.getView().getRow(storeId)).addClass('x-grid3-row-red');
}
}
},
failure: function() {


}
});
},
interval: 2000
}
Ext.TaskMgr.start(task);

.. and it works :D

Bye, Frohnix