Defining Grid Structure on the Server Side

APPLICABLE TO: Grid

Starting from version 1.0, connectors can be used to define the header of the grid.

It can be done in 2 ways:

automatic
manual

Automatic defining

In case of automatic defining, the grid will use names of table's fields as labels for the columns.

<cfinclude template="../../config.cfm">
<cfset grid = createObject(
    "component",
    "dhtmlxConnectors.GridConnector"
).init("#datasource#","MySQL")>
<cfset config = createObject(
    "component",
    "dhtmlxConnectors.GridConfiguration"
).init()>
<cfset grid.set_config(config)>
<cfset grid.dynamic_loading(100)>
<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>

If you want to apply automatic server-side sorting and filtering for specified columns, you should specify true inside GridConfiguration:

<cfset grid = createObject(
    "component",
    "dhtmlxConnectors.GridConnector"
).init("#datasource#","MySQL")>
<cfset config = createObject(
    "component",
    "dhtmlxConnectors.GridConfiguration"
).init(true)>
<cfset grid.set_config(config)>
<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>

Manual defining

In the manual mode, headers and their parameters are defined by php command. Names of commands mimic names of js commands with similar functionality.

<cfset config = createObject(
    "component",
    "dhtmlxConnectors.GridConfiguration"
).init(true)>
<cfset config.setHeader(array("column 1","column 2"))>
<cfset config.setColTypes(array("ro","ed"))>
<cfset grid.set_config(config)>
 
<cfset grid.render_table("grid50000","item_id","item_nm,item_cd")>

Available commands

All commands below get an array of values or a comma-separated string as the input parameter, delimited by 'header delimiter' (default value - ',').

<!--- column labels ---> 
<cfset config.setHeader(names)>
<!--- column types ---> 
<cfset config.setColTypes(typeStr)>
<!--- column IDs --->
<cfset config.setColIds(idsStr)>
<!--- column width, int values, will be processed as size in pixels --->
<cfset config.setInitWidths(widths)>
<!--- column width, int value, will be threated as size in percents --->
<cfset config.setInitWidthsP(widths)>
<!--- column align --->
<cfset config.setColAlign(alStr)>
<!--- column sorting type --->
<cfset config.setColSorting(sortStr)>
<!--- column color --->
<cfset config.setColColor(colorStr)>
<!--- visibility of column  --->
<cfset config.setColHidden(hidStr)>

Header and footer

To attach header to the grid you should use the attachHeader() method:

<cfset config.attachHeader(values)>

Parameters:

an array or a string of header names. In case of string, the names are delimited by 'header delimiter' (default value -',')
an array or a string of header styles. In case of string, the styles are delimited by 'header delimiter' (default value - ',')
To attach footer to the grid you should use attachFooter() method:

<cfset config.attachFooter(values)>

Parameters:

an array or a string of footer names. In case of string, the names are delimited by 'header delimiter' (default value - ',')
an array or a string of footer styles. In case of string, the styles are delimited by 'header delimiter' (default value - ',')

Header delimiter

The header delimeter sets symbol or several symbols which will be used as a delimiter in string arguments.

<cfset config.setHeaderDelimiter(headerDelimiter)>

Related samples

defining grid structure on the server side