Solved

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

Posted on 2013-01-29
31
1,984 Views
Last Modified: 2013-02-12
How do you get cfgrid to maintain the selected row after a refresh?

This is what I have been playing with to no avail:

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

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

//	var mySM=myGrid.getSelectionModel().getSelected().id;
//	var myDS=myGrid.getStore();
//	var rowCount=myDS.totalLength;
//	alert(rowNumberZeroBasedIndex);
			
//var myRow=ColdFusion.Grid.getGridObject('userRoles').getDataSource().indexOf(objRow)
			
//	alert(rowNumberZeroBasedIndex);


}

Open in new window

0
Comment
Question by:stu215
  • 15
  • 11
  • 5
31 Comments
 
LVL 15

Expert Comment

by:myselfrandhawa
Comment Utility
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
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
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...
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
Comment Utility
I believe you must use a listener, to wait until *after* the data loads.  Also, set selectOnLoad="false" or CF may auto select the 1st row and wipe out your selection.  This works w/cf10

Edit I'm heading out.  Just keep in mind the ext stuff varies a lot from 1.x-4.x. You may have to tweak it for your CF version.

<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);
                                }
                            );        
    };
    // 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>
        <!--- for testing only --->
	<input type="button" value="My Refresh" onClick="myRefresh()">
        <cfgrid format="html" name="userRoles"
                      selectOnLoad="false" 
                      selectmode="row"
                      bind="...." ....>
                    .....etc....
        </cfgrid>
</cfform>

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

Open in new window

0
 
LVL 10

Author Comment

by:stu215
Comment Utility
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})">

Open 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>",
	});
}

Open in new window


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

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
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.
0
 
LVL 15

Expert Comment

by:myselfrandhawa
Comment Utility
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());
0
 
LVL 15

Expert Comment

by:myselfrandhawa
Comment Utility
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});

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
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.
0
 
LVL 15

Expert Comment

by:myselfrandhawa
Comment Utility
sorry agx, i will keep this in mind further onwards
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
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);
}

Open 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 ...
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
(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)
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
@agx - I integrated it as shown in the code snippets in comment: 38833188... :-(
0
 
LVL 15

Expert Comment

by:myselfrandhawa
Comment Utility
var myGrid = this.getMyGrid();

where is it referring t grid name
0
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 500 total points
Comment Utility
@stu - I understand, but that's not what I asked ;-)   Since it worked fine for me w/CF10

- Either the basic example doesn't work in your environ OR
- Or something in your code is making it fail.

The only way to find out is to run the *exact* code I'm using.  Then we'll have the answer and know where to go from there.  Make sense? :)
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 10

Author Comment

by:stu215
Comment Utility
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>

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
>  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>

Open 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>

Open in new window

0
 
LVL 10

Author Comment

by:stu215
Comment Utility
Yes, the example works in my test file but not when integrated into the main script :-\
0
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 500 total points
Comment Utility
Ok, good.  At least we know where the problem is now.  Start adding things back (to the example page) see where it breaks.  

       > //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);

I tried your integrated code (minus the row stuff) and it didn't work by itself. Do you have a working example with just that part?
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
slowly adding parts back will let you know when it breaks again.
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
> 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.
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
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> | ...

Open 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
0
 
LVL 10

Author Closing Comment

by:stu215
Comment Utility
So happy this finally works!!!
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
Heres a link to my Q about how to pass a column from a seperate query back to the cfgrid:
http://www.experts-exchange.com/Microsoft/Development/MS-SQL-Server/Q_28014813.html
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
> @_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 :)
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
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 ):

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_28017202.html
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
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)?
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
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.
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
Ok, looks like Sid beat me to it  (and his explanation sounds right) :)
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
Yep, it worked.  Thanks for taking a look anyways :-)
0
 
LVL 10

Author Comment

by:stu215
Comment Utility
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?
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_28029139.html
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now