Saturday, February 26, 2011

Refresh single ExtJs grid row after editing without refreshing grid

Hello,

This is another ExtJs blog. Recently I was working with ExtJs editor grid and I got requirement that after editing data in a row grid should be refreshed and at the same time row should be back to its normal position.

Those who have worked with ExtJs editor grid know that when you edit values in row cells, it will display red mark on top left corner. It states that row data is edited. See the image below.


To remove it, we need to reload grid data and refresh the grid view. Following is the code for it.

myGrid.store.reload();
myGrid.getView().refresh();

Grid will be refreshed and updated data gets loaded from server. Now my requirement was to refresh the only single row, without refreshing the whole grid. When you tab out of edit field or you click outside of the row it will fire afteredit event. Normally in afteredit event there is a Ajax request to send updated data to server and when we get success response we normally reload the grid data store. But in this case its different situation. Following is the code for it.

'afteredit':{
fn : function(e){
Ext.Ajax.request({
url:"savedata.php",
method:'GET',
params:{
param1:value1,
param2:value2
},
success:function(resp,opt){
e.record.set(e.field,gridValue);
e.record.commit();
myGrid.getView().refresh();
},
failure:function(resp,opt){
}
});
}
}

Checkout the code in success function of Ajax request. This does the trick.
e.reocord.set() function set's the value. For example if you have some renderer for columns then this code will set the cell value according to renderer.

e.record.commit() commits the changes and grid row is back to its normal view. It will remove all the red marks from the edited cell.

So using this small trick you have normal row after editing it without refresh the grid data. This trick is useful when you have large number of data in the grid and you want to avoid unnecessary data flow.


12 comments:

  1. Well I am not sure as in native ExtJs library no repeater controls are available. Its available in Ext.Net which is specifically build for Asp.Net by integrating ExtJs. I only work with native ExtJs but I will look into it and post it here.

    ReplyDelete
  2. You just saved my job, mate.
    Thanks.

    ReplyDelete
  3. The only problem I see with the code is that you are not testing the ajax response to see if the information was actually saved to db or not. A success response in a ajax function only means that a exchange of info took place ok. It does not mean that whatever it is you where trying to do actually worked. You need to test with something like:

    ReplyDelete
  4. Hi hiren,
    How can i update row data to database using ext.net

    ReplyDelete
  5. Sorry but I am not sure about Ext.Net since I have not used it much.

    ReplyDelete
  6. I have a situation here. I implemented a combo box for Pagination number expansion. I want to dynamically refresh the page on select the combo box value. Can u please help me with this?. The code is below. I tried reload and refresh button I have no idea why they are not working inside my code.

    combo.on('select', function(combo, record) {
    bbar.pageSize = parseInt(record.get('id'), 10);
    bbar.doLoad(bbar.cursor);
    }, this);

    ReplyDelete
  7. In your case you could dynamically reload grid store by setting page number in it.

    ReplyDelete
  8. This was awesome... I was looking for it the whole day... You rock dude

    ReplyDelete
  9. When you write myGrid.getView().refresh();
    Aren,t you refreshing the whole table

    ReplyDelete
    Replies
    1. No it will just refresh the DOM elements.

      Delete
    2. @Catalin Banu: You are correct. Dave has it wrong here. Looking at the documentation you can see `refresh()` will refresh the entire view, while `refreshNode()` will refresh a single row. ExtJS Documentation: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View-method-refresh

      Delete