How to display data in a html format grid in ColdFusion

Introduction

ColdFusion offers a wide range of tags and features that simplify the process of integrating dynamic data into web applications. One of these useful features is the <cfgrid> tag, which enables developers to display data in a structured, grid-like format within a webpage. This tutorial demonstrates how to create a simple HTML grid using ColdFusion’s <cfgrid> tag to display employee data from a database. The example code shows how to pull data from a database query and present it in a user-friendly, visually appealing format without requiring extensive front-end development work.

In this guide, we will explore how the code leverages ColdFusion’s database query capabilities in combination with form and grid display functions to produce an interactive HTML grid. By the end, you’ll understand how each part of the code contributes to the overall functionality of this example.

Database Query Setup

The first key element of this example is the use of the <cfquery> tag, which runs a query against the database and retrieves the data to be displayed in the grid. The query, named qEmployee, pulls information from an Employees table in a datasource called cfdocexamples. It selects the employee ID (Emp_ID), first name (FirstName), last name (LastName), and email (Email) fields from the database. This query is executed on the server side and stores the result set, which will be fed into the HTML grid.

This setup highlights one of ColdFusion’s strengths: the ease of connecting to and querying a database. By simply defining the datasource and writing a SQL SELECT statement, ColdFusion handles the retrieval of data, preparing it for use in the webpage.

Displaying Data in an HTML Grid

The heart of this example is the use of the <cfgrid> tag, which transforms the database query results into a neatly formatted, interactive grid. Within a ColdFusion form (<cfform>), the <cfgrid> tag is used with the following key attributes:

  • Name: The grid is given the name Employee, which identifies the grid on the form.
  • Query: This points to the qEmployee query, ensuring that the grid will display the data retrieved from the database.
  • Format: The format="html" attribute specifies that the grid will be rendered in standard HTML format. This ensures compatibility across browsers without requiring any special plugins.
  • Dimensions: The width="400" and height="350" attributes define the grid's size, controlling how much screen space the grid occupies.

The grid is embedded in a form, which is essential if you want to handle user interactions with the grid (such as data sorting or row selection) in the future. ColdFusion handles the heavy lifting of generating the grid, so no complex JavaScript or CSS is necessary.

Integrating HTML and ColdFusion

This example also demonstrates the seamless integration of HTML and ColdFusion tags. The HTML structure is straightforward, starting with the <!DOCTYPE html> declaration and basic HTML tags such as <head> and <body>. The ColdFusion-specific tags, such as <cfquery> and <cfgrid>, are embedded within the body of the HTML document, where they execute server-side code and inject dynamic content directly into the page.

This approach ensures that ColdFusion-generated content can easily coexist with static HTML, allowing developers to mix both types of content in a single file without complications. The grid is presented within an HTML page, styled minimally with inline CSS to give the header a distinctive color (DodgerBlue), enhancing the readability of the example.

Conclusion

In this tutorial, we explored how to display data from a database in an HTML grid using ColdFusion’s <cfgrid> tag. This example code simplifies the process of querying a database and presenting that data in a user-friendly format, without requiring extensive client-side coding. By using the ColdFusion tags, developers can easily integrate dynamic data with minimal effort, focusing on functionality rather than implementation details.

This approach can be extended to more complex use cases, such as grids with sorting and paging capabilities, or integrated with other ColdFusion features like AJAX or custom styling. The flexibility and power of ColdFusion make it a valuable tool for rapid web development involving data presentation and manipulation.


cfgridhtml.cfm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cfgrid tag example: how to display data in a html format grid</title>
</head>

<body>
<h2 style="color:DodgerBlue">ColdFusion cfgrid example: HTML Format</h2>

<cfquery name="qEmployee" datasource="cfdocexamples">
 SELECT Emp_ID,FirstName,LastName,Email FROM Employees
</cfquery>

<cfform method="post" name="GridExampleForm">
 <cfgrid 
     name="Employee" 
        query="qEmployee" 
        format="html" 
        width="400" 
        height="350"
        >
 </cfgrid>
</cfform>
</body>
</html>





More ColdFusion examples