ColdFusion Tips: May 2012

This topic consists of three parts

1. Grid display page.
2. ColdFusion component and function to bind the grid.
3. JavaScript for changing the color of specific grid Cell.

1. cfgridDemo.cfm(Grid Display Page)

<html>
    <head>
        <script type="text/javascript" src="./cfgridDemo.js"></script>
    </head>
    <body>    
            <!-- This is grid display Order information of a online Shop. orderID, Order Date, Customer Name, Order Status
                   The order status can be complete, pending, Shipped, etc.Depending on the order status the color of the status text will change
                 -->
        <cfform name="displayGridForm" format="html">
            <cfgrid format="html" name="displayGrid" autoWidth="true" pagesize="50" selectmode="row" bind="cfc:testCode.cfgridDemo.getGridData({cfgridpagesize},{cfgridpage},{cfgridsortcolumn},{cfgridsortdirection})" sort="true">
                <cfgridcolumn name="ORDERID"            width="150"        header="Order ID"    headerbold="true" />
                <cfgridcolumn name="ORDERDATE"        width="100"        header="Order Date"    headerbold="true"  type="date" />
                <cfgridcolumn name="CUSTOMERFIRSTNAME"    width="150"        header="Customer First Name"    headerbold="true" />
                <cfgridcolumn name="CUSTOMERLASTNAME"        width="150"     header="Customer Last Name"    headerbold="true" />
                <cfgridcolumn name="ORDERSTATUSID"    width="100"        header="Order Status ID"        headerbold="true" />
                <cfgridcolumn name="STATUS"        width="100"        header="Status"        headerbold="true" />
            </cfgrid>
        </cfform>
        <cfset ajaxOnLoad("init") />
    </body>
</html>

2. cfgridDemo.cfc(ColdFusion component and function to bind the grid)

<cfcomponent>
    <cffunction name="getGridData" access="remote" returntype="Struct" output="false">
        <cfargument name="pageSize" required="false" default="30" hint="No of records to display in each page of cfgrid" />
        <cfargument name="pageNo" required="false" default="1" hint="Current page no of cfgrid which you want to view" />
        <cfargument name="sortColumnName" required="false" default="ORDERID" hint="Default sort column for query sorting" />
        <cfargument name="sortDirection" required="false" default="ASC" hint="Default query sort direction" />
        
        <cfset variables.qryGetMedia = queryNew("") />
        
        <!--- Default Sort Coulmn name if the sortColumn contains empty strings --->
        <cfif len(arguments.sortColumnName)>
            <cfset variables.sortColumnName = arguments.sortColumnName />
        <cfelse>
            <cfset variables.sortColumnName = "ORDERID" />
        </cfif>
        
        <!--- Default Sort direction if the sort direction contains empty string --->
        <cfif len(arguments.sortDirection)>
            <cfset variables.sortDirection = arguments.sortDirection />
        <cfelse>
            <cfset variables.sortDirection = "ASC" />
        </cfif>
        
        <!--- Here I have used the dafualt datasource created during ColdFusion installation.
            So you can run the code directly. --->
        <cfquery datasource="cfartgallery" name="variables.qryGetMedia">
            SELECT
                ORDERS.ORDERID,
                ORDERS.CUSTOMERFIRSTNAME,
                ORDERS.CUSTOMERLASTNAME,
                ORDERS.ORDERSTATUSID,
                ORDERS.ORDERDATE,
                ORDERSTATUS.STATUS
            FROM ORDERS
            INNER JOIN ORDERSTATUS ON ORDERS.ORDERSTATUSID = ORDERSTATUS.ORDERSTATUSID
            ORDER BY #variables.sortColumnName# #variables.sortDirection#
        </cfquery>
        
        <!--- Convert the query Object into cfgrid compatible structure --->
        <cfreturn queryConvertForGrid(variables.qryGetMedia, arguments.pageNo, arguments.pageSize) />
    </cffunction>
</cfcomponent>

3. cfgridDemo.js(JavaScript for changing the color of specific grid Cell.)

var init = function(){
    
    //get the grid Object
    grid = ColdFusion.Grid.getGridObject('displayGrid');
    
    //get grid Column Model
    var gridCM = grid.getColumnModel();
    
    //Call the color renderer function to render the color
    gridCM.setRenderer(gridCM.getIndexById('STATUS'), colorRenderer);
}

//Function to color renderer
function colorRenderer(value)
{
    if(value.search(/paid/i) > -1)
        return '<b style="color:#00FF00;">' + value + '</b>';
    else if(value.search(/pending/i) > -1)
        return '<b style="color:#FF0000;">' + value + '</b>';
    else if(value.search(/shipped/i) > -1) 
        return '<b style="color:#00FFFF;">' + value + '</b>';
    else if(value.search(/complete/i) > -1) 
        return '<b style="color:#0000FF;">' + value + '</b>';
    else
        return value;
}

After all these steps if we will run cfgridDemo.cfm we will get the following out put. We can also change the display style by changing the JavaScript as I have done.

ColdFusion Tips

Friday, May 04, 2012

Conditionally Change the Color Of a Cell Text In cfgrid

Followers