Web Trenches

Gary Fenton wrote on 08/27/08 7:25 AM

I love jquery too so it's great to see someone has created CF tags that use it.

However... while it looks good in FF3 the grid does not render correctly in IE7. The firstname and lastname column headers have been put into their own column so there are actually 4 columns showing, not 2.

CF_window does not render correctly in IE7. The grip bar in the bottom right is misaligned and the window doesn't reduce its X size when made smaller.

In both IE7 and FF3 the loading anim from cf_tooltip sometimes remains on the screen if you move quickly between the two example tooltips.

I hope you don't mind me reporting these bugs?

Henry Ho wrote on 08/27/08 2:19 PM

the demo page is not rendering in IE7.. Script error.

Good luck on your project!

Henry Ho wrote on 08/27/08 3:29 PM

yup, they work now.

suggestion: upload to http://www.riaforge.org/

Gary Fenton wrote on 08/27/08 7:43 PM

The quick search in your demo is case sensitive. e.g. richard does not find Richard.

Looking good in IE7. :-) Paulo has more cool features planned for Flexgrid like inline editing of records, but you probably read that in his forum.

Andy Lynch wrote on 08/28/08 7:02 AM

This looks very nice...

Another glitch that I can see in IE6: If you open up the quick search panel on the grid, then click show window underneath, then the field selection drop-down shows through on top of the window that appears.

Keep up the good work.

Joe Danziger wrote on 08/28/08 6:33 PM

Great job at getting these out there! This looks like a great alternative to the built in tools. Go jQuery!

Andy Wu wrote on 08/29/08 12:11 PM

Nice job Mike!

I had to make a couple of minor changes. I added #cgi.context_path# to the defaults of the pathToXxx attributes which makes it work in the context of a webapp.

Also jquery126-min.js and jtip.inline-support.js had to be renamed to jQuery126-min.js and jTip.inline-support.js.

Thanks

Vince Bonfanti wrote on 08/29/08 3:22 PM

Nice work!

The demo you're showing here seems to be slightly different than what's in the download package--look at the contents of the CF_WINDOW demo.

Scott Stroz wrote on 08/29/08 8:02 PM

Fantatstic. This is great stuff.

Henry wrote on 08/29/08 9:33 PM

any plan for supporting CFDIV?

any plan to submit these to Railo / OpenBD?

Zac Spitzer wrote on 08/29/08 11:17 PM

Look great...

It would great to be able to make the existing cf layout tags pluggable library wise, similiar to using a custom xml file with cfchart

KC wrote on 08/30/08 12:05 AM

Very nice, although the tooltip has a small problem in Opera 9.5. The tooltip only stays open if you don't move your mouse. Once you move your mouse, it closes and re-opens.

charlie griefer wrote on 08/30/08 3:32 AM

hey michael:

this is awesome. thanks for putting it together and sharing it.

found a tiny bug (maybe not a bug, but a point of clarification)... in tooltip.cfm, you've got a <cfparam> for attributes.pathTojTipCSS with a default path specified. however, in the demo code, your custom tag call has an attribute for pathTojqTipCSS.

took me a few minutes to figure out why the path i specified in the custom tag wasn't being picked up :)

thanks again!

William from Lagos wrote on 09/01/08 5:04 AM

This is great stuff. I love this.

Marco Antonio wrote on 09/01/08 9:12 AM

Great job. Flexigrid search stills searching for case sensitive.
Cheers
Marco Antonio

Eric wrote on 09/01/08 10:48 PM

Wow. Get on Riaforge maybe or somewhere we can track the project...I want to use some of this goodness.

John Farrar wrote on 09/02/08 10:41 PM

Curious... I don't see docs anywhere that this grid allows edits. Does it? (Inline edits, or just edits of the data set, or when a row is selected allow the browser to know what row that is and pull the data to a form and then push it back, and what about pushing the update(s) back to the server?) We were using jqGrid before this... and are seeing if it does a full feature compare or not.

Brian wrote on 09/04/08 1:07 PM

Trying to get the id of a row or rows selected when clicking a button.

   deleteperson = function () {
      confirm('Delete ' + $('.trSelected').length + ' items?')

   }   

I get the total count but can't seem to get the values.

Brian wrote on 09/04/08 1:31 PM

I figured it out ...

   deleteperson = function () {
      
      
      if($('.trSelected').length>0){
         if(confirm('Delete ' + $('.trSelected').length + ' items?')){
   var items = $('.trSelected');
      var itemlist ='';
      for(i=0;i<items.length;i++){
               itemlist+= items[i].id.substr(3)+",";
            }
            alert(itemlist);
         }
      } else
            alert('Please make a selection')
      }

Gary Gilbert wrote on 09/05/08 4:41 AM

Hi Michael,

Great work on the tags! Any plans on wrapping more of the jquery ui into tags?

Gary

salvatore fusto wrote on 09/15/08 5:53 AM

Hi Michael,
i've used jqGrid: it has a very good api, expecially in editing grid rows; as far as i know its lacks, with respect to flexgrid, are:
1) you cannot rearrange columns dragging them;
2) you have to display links, one for each column, to display/hide columns: flexgrid way of doing this is more immediate and less intrusive.
regards
salvatore

John Farrar wrote on 09/15/08 8:26 AM

Salvatore,
You are right on all those points... but grids are used for forms often. If we deliver to our customers on grid for data entry and another for display it presents to our customers that we are not 'masters'. They by nature expect everything! lol We need this grid or something like it with ease of coding and data entry in one package.

salvatore fusto wrote on 09/15/08 12:02 PM

John, the best is that jqgrid, you are using in your coop project, would drag columns, exactly as flexgrid: this is an important feature for a user being able to display data, ie columns, in the order he wants.
jqgrid is ideal for forms input: do you know that in the new release you have an api function to copy all cells of the selected row in the corrisponding fields of a form with a single click?
regards

salvatore fusto wrote on 09/15/08 12:10 PM

John, the best is that jqgrid, you are using in your coop project, would drag columns, exactly as flexgrid: this is an important feature for a user being able to display data, ie columns, in the order he wants.
jqgrid is ideal for forms input: do you know that in the new release you have an api function to copy all cells of the selected row in the corrisponding fields of a form with a single click?
regards

Toddzilla wrote on 09/18/08 8:02 PM

Thanks for this great-looking alternative to the very disappointing <cfgrid>. Your README mentions binding the grind to CFC (I imagine like <cfgrid>), but I don't see how that works. The notes say you need version 1, but the release is only 0.7. Is binding to a CFC coming? Is there a way to get version 1?

Jim wrote on 10/22/08 2:54 PM

Mike,

Your CF_grid is great. I love the look and function. But, I do have a problem as it won't
load my data into the grid. I'm going to post the code to our CFUGCNY to see if anyone can spot my problem.

Jim

Jim wrote on 10/23/08 4:14 PM

Mike,

I got it the data to display, but the column sort, Num Rows and search functions don't work. I bind this way, not throught a somepage.cfm, as in your example.

bind="cfc:portal.cfc?method=GetShipments&thisDSN=#myDSN#&thisAcct=#myAcct#&numrows=#myNumRows#&sortcolumn=#form.sortcolumn#&sortdir=#mySrt#"

Also I need to date and dollar format and link from the grid data. Would that follow jquery syntax?

Spiraldev wrote on 10/30/08 2:49 PM

I am using the cf grid and I get a javascript error when I search for Gary saying ID is undefined. I only get this error in IE 7 works fine in FF

Jean Roy wrote on 11/04/08 11:31 AM

This is the first time I am using cfgrid for displaying and updating data. I am having problem with :
1) Formatting date in cfgrid. Currently, it gives me "March 15, 2005 00:00:00". I only want the date to be "March 15, 2005".

2) The metastatic_loc supposes to display a list of location from a lookup table. Currently, it displays the id from that lookup table. How do I fix this problem so that it will have a field list(brain, lung, CNS, liver,...) to allow user to select one from the list ?

3) How do I code to display the result grid after data is updated ?

4) How do I code to insert new row to the existing cfgrid ?
Thank you for helping me.

<cfif (isDefined("MRN") AND len(trim(MRN)) neq 0)>
   <cfinvoke component="CFCs/ICT_DataStore" method="ListMetLoc" returnvariable="qGetMetLoc">
   <cfset Metastatic_loc = qGetMetLoc.Metastatic_loc>
</cfif>
<cfform name="metForm" id="metForm">
<!---<cfdump var=#CreateObject("component", "CFCs.ICT_DataStore").dispMetast(MRN)# />
--->
   <cfgrid name="MetGrid" format="html" selectmode="edit" delete = "Yes" sort = "Yes"
      bind="CFC:CFCs.ICT_DataStore.dispMetast((#MRN#),{cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
      onchange="CFC:CFCs.ICT_DataStore.editMetRec({cfgridaction},{cfgridrow},{cfgridchanged})"
       height="400" width="500" vspace="10" colheaderbold="yes" rowheaders="yes" colheaders="yes" selectcolor="##FF00CC" striperows="yes">
      
      <!--- CFgridcolumn tags arrange the table and control the display --->
      
      <cfgridcolumn name="MRN" header="MRN" select="no" width="100" textcolor="blue" bold="yes" headeralign="center" display="no">
      <cfgridcolumn name="Metastatic_info_id" header="Met Info Id" select="no" width="100" headeralign="center">
      <cfgridcolumn name="Metastatic_loc_id" header="Met Location Id" select="yes" width="100" headeralign="center">
      <cfgridcolumn name="Metastatic_date" header="Metastasis Date" select="yes" width="100" headeralign="center">
      
   </cfgrid>      
<br>
   </cfform>


<cffunction name="dispMetast" access="remote" returntype="any" hint="Display Metastasis Information">
   <cfargument name="MRN" required="yes" type="any" />
   <cfargument name="page" type="numeric" default="1">
   <cfargument name="pageSize" type="numeric" required="no" default="10">
   <cfargument name="gridsortcolumn" type="string" required="no" default="">
   <cfargument name="gridsortdir" type="string" required="no" default="">
      
      <cfquery datasource="ICT_DataStore" name="qGetMet">
         SELECT Pt_demographic.MRN, P1_speakers_tumor_type_lu.tumor_type,
            Diagnosis.date_of_dx, Metastatic_info.Metastatic_info_id,
            Metastatic_info.Metastatic_date,
            P1_speakers_metastatic_loc_lu.metastatic_loc_id

         FROM (((Pt_demographic
                  INNER JOIN Diagnosis
                     ON Pt_demographic.pt_id = Diagnosis.pt_id)
                  INNER JOIN P1_SPEAKERS_TUMOR_TYPE_LU
                     ON Diagnosis.tumor_type_id = P1_SPEAKERS_TUMOR_TYPE_LU.TUMOR_TYPE_ID)
                  INNER JOIN Metastatic_info
                     ON Diagnosis.dx_id = Metastatic_info.dx_id)
                  INNER JOIN P1_speakers_metastatic_loc_lu
                     ON Metastatic_info.Metastatic_loc_id = P1_speakers_metastatic_loc_lu.Metastatic_loc_id

         <cfif isDefined("arguments.MRN")>
            WHERE Pt_demographic.MRN = '#arguments.MRN#'
AND Metastatic_info_id is NOT NULL
         </cfif>
      
      </cfquery>
      
<CFRETURN QueryConvertForGrid(qGetMet,ARGUMENTS.page,ARGUMENTS.pageSize)>

</cffunction>

<cffunction name="EditMetRec" access="remote" output="false">
<cfargument name="gridaction">
<cfargument name="gridrow">
<cfargument name="gridchanged">

   <cfif isStruct(gridrow) and isStruct(gridchanged)>
<cfif gridaction eq "U">
<cfset colname=structkeylist(gridchanged)>
<cfset value=structfind(gridchanged,#colname#)>
         
         <cfquery name="UpdMetInfo" datasource="ICT_DataStore">
            UPDATE Metastatic_info SET
   <cfoutput>#colname#</cfoutput> = '<cfoutput>#value#</cfoutput>'
            WHERE metastatic_info_id = <cfoutput>#gridrow.metastatic_info_id#</cfoutput>
         </cfquery>

   <cfelse>

<cfquery name="DeleteMet" datasource="ICT_DataStore">
          DELETE FROM metastatic_info
            WHERE metastatic_info_id = <cfoutput>#gridrow.Metastatic_info_id#</cfoutput>
</cfquery>

</cfif>
</cfif>

</cffunction>

talarojm wrote on 11/10/08 2:22 PM

I'm having the same issue Spiraldev reported except with IE6. Certain search criteria (for example 'zz' entered as the criteria for a Last Name search) gives a javascript error.

Line:22
Char:25
Error:'id' is null or not an object
Code:0
URL:http://www.webtrenches.com/cfjq/