Using jQuery based jqGrid with ColdFusion Revisited: Full CRUD grid with Advanced Searching

It has been a while since I made my last blog post as work has kept me very busy. Over the weekend I saw that a new jqGrid version had been released and that it contained in-built advanced searching (called multiple search). I also thought it was a good time to revisit my earlier blog post on a full CRUD grid and update it to 3.6 specifications.


This implementation uses the following jqGrid features:

  1. Inbuilt Form based Add, Edit, Delete and Search functionality
  2. Search is done using new Multiple Search feature
  3. Exploration of a few additional colModel parameters

View the Demo : this is all realtime, any updates made will be reflected in the grid.
Now, lets look at the code

[More]

Playing with jQuery UI : Part 1

I downloaded the jQuery UI library a few weeks back (should have done it earlier too). I started playing around with it, but work has been so busy did not get much time to look at it. Finally, found some time to do a basic tabs, accordians, sliders, progress bar demo. Its very basic, good start to learing how some of the things work.

View Demo

The progress bar demo is probably the most complex one, so code for it follows.

[More]

jqGrid 3.5 with jQuery UI ThemeRoller Themes Demos

jqGrid 3.5 was released yesterday. It includes lots of good features, including a new rendering engine for faster loading. It also now supports jQuery UI ThemeRoller themes, so to start off itself you have access to variety of styles and can create your own easily too.

So I went ahead and created a demo that shows the grid in all these themes.
View Demo

How I did this style selection switch, follows

[More]

ColdFusion 9 cfgrid with ORM: Part 2 - Full CRUD Grid

Previously I blogged on getting a normal cfgrid running with ColdFusion. This post will look at expanding that to a full CRUD grid using ORM.

In addition to ColdFusion, I am also using jQuery and jqModalspecifically to display the modal boxes. Main reason being that I was itching to do some jQuery stuff.

Code follows.

[More]

Quick Tip : When Working with jQuery and jqModal

This has stumped me twice, so best thought to make a blog post, for my own records and also for anybody who gets stuck at the same place.

Over the weekend, I have been working with jQuery and specifically jqModal for a full fledged CRUD Grid using ORM. For some of the alerts/forms I was using jqModal to show them. Everything worked fine on Firefox, but IE8 had issues. After an hour or so of searching, I realized that I had faced a similar issue when working with jqModal on IE before.

The problem is that since I do not wirte a lot of HTML in my day to day coding, I generally omit the DOCTYPE sepcification from my pages. This causes interesting issues on IE. So, the solution was to specify the DOCTYPE and everything was working smoothly in IE too. My DOCTYPE specification that solved these issues was:

   view plainprintabout
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

See the difference:
DOCTYPE NOT Present
DOCTYPE Present

Using jQuery based jqGrid with ColdFusion: Part 4: Full CRUD grid with Custom Search Screen

So, previously I blogged about basic jqGrid implementations with Filter/Search and Inline Edit capabilities. The grid here now builds on all that, and implements Add and Delete functionality. I also changed the theme to the new steel theme (available in version 3.4 zip), its much more professional looking compared to the others in my opinion.

This implementation doesn't exactly follow the previous posts. For this grid I am using:

  1. Inbuilt Form based Add, Edit and Delete functionality
  2. Custom Built Search Dialog Screen
  3. Custom Refresh Action
  4. Use jqModal for the custom search dialog.

See The Demo. DB being changed realtime, any operations you perform will happen.

[More]

ColdFusion and jQuery definition auto-linking (A DB driven implementation)

So, this post is inspired by Ray Camden's post on the same subject, Using jQuery and ColdFusion to create an auto-link for definition application, so all credit goes to Ray. I wanted to implement something similar, and also make it database driven as I beleive any implementation of this in an application would be DB driven anyway. You can take a look at the demo here: http://coldfusion-ria.com/test/term.cfm I recommend using Firefox, as I have encountered an issue where the jQuery click event stops working for the first word on IE7 after you click it once.

First things first, the DB structure, looks like this:

The TermName is the term that will be linked, the term HTML is what we will replace the term word with, the TermDef is the definition of the term, and track can be used to track URL clicks.

[More]

Using jQuery based jqGrid with ColdFusion: Part 3 : Inline Editing of Data Rows

So, we have now looked:
  1. Creating a basic jqGrid with ColdFusion
  2. Implementing the jqGrid Filter functionality
The next step is to allow inline row editing in our grid. This is very simple to implement using jqGrid and it looks good too:

So, to start off, have a look at the Demo. Database is being changed realtime, so any updates you make will happen.

[More]

Using jQuery based jqGrid with ColdFusion: Part 2 - Filter Records & work with Custom Data

Continuing to work with jqGrid, this time we will implement its Filter/Search functionality. jqGrid provides an inbuilt filter component, which can be inbuilt into its navigation grid (navgrid), or from a custom pager/toolbar button, or from an external button on your page. This opens in the form of a window (similar to cfwindow):

Check Out the Demo Here

[More]

ColdFusion 8 cfgrid vs jQuery jqGrid - Try it Out

So, one of the things that led me to look into jqGrid and jQuery was that out of the box cfgrid implementation for CF8 was a bit slower than I expected.

To see this, I put together, two similar implementations in cfgrid and jqGrid, and now you can try it out to see if there is any difference.

cfgrid Implementation

jQuery Implementation

[More]

More Entries

BlogCFC was created by Raymond Camden. This blog is running version 5.9.5.003.  Design based on ARCLITE by: digitalnature