PDA

View Full Version : Pre-select a row on Grid after load?



shaoen01
10 Feb 2012, 5:58 AM
Hi All,

I intend to have 2 grids on one page. So one click on master grid will load something in another grid. If any change is done to some a cell in slave grid, then it will also have to update the change in master due to some calculation.

So my question is will it be possible for me to refresh the data in master grid (with the new data change in slave grid) and select that particular row that was affected? Thanks for your help in advance!

Farish
10 Feb 2012, 6:09 AM
if you have an id or some unique field in your store, you could use it to find the desired record and select it:


store_master.on('load', function() {
var desired_record = store_master.findRecord('id', valueOfID);
grid_master.getSelectionModel().select(desired_record);
});

shaoen01
10 Feb 2012, 9:32 PM
if you have an id or some unique field in your store, you could use it to find the desired record and select it:


store_master.on('load', function() {
var desired_record = store_master.findRecord('id', valueOfID);
grid_master.getSelectionModel().select(desired_record);
});

Farish:
Thanks for the response. Is it possible to place the code below outside of store_master.on('load', function(){});



var desired_record = store_master.findRecord('id', valueOfID); grid_master.getSelectionModel().select(desired_record);


I'm just wondering if i am only able to select the row on the grid on the load event? Thanks

Farish
11 Feb 2012, 12:40 AM
if you are not going to add or delete records, then u may do it without loading the store too since the ID will remain same. but if you add a new record/delete a record to one store which is not in the second store, then the findRecord function will not find that record and selection will not occur. So you have to do it according to your scenario.

shaoen01
11 Feb 2012, 3:00 AM
if you are not going to add or delete records, then u may do it without loading the store too since the ID will remain same. but if you add a new record/delete a record to one store which is not in the second store, then the findRecord function will not find that record and selection will not occur. So you have to do it according to your scenario.

Farish:
Basically, this is what happens:
1. A row is selected on master grid.
2. Based on row on master grid selected, the slave grid loads data.
3. New row added on slave grid - With price.
4. Once new row on slave grid has been added, master grid has a total price and the total price is based on the sum of the price of each row on the slave grid.

So the row in master grid will never change. It cannot be added or deleted. So i am sure that master grid will have that id number. So i used the code below:




var desired_record = store_master.findRecord('id', valueOfID); grid_master.getSelectionModel().select(desired_record);


Then i did a window.alert to output the id to me and the id was correct. But, the row was not selected on the master grid unfortunately.

Farish
11 Feb 2012, 3:16 AM
try
console.log(desired_record) in Firebug to see if the correct record is found from the store. if not, the selection will not work.

shaoen01
11 Feb 2012, 3:22 AM
try
console.log(desired_record) in Firebug to see if the correct record is found from the store. if not, the selection will not work.

Farish:
I added that line of code and i was looking at firebug. I expanded the "data" section and the record retrieved is correct.

Farish
11 Feb 2012, 3:26 AM
try
grid.getSelectionModel().select(0); and see if the 1st record is selected. post your code.

shaoen01
11 Feb 2012, 4:18 AM
I tried the code above and it does not get selected. I have this store.load method and if i put the selection code provided above, it works using the id number '2048' as an example below.

So after i saved my record and call the store.load() method, it does not select the row.



store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
var desired_record = store.findRecord('ordernumber', '2048');
grid.getSelectionModel().select(desired_record);

Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});

Farish
11 Feb 2012, 6:55 AM
do you mean that if you put the select inside the callback for load it works and if you put it outside it doesnt? the reason would be that the select happens first and the load response comes afterwards. after the load, the grid view is refreshed which would cause the selection to be lost. So you should put the select inside the callback for load. i dont think there is another way to do it.

shaoen01
11 Feb 2012, 3:19 PM
do you mean that if you put the select inside the callback for load it works and if you put it outside it doesnt? the reason would be that the select happens first and the load response comes afterwards. after the load, the grid view is refreshed which would cause the selection to be lost. So you should put the select inside the callback for load. i dont think there is another way to do it.

Farish:
What i was trying to say was that this method is called when the page is loaded. So if i select the row in that store.load method above, the row gets selected. This was used for testing purposes. I actually do intend to put this row selection in another function.

So my question would be is it possible to select a row outside of the load method? Could it be that's why the row can't get selected? Also, if i do a store.load again for the 2nd time because i saved and data needs to be updated, the callback is not fired.

Farish
11 Feb 2012, 3:32 PM
As I said, the grid view is refreshed on load of the store and so you must ensure that you select the row after the store has been loaded in order for it to work the way you want.

The callback should work. Do you put the callback each time in the store.load()? I haven't used the callback function like this. What I do is that I put the things which need to be done at each store load on the the load listener of the store:


store.on('load', function() {
// do selection of row here
});

this code will be executed each time the store's load event is fired.

shaoen01
11 Feb 2012, 4:22 PM
As I said, the grid view is refreshed on load of the store and so you must ensure that you select the row after the store has been loaded in order for it to work the way you want.

The callback should work. Do you put the callback each time in the store.load()? I haven't used the callback function like this. What I do is that I put the things which need to be done at each store load on the the load listener of the store:


store.on('load', function() {
// do selection of row here
});

this code will be executed each time the store's load event is fired.

Farish:
Thanks, i think i will have to use your way to implement it. Thanks again for your help!

Farish
11 Feb 2012, 4:38 PM
Welcome. Glad I could be of some help.