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.
There are no comments for this entry.
[Add Comment]