ColdFusion Community

The online ColdFusion / CFML community website

Readers of mine will know I'm a big fan of jQuery. Now, we have a great Ajaxified grid in CF8, but a friend wrote to ask me how to use jqGrid (http://www.trirand.com/blog/) with ColdFusion. No problem: I am a freaking guru, after all!

Four and a half hours later, a broken man, having enlisted help from my colleague, Maciej, I finally have the answer...

Here's the HTML:


<html>
<head>
<title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="/jqGrid-3.3/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/jqGrid-3.3/themes/jqModal.css" />
<script src="/jqGrid-3.3/jquery.js" type="text/javascript"></script>
<script src="/jqGrid-3.3/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/jqGrid-3.3/js/jqModal.js" type="text/javascript"></script>
<script src="/jqGrid-3.3/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list").jqGrid({
url:'InvoiceMgr.cfc?method=getInvoices',
datatype: 'json',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}],
pager: $('#pager'),
rowNum:10,
rowList:[10,20,30],
sortorder: "desc",
viewrecords: true,
imgpath: '/jqGrid-3.3/themes/basic/images',
caption: 'Invoices',
jsonReader: {
root: "ROWS",
page: "PAGE",
total: "TOTAL",
cell: "",
id: "id"
}}
);
});
</script>
</head>
<body>
<table id="list" class="scroll"> <div id="pager" class="scroll" style="text-align:center;"> </body>
</html>

And here's the CFC that it calls for data:

<cfcomponent displayname="InvoiceMgr" extends="halogen.Object" output="false">
<cffunction name="getInvoices" access="remote" output="false" returnformat="json">
<cfset invoices = ArrayNew(1) />
<cfquery datasource="test" name="q">
SELECT * FROM invheader
</cfquery>
<cfloop query="q">
<cfset invoices[currentrow] = [#invid#, '#invdate#', #amount#, #tax#, #total#, #note#]>
</cfloop>
<cfset str = {total=1, page=1, records=#q.recordcount#, rows=invoices}>
<cfreturn str />
</cffunction>
</cfcomponent>

Just in case you ever need to know...

Views: 693

Add a Comment

You need to be a member of ColdFusion Community to add comments!

Join ColdFusion Community

Comment by Jim Papaleo on January 29, 2009 at 21:20
Hal,
I've got a basic jqgrid working. Great! So how do I pass more arguements to the cfc? Say I only want to see a certain invoice? I've been search every where for the answer. So, how do I do that?
Jim
Comment by Mike on December 9, 2008 at 19:59
Hi Hal,
I just try you tuto but it seems to not work, maybe because of the CFC i don't know, the Grid still empty, can you please look any further to give me a solution


Latest Activity

Ashutosh Verma liked Raghuram Reddy Gottimukkula's blog post My Experience with Coldfusion Builder
Monday
Harmindra Sirohi updated their profile
Feb 18
Harmindra Sirohi posted a status
"Hello"
Feb 18
Isaac Dealey posted a discussion

PayPal Cart Integration

Hey guys,I know I haven't been on here in a little while. I'm hoping one of you will have some information on this...A client of mine asked me to integrate PayPal into their existing custom shopping cart. It's just the typical old PayFlow-style, send the browser to PayPal and then bring them back afterward. I read through all the documentation and I've got it creating the form and sending to PayPal and it all works.Now PayPal says form encryption is not required, although they also say you…See More
Jan 2
Isaac Dealey updated their profile
Jan 1
Profile IconJohn McClain, Michael Steen and Cfdevshop joined ColdFusion Community
Oct 23, 2014
Jelle Kralt updated their profile
Sep 19, 2014
CVgeek added a discussion to the group CF Contractors
Thumbnail

ColdFusion Developers (London)

ColdFusion Developers (London)The vacancy is with an established independent B2B industry leading online news, research and events business providing a combination of free –to-air news and subscription based market intelligence databases and services. The company also provides online best practice and professional communities and industry events, large and small.Role:They are looking for an experienced additional ColdFusion developer to join the small in-house team to support continued…See More
Sep 11, 2014

Members

Translate this page

© 2015   Created by Nick Tong.

Badges  |  Report an Issue  |  Terms of Service