[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2013-01-29
31
Medium Priority
?
2,169 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 15
  • 11
  • 5
31 Comments
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 38832474
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
ID: 38832601
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 2000 total points
ID: 38833088
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 10

Author Comment

by:stu215
ID: 38833188
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_
ID: 38833247
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 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 38833848
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 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 38833869
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_
ID: 38835151
0
 
LVL 10

Author Comment

by:stu215
ID: 38835476
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 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 38835568
sorry agx, i will keep this in mind further onwards
0
 
LVL 10

Author Comment

by:stu215
ID: 38835646
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_
ID: 38835717
(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
ID: 38835734
@agx - I integrated it as shown in the code snippets in comment: 38833188... :-(
0
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 38835759
var myGrid = this.getMyGrid();

where is it referring t grid name
0
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 2000 total points
ID: 38835760
@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
 
LVL 10

Author Comment

by:stu215
ID: 38835792
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_
ID: 38835844
>  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
ID: 38835896
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 2000 total points
ID: 38835941
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
ID: 38836143
slowly adding parts back will let you know when it breaks again.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 38836250
> 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
ID: 38837155
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
ID: 38837163
So happy this finally works!!!
0
 
LVL 10

Author Comment

by:stu215
ID: 38837651
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_
ID: 38837827
> @_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
ID: 38844776
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_
ID: 38845137
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
ID: 38845171
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_
ID: 38847756
Ok, looks like Sid beat me to it  (and his explanation sounds right) :)
0
 
LVL 10

Author Comment

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

Author Comment

by:stu215
ID: 38881085
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

656 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