How do you get cfgrid to maintain the selected row after a refresh?

not sure but i would suggest you to look into EXT JS rather than looking for cfgrid, There is one way but i currently do not remember how?

Let's check how we can start this

can you please post the ext js you have used till now

I already have an application in a cfgrid which I need to modify so that it maintains the selected row after doing an update.

This requires a refresh to bring back the new data...

I posted what I have been playing around with but it does not work...

Adding selectOnLoad="false" helps a bunch in that it now no longer reselects a different user after a single refresh messing up the update if you want to add more than one role...

However it still does not hilite/select the previously selected row...

It also doesn't hilite/select the first record when the program is opened for the first time but I think thats ok as long as it reselects the previous user which is more important...


My grid call:

<cfgrid name="userRoles"
         format="html"
         pagesize="25"
         striperows="yes"
         gridlines="yes"
         appendkey="no"
         selectmode="row"
         width="1350"
         selectOnLoad="false"
         bind="cfc:getInfo.getMyData({cfgridpage},
                              {cfgridpagesize},
                              {cfgridsortcolumn},
                              {cfgridsortdirection},
                              getPageSize(),
                              {filtercolumn},
                              {filter},
                              {termDate})">

Select allOpen in new window

My Init function:

var rowNumberZeroBasedIndex = 0;

function init(){
	//get the grid component 
	grid = ColdFusion.Grid.getGridObject("userRoles");
	grid.store.on("load", function(){
			var grid = ColdFusion.Grid.getGridObject('userRoles');
			var model = grid.getSelectionModel();
			model.selectRow(rowNumberZeroBasedIndex);
		}
	);  			
	
	grid.addListener("rowdblclick",showMyWin);	

	//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
	var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);

	//Create new PaginToolbar and render it to bbar (grid footer)
	gbbar = new Ext.PagingToolbar({renderTo:bbar, 
		store: grid.store, 
		pageSize: 25, 
		displayInfo: true, 
		displayMsg: '<b>Showing {0} - {1} out of {2}</b>', 
		emptyMsg: "<b>No Record</b>",
	});
}

Select allOpen in new window

My Refresh Function:

function myRefresh(){
	var myGrid=ColdFusion.Grid.getGridObject('userRoles');
	rowNumberZeroBasedIndex = myGrid.getSelectionModel().last;		
	ColdFusion.Grid.refresh('userRoles',true);
}

Select allOpen in new window

I've gotta head out until tomorrow.  What CF version? I tested w/cf10.  

Try the simple example I posted, with a basic grid. Nothing extra (params, javascript, etc...). If it works, then something in the extra js is messing things up. If it doesn't work  that suggests an ext version problem.  The ext in CF8-10 varies a lot, so you might need to adjust for your version.

Hey Stu,

Ext JS uses the following to keep the selectd row selected, You can use this:

var myGrid = this.getMyGrid(),
    selModel = myGrid.getSelectionModel();

selModel.select(selModel.getLastSelected());

Check this

//      Create a reselect function by collecting currently selected row indexes,
//      and reselecting those same indexes in the callback.
		if (this.keepSelections && sm && sm.hasSelection()) {
			var selection = sm.getSelections();
			for (var i = 0; i < selection.length; i++) {
			   selection[i] = ds.indexOf(selection[i]);
			}
			reselect = function() {
				for (var i = 0; i < selection.length; i++) {
					sm.selectRow(selection[i]);
				}
			}
		};
ds.load({callback:reselect});

Select allOpen in new window

@myselfrandhawa - If that works, great. But per EE policy always note the source when copying code from another site, example

http://www.sencha.com/forum/showthread.php?26254-Grid-Row-Selection-not-maintained-on-store-reload
http://www.sencha.com/forum/showthread.php?1958-Paged-Grid-How-to-keep-selections-over-multiple-pages

Just got in to work ... it is CF10 running on linux not that i think that makes a diff.

Will take a look at those suggestions in a bit.

sorry agx, i will keep this in mind further onwards

Just realized my refresh function did not re-assign the selected row ( had too much commented out )

ColdFusion.Grid.getGridObject('userRoles').getSelectionModel().selectRow(rowNumberZeroBasedIndex);

Added that back but still no dice...


@hawa :: I modified the refresh so it looks like -

function myRefresh(){
	// Save the last selected grid row
	var myGrid = this.getMyGrid();
	selModel = myGrid.getSelectionModel();
	selModel.select(selModel.getLastSelected()); 

	// Refresh the grid
	ColdFusion.Grid.refresh('userRoles',true);

	// Re-Assign the selected row
	ColdFusion.Grid.getGridObject('userRoles').getSelectionModel().selectRow(selModel);
}

Select allOpen in new window

This kind of works - as in it does maintain the selected row but firefox/firebug complains that:

TypeError: this.getMyGrid is not a function
var myGrid = this.getMyGrid();
Line 124

And in IE 9 it causes an error processing javascript and blanks out the whole page with an error ...

(EDIT)

@stu215 - Did you try the exact code I posted earlier? I'm trying to figure out if it the problem is your additional code or the example.   The basic code worked perfectly in CF10 windows o/s.

Try the exact example above with a simple grid bind - (don't add any extra parameters or functions for now. just the straight example)

@agx - I integrated it as shown in the code snippets in comment: 38833188... :-(

var myGrid = this.getMyGrid();

where is it referring t grid name

Yep.

Just made a test file and copied the grid into it and it loads no data at all - just loads empty grid w spinning thing thinking :: ( I must be missing something )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

	<script type="text/javascript">
        var rowNumberZeroBasedIndex = 0;
        function init() {
            var myGrid = ColdFusion.Grid.getGridObject('userRoles');
            myGrid.store.on("load", function(){
                                        var grid = ColdFusion.Grid.getGridObject('userRoles');
                                        var model = grid.getSelectionModel();
                                        model.selectRow(rowNumberZeroBasedIndex);
                                    }
                                );        
        };
        // testing only. re-select should happen automatically on grid load
        function myRefresh(){
            var myGrid=ColdFusion.Grid.getGridObject('userRoles');
            rowNumberZeroBasedIndex = myGrid.getSelectionModel().last;    
            ColdFusion.Grid.refresh('userRoles',true);
        }
    </script>

</head>

<body>


<cfform name="gridForm">
<input type="button" value="My Refresh" onClick="myRefresh()">

<cfgrid name="userRoles"
         format="html"
         pagesize="25"
         striperows="yes"
         gridlines="yes"
         appendkey="no"
         selectmode="row"
         width="1350"
         selectOnLoad="false"
         bind="cfc:getInfo.getMyData({cfgridpage},
                              {cfgridpagesize},
                              {cfgridsortcolumn},
                              {cfgridsortdirection},
                              getPageSize(),
                              {filtercolumn},
                              {filter},
                              {termDate})">

      <cfgridcolumn name="Emp_ID_SYS" header="EmpID" width="50"/>
      <cfgridcolumn name="First_Name" header="First_Name" width="100"/>
      <cfgridcolumn name="Last_Name" header="Last_Name" width="100"/>
      <cfgridcolumn name="Supervisor" header="Supervisor" width="100"/>
      <cfgridcolumn name="EmpFlxID" header="EmpFlxID" width="60"/>
      <cfgridcolumn name="SprvsrFlxID" header="SprvsrFlxID" width="75"/>
      <cfgridcolumn name="Term_Date" header="Term_Date" width="150" mask="m/d/Y h:m:s A" type="date"/>
      <cfgridcolumn name="Band" header="Band" width="550" hrefkey="Emp_ID_SYS"/>
</cfgrid>
</cfform>

<cfset ajaxOnLoad("init")>

</body>
</html>

Select allOpen in new window

>  getPageSize(),
> {filtercolumn},
> {filter},
> {termDate})

Almost.  Leave off the any custom stuff for now.   To keep it simple, I tested with one of the basic examples using the sample dbs:

Edit: This is the exact code I used. Works in IE and FF

FORM

<html>
<head>
<script type="text/javascript">
    var rowNumberZeroBasedIndex = 0;
    function init() {
        var myGrid = ColdFusion.Grid.getGridObject('userRoles');
        myGrid.store.on("load", function(){
                                    var grid = ColdFusion.Grid.getGridObject('userRoles');
                                    var model = grid.getSelectionModel();
                                    model.selectRow(rowNumberZeroBasedIndex);
                                }
                            );        
    };
    function myRefresh(){
        var myGrid=ColdFusion.Grid.getGridObject('userRoles');
        rowNumberZeroBasedIndex = myGrid.getSelectionModel().last;    
        ColdFusion.Grid.refresh('userRoles',true);
    }
</script>
</head>
<body>
 <cfform name="tableform">
    <input type="button" value="My Refresh" onClick="myRefresh()">
	<cfgrid name="userRoles"
         format="html"
         pagesize="10"
         striperows="yes"
         gridlines="yes"
         appendkey="no"
         selectmode="row"
         width="1350"
         selectOnLoad="false"
         bind="cfc:SomeComponent.getData({cfgridpage},
                              {cfgridpagesize},
                              {cfgridsortcolumn},
                              {cfgridsortdirection})">
                  <cfgridcolumn name="ARTISTID" display="No"/>
                  <cfgridcolumn name="FIRSTNAME" header="FIRSTNAME" >
                  <cfgridcolumn name="LASTNAME" header="LASTNAME" >
                  <cfgridcolumn name="CITY" header="CITY" >
                  <cfgridcolumn name="STATE" header="STATE" >
   </cfgrid>
</cfform>

<cfset ajaxOnLoad("init")>
</body>
</html>

Select allOpen in new window

SomeComponent.cfc

<cfcomponent>
	<cffunction name="getData" access="remote">
      <cfargument name="page" required="yes">
      <cfargument name="pageSize" required="yes">
      <cfargument name="gridsortcolumn" required="yes">
      <cfargument name="gridsortdirection" required="yes">
   <cfquery name="Local.members" datasource="cfartgallery">
      SELECT ARTISTID, FIRSTNAME, LASTNAME, CITY, STATE
      FROM ARTISTS
      <cfif gridsortcolumn neq ''>
      ORDER BY #gridsortcolumn# #gridsortdirection#
      </cfif>
   </cfquery>
   <cfreturn queryconvertforgrid(Local.members,page,pagesize)/>
   </cffunction> 
</cfcomponent>

Select allOpen in new window

Yes, the example works in my test file but not when integrated into the main script :-\

slowly adding parts back will let you know when it breaks again.

> var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);

Yeah, I was trying that on my side, but none of the custom toolbar stuff seemed to work for me. It didn't throw an error, but the toolbar didn't change either.  While I know the new code works, it's hard to simulate the "full" results you're seeing without a standalone example of the "original" code.

YAY!!!! <3

@_axg_  I've been trying to get this thing working for over a month now!!!

I rebuilt the rest of the app in the test file and all seems to work perfectly now using your testcase solution ( comment: 38835792 ) as a base! :-D  IE, Safari, and Firefox are all happy and firebug shows no errors.

-- I believe the culprit causing it not to work when i put it into the initial code was a function I had to change the page size ( recordcount ) displayed at a given time.  I incorporated that function into the init function instead and all is well.  I pass an initial default var to the pagesize and then change it using a hidden form field now.

Ex.

<a id="p5" class="" href="X" onClick="document.getElementById('pages').value=5;init();myRefresh();return false;">5</a> | ...

Select allOpen in new window

I have a few other Q's related to this project now that this part is fixed but will post them seperately if you can take a look when you have a moment ( will have cfgrid in title )
-- RE :: yahooapis and IE asking permission to display content ( im using api buttons )
-- RE :: how to pass a column from a seperate query back to cfgrid from the cfc
-- RE :: stopping the user from clicking multiple times before results come back

So happy this finally works!!!

Heres a link to my Q about how to pass a column from a seperate query back to the cfgrid:
https://www.experts-exchange.com/questions/28014813/CFGRID-How-do-I-query-a-table-but-have-one-column-display-as-a-list-from-another-table.html

> @_axg_  I've been trying to get this thing working for over a month now!!!

Boy, I hear ya. Coincidentally I just spent 4 days on something similar and *finally* got it to work. I'm very, very, very glad - for both of us :)

Sweet! Its always a great feeling when it all comes together :-D


Heres the next one about yahooapis and IE asking permission to display content ( im using api buttons ):

https://www.experts-exchange.com/questions/28017202/CFGRID-how-to-get-yahooapis-and-IE-to-stop-asking-permission-to-display-content.html

Great. I can't test it till later, but in the mean time could you update the question to include the full error message (or a screen shot of it)?

Updated :-)  No rush I wont be back to play with it until monday.

- Its not so much of an error message ... but  if you elect not to display all content the buttons dont display ( screenshot attached ).  You can see in the first image how it should look if you accept.

Ok, looks like Sid beat me to it  (and his explanation sounds right) :)

Yep, it worked.  Thanks for taking a look anyways :-)

Finally posted the last Q I had with this:

How to get a function to wait for the results to return with a nice wait graphic?
https://www.experts-exchange.com/questions/28029139/CFGRID-How-to-have-a-wait-image-while-processing-an-update-waiting-for-results.html