ColdFusion Tips: cfgrid

Showing posts with label cfgrid. Show all posts

Friday, November 15, 2013

Search Functionality in CFGRID

In my previous cfgrid posts we have covered following functionality of cfgrid:

1. Starting with CFGRID( part - 1 )
2. Starting with CFGRID( part - 2 )(Auto Refreshing CFGRID)
3. Export cfgrid Data or Table Data in Excel, Pdf and CSV Format(ColdFusion - 9)
4. Conditionally Change the Color Of a Cell Text In cfgrid

Today, we will see how we can implement searching functionality in cfgrid. Lets see our cfgrid.cfm code below:

Now, see the cfgrid.cfc:

All the above code is self explanatory. Hope it will help people who are new in ColdFusion and trying to learn about cfgrid.

Happy Coding!!! :)

Friday, May 04, 2012

Conditionally Change the Color Of a Cell Text In cfgrid

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.

Sunday, January 22, 2012

Starting with CFGRID( part - 2 )(Auto Refreshing CFGRID)

How to Add Auto Refreshing In cfgrid

NOTE: All the JS Code is valid for ColdFusion 9(may not work in other version)

The concept auto refreshing is to add some javascript code which will call the grid refresh event after some specified interval of time, So our grid will be refreshed after the interval of time.

First, follow the fist post( http://coldfusion-tip.blogspot.com/2012/01/starting-with-cfgrid-part-1.html ) of cfgrid to create a dynamic grid. Then include the following javascript code in the header section of the code.

NOTE: Always include the JS code for cfgrid in header section. Sometimes, if we will include the JS in body part some features stopped working. So better to include the JS at header.

//Function to refresh the grid

function refreshGrid()

{

ColdFusion.Grid.refresh('courseGrid', false);

}

//Set time interval to refresh the grid. We have set time interval 10000ms. The grid will refresh in each 10 sec

setInterval(function() {

refreshGrid();

}, 10000);

How to Add Custom Form Elements in cfgrid toolbar

In this section we will create two form elements. A button to stop the autorefreshing and a combo box for selecting department ID for which you want to show the courses.

Add Custom buttom in cfgrid to stop auto refreshing

Keep the cfgrid.cfc same as in first post(http://coldfusion-tip.blogspot.com/2012/01/starting-with-cfgrid-part-1.html).

The code for cfgrid.cfm

<html>

<head>

</head>

<body>

</cfgrid>

</cfform>

</body>

</html>

The code for cfgrid.js

//Intially the value is true. So when first time the grid loads during page load the auto

//refresh functionality is enables but when we will click the button "OFF Auto Refresh" then

//this functionality will be disabled. Again clciking this button it will enable the autorefresh

var isAutoRefresh = true;

//This section executed when the grid loads

var init = function(){

//get the grid Object

var grid = ColdFusion.Grid.getGridObject('courseGrid');

//Get Top toolbar Object

var gridFootToolBar = grid.getBottomToolbar();

//Add the button for stop auto refresh

gridFootToolBar.add('-', {

pressed: false,

enableToggle:true,

text: '<b style="color:red;">OFF Auto Refresh</b>',

cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly

handler:toggleRefresh//Our javascript handler function that toggle the auto refresh

});

//Reconfigure the layout of the toolbar again, this causes the button to show on the toolbar

gridFootToolBar.doLayout();

};

function toggleRefresh()

{

//If auto refresh is set to true then make it false and vice versa

if(isAutoRefresh)

isAutoRefresh = false;

else

isAutoRefresh = true;

}