I was working on a project the other day that was using CFGrid to manage some data and there was a button on each row to perform a certain action. However, we didn't want the background color of a row to change when the user clicks on a row or on the button. I created this little javascript that adds a listener to the "beforerowselect" event in the underlying Ext.grid's Row Selection Model and cancels any row selections, preventing the row from being highlighted.
Note: This will prevent any rows from being selected at all, so if you need people to be able to actually select the row for some other purpose then this is probably not the way to go.
<html>
<head>
<title>CFGrid Disable Selected HighLight Example</title>
<script language="JavaScript">
//function to add listener that will cancel all row selections to turn off the highlighting of the selected row in the cfgrid
disableGridHighlight=function(){
var myGrid = ColdFusion.Grid.getGridObject("CouponsGrid");
selModel=myGrid.getSelectionModel();
selModel.on('beforerowselect',function(selModel,rowIndex,keepExisting){return false});
}
</script>
</head>
<body>
<cfset ajaxOnLoad("disableGridHighlight")>
<cfform id="CouponForm" name="CouponForm">
<cfgrid name="CouponsGrid"
format="html"
pagesize="10"
striperows="yes"
selectmode="row"
selectOnLoad="false"
bind="cfc:coupons.getCoupons({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
<cfgridcolumn name="Couponid" display="false" />
<cfgridcolumn name="SPONSORID" header="Sponsor" width="100"/>
<cfgridcolumn name="COUPON" header="Coupon" width="100"/>
<cfgridcolumn name="EXPIRATIONDATE" header="Exp Date" width="200"/>
<cfgridcolumn name="DoSomethingBtn" header="Action Button" width="200"/>
</cfgrid>
</cfform>
</body>
</html>
Click Here to Browse the results of the sample code above.
I am not sure yet how else to disable the highlighting because it appears to be something that has to be set when the Grid is first initialized and that is done by ColdFusion behind the scenes. In the interest of getting my project done on time, I decided to just disable the ability to select a row in the grid because my particular screen did not need to know which row they selected. If I have time later, I will probably revisit this and try to find a better way, but in the mean time, if you know a way to disable the selected row highlighting without disabling row selection all together please leave me a comment below.
Comments (6) |
13648 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
How do make the Button in each row of the Cfgrid ?
Regards,
Dylan
This is the getCoupons function in my coupons.cfc file:
<cffunction name="getCoupons" access="remote" returnType="struct">
<cfargument name="page" type="numeric" required="yes">
<cfargument name="pageSize" type="numeric" required="yes">
<cfargument name="gridsortcolumn" type="string" required="no" default="">
<cfargument name="gridsortdir" type="string" required="no" default="">
<!--- Local variables --->
<cfset var data="">
<!--- Get data --->
<cfquery name="data" datasource="#THIS.dsn#" username="#THIS.dsnusername#" password="#THIS.dsnpassword#">
SELECT COUPONID, SPONSORID, COUPON, EXPIRATIONDATE
FROM coupons
</cfquery>
<cfset qryFinalQuery = QueryNew("COUPONID, SPONSORID, COUPON, EXPIRATIONDATE, DoSomethingBtn","varchar,varchar,varchar,varchar,varchar") />
<cfloop query="data">
<cfset QueryAddRow(qryFinalQuery) />
<cfset QuerySetCell(qryFinalQuery, "COUPONID", "#data.COUPONID#") />
<cfset QuerySetCell(qryFinalQuery, "SPONSORID", "#data.SPONSORID#") />
<cfset QuerySetCell(qryFinalQuery, "COUPON", "#data.COUPON#") />
<cfset QuerySetCell(qryFinalQuery, "EXPIRATIONDATE", "#DateFormat(data.EXPIRATIONDATE, 'mm/dd/yyyy')#") />
<cfset QuerySetCell(qryFinalQuery, "DoSomethingBtn", "<input type=""Button"" value=""Do Something"" onclick=""alert('You just did something!');"">") />
</cfloop>
<!--- And return it as a grid structure --->
<cfreturn QueryConvertForGrid(qryFinalQuery,
ARGUMENTS.page,
ARGUMENTS.pageSize)>
</cffunction>
Basically what I did is modify the result set so that it returns an html string in the DoSomethingBtn column. You can replace the alert with a javascript function that is available on the page.
Pretty nice stuff I would say. I also hope you may have an answer to my question on CF HTML grid. I tried to find the answer on EXT forum but no luck so far.
I have HTML grid binded to CFC.
<cfgrid name = "ShiftGrid" format="html" pagesize=11 width="644" selectcolor="##C0ADA5"
colheaderbold="yes" selectmode="row" sort="yes" selectOnLoad="false"
bind="cfc: #Request.CFC#.Shift.GetShiftSet({cfgridpage},{cfgridpagesize},
{cfgridsortcolumn},{cfgridsortdirection},{InstitutionID},getShiftSearchString())">
<cfgridcolumn name = "ShiftID" display="true" header="ID" width="40">
<cfgridcolumn name = "Name" display="true" header="Description" width="604">
</cfgrid>
I also have CFFORM elements binded to grid columns and buttons Insert, Update, Delete binded to CFC using AJAX proxy.
Everything works fine except: when I set sort on the grid column and make changes to the record that moves it to the other page of the grid because of the sort.
On grid refresh (ColdFusion.Grid.refresh('ShiftGrid', false)) my grid stays on the same page it was before edit but all my form elements points to the element I just edit.
(ColdFusion.Grid.refresh('ShiftGrid', true)) doesn't help.
I don't think it is a proper behaviour. How can I make grid to show page where edited record is after refresh? It would also be nice to highlight it.
It should be connected with using listeners to record selected ROW position and restore it, but how?
ds.on('beforeload',function(){....});
ds.on('load',function(){...});
Regards,
Simon
Last week i am trying cfgrid tag for my sample application.
I got an idea to apply style to complete row based on the condition like 'if the user status in inactive'. I found the code to achieve this using javascript.
Any idea to do with coldufsion completely.
I use it in IE - I tried to troubleshoot it in firefox, but it works just
fine there!
Any ideas? Thanks!
thought I could use disableGridHighlight() to disable the issue
I am having with the colors when a row is selected (which it does)
but it is also disabling the functionality (links) I really need.... :-(