Inspiring

Answered

Master cfgrid - detail form fields

Forum|Forum|17 years ago
May 17, 2008
6 replies
5746 views

I have a cfgrid that uses data binding to display master (summary) data. I want the user to be able to select one of the rows in the datagrid and not only have the summary data show in form fields below the grid (that works well so far), but I want to pass the hidden keyfield to a cfc in order to run a single record query for the detail data and show that as well on the fly. I used a cfinvoke to pass the key field to a cfc, returning a query recordset and display the detailed fields in the form. All is working if I hardcode the keyfield integer (diadocumentkey) and I can even display the keyfield in the form below, but I have tried many variations trying to get the selected record keyfield value for use in the cfinvoke of the cfc without success. Is this not possible? Is there another way? I tested bringing all the fields over to the datagrid, but since the number of records possible is very large, there is a big performance hit. Some users will read and some will be able to edit and delete the record. My JavaScript is weak, so perhaps there is a way using it. Here's some snippets of the code:

...
<cfform name="frmSearchGrid" id="frmSearchGrid" format="html" method="post" >
...
<cfgrid name="searchGrid"
bindonload="true"
format="html"
pagesize="#intShowRows#"
preservePageOnSort="true"
bind="cfc:#strcomponentpath#readdiadocumentgrid({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{frmSearchGrid:strsearchdb},{frmSearchGrid:strsearchmetadata},{frmSearchGrid:dtedateRangeFrom},{frmSearchGrid:dtedateRangeTo})">
<cfgridcolumn name="diadocumentkey" header="diadocumentkey" display="false" />
<cfgridcolumn name="diadocno" header="docno" width="70" />
<cfgridcolumn name="diadeliverydate" header="doc date" width="75" />
<cfgridcolumn name="diadocsubject" header="subject" width="238" />
</cfgrid>
...
Key:<cfinput type="text" name="readdiadocumentkey" id="readdiadocumentkey" readonly="True" label="Key:" required="No" bind="{searchGrid.diadocumentkey}" style="width:70px" disabled="true" />
...
<cfinvoke component="MwsComponents/DocumentImaging/diaDAO" method="readdiadocumentdetail" returnvariable="rstDetailRecord" >

<cfinvokeargument name="intdiadocumentkey" value="193">
<cfinvokeargument name="strsearchdb" value="DocumentImaging" />













</cfinvoke>
Doc. Sequence:<cfinput type="text" name="editdiaseq" readonly="True" disabled="true" label="Document Sequence:" required="No" value="#rstDetailRecord.diaseq#" style="width:30px" />
</cfform>

This topic has been closed for replies.

Correct answer The_ScareCrow

You need to do some research on cfgrid

The following attribute (pagesize="#intShowRows#") means that only that many records are returned.
The number of columns will not really affect the performance.

quote:

like there should be a way to pass the selected grid item id to bring back the detail data just for the chosen record without clicking another button to get the details

There is see the following code extract, but in your case there is no need for you to do this

<cfsprydataset
name="dsMessage"
type="xml"
bind="CFC:GridDataMessages.getMessageDetails(messageid={messageform:messagegrid.ID})"
xpath="messages/message"
options="{method: 'POST'}"
onBindError="errorHandler">

Ken

B

BrianOAuthor

Inspiring

That's interesting, but farther afield from CF then I want to go now with my wee abilities. Sat I got the following to work with cfajaxproxy. I got the idea from Ray Camdem's blog http://www.coldfusionjedi.com/index.cfm/2008/3/3/Adding-an-ADD-button-for-cfgrid--Part-Deux. It probably could be improved, but it seems to work:

<script type="text/javascript" >
<cfajaxproxy cfc="#strcomponentpath#" jsclassname="diaproxy" />
diaproxy = new diaproxy();
diaproxy.setCallbackHandler(handleResult);


function getArchiveArray() {
var booDocumentImaging = document.frmSearchGrid.strsearchdb[0].checked;
var booFilenet = document.frmSearchGrid.strsearchdb[1].checked;
var aryArchive = [];
// If true then was selected
if (booDocumentImaging) {
//strsearchdb
aryArchive[0]= "DocumentImaging";
//intdocId
aryArchive[1]= ColdFusion.getElementValue("searchGrid","frmSearchGrid","diadocumentkey");
}
// If true then Filenet was selected
else if (booFilenet) {
//strsearchdb
aryArchive[0]= "Filenet";
//intdocId
aryArchive[1]= ColdFusion.getElementValue("searchGrid","frmSearchGrid","diafilenetkey");
}
else {
// should not happen
}

return aryArchive;
}

function deleteSelectedIndex() {
// Deletes the selected record and provides appropriate warnings
var aryArchive = getArchiveArray();
var strsearchdb = aryArchive[0];
var intdocId = aryArchive[1];
// Make sure they really want to do this
if (confirm("Do you really want to delete record id = " + intdocId + "?")) {
// If Yes, Call the CFC passing these parameters and return data as struct to handleResult()
diaproxy.deletediadocument(strsearchdb, intdocId);
//else return
}
}

function handleResult(sResult){
switch(sResult["strAction"]) {
case "create":
break;
case "update":
break;
case "delete":
if (sResult["strError"]) {
// alert the user that the record was not deleted
alert("Unsuccessful: An error occured and record " + sResult["intdocId"] + " was not deleted! " + sResult["strError"]);
}
else {
// refresh the grid data
ColdFusion.Grid.refresh("searchGrid", true);
// confirm to the user that the record was deleted
alert("Success: Record " + sResult["intdocId"] + " was deleted.");
}
break;
default:
alert("Unsuccessful: Contact the Administrator. There seems to be a problem.");
break;
}
}
</script>

<cfform name="frmSearchGrid" id="frmSearchGrid" format="html" method="post" >
<cfinput type="button" name="btndeleteIndex" id="btndeleteIndex" value="Delete Index" onclick="deleteSelectedIndex()" disabled = "true" />
</cfform>

Thanks for your assistance.
Brian

B

BrianOAuthor

Inspiring

Regarding:
1) pageSize: pageSize - failed - I had to use an integer here (or a variable that translated to one)
2) I got this working using for example cm.setHidden(3,true) to hide the 4th grid column depending on certain criteria.

Also the Delete button on the toolbar is overwritten with this toolbar implementation. How can a grid property of delete=yes still work here? I did not see any other Ext.PagingToolbar Config Options related to this. As probably a more flexible alternative I tried to do an onclick event on a "delete" button below the grid that makes a Javascript call and refers to the selected record key value, but not sure how to call my CFC from the Javascript using the Javascript variable for the key. Do I need to use cfajaxproxy here or is there a better way?

T

The_ScareCrow

Inspiring

Here is a tutorial to explain how to do a CRUD grid.

Ken

B

BrianOAuthor

Inspiring

Excellant. I saw references to Ext, but the examples were more for people without CF8. Your code in #1 fails because of 2 issues - missing the ds reference and a comma. Here is a working version:

function init(){
// get the grid component
var grid = ColdFusion.Grid.getGridObject("searchGrid");
// Create a new paging tool bar in the grid footer and display the
// record count in it using the above reference to our grid.
// Create a reference to the column model.
var cm = grid.getColumnModel();
// create a reference to the grid footer
var gridFoot = grid.getView().getFooterPanel(true);
// get the datasource
var ds = grid.getDataSource();
// add a new paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
// this pageSize is the same value as in the cfgrid
pageSize: 5,
displayInfo: true,
// this will display all the record information for you
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"});
}

Thanks again!

B

BrianOAuthor

Inspiring

Scarecrow,
I have been using pagesize=5, but I believe you are correct about the columns. It is the record count that is the driver. Thanks. I think I combined multiple variables in my earlier tests of this that led me down this dark path. One change at a time - will i ever learn? If I only had a brain :-) I'm now editing the data brought over with the grid. Works fine.

2 more questions related to this grid if I may:
1) Is there any way to get the recordcount so I can tell the user? I tried to do a bind to a field with bind="{searchGrid.recordcount}" but that does not work.
2) I change the cfc bound to the cfgrid based on search parameters fine, but I also want to change my grid columns depending on the search parameters. Is there a way to add an if statement around the columns that react to the search field choices by the user like "if [bind the search field value here] EQ 1 then use these cfgridcolumns, else these" ?

Thanks,
Brian

T

The_ScareCrow

Inspiring

The answer to both of your question are better done using the underlying ext javascript framework.

quote:

1) Is there any way to get the recordcount so I can tell the user? I tried to do a bind to a field with bind="{searchGrid.recordcount}" but that does not work.

Create a new paging tool bar in the grid footer and display the record count in it.

In the head of your document create a javascript function.

init = function(){
// create a reference to your grid
var grid = ColdFusion.Grid.getGridObject('dataGrid');
// create a refernce to the column model
var cm = grid.getColumnModel();
// create a reference to the grid footer
var gridFoot = grid.getView().getFooterPanel(true);

// add a new paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
// this is the same value as in the cfgrid
pageSize: pageSize,
displayInfo: true,
// this display all the record information for you
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});

}

quote:

2) I change the cfc bound to the cfgrid based on search parameters fine, but I also want to change my grid columns depending on the search parameters. Is there a way to add an if statement around the columns that react to the search field choices by the user like "if [bind the search field value here] EQ 1 then use these cfgridcolumns, else these" ?

This can't be done in coldfusion as the grid has already been rendered, so it will have to be done using the underlying ext object.

To do this you could have every column in the cfgrid. The add an individual column rederer for each column.
You could then have an if statement in these to show or hide the colum.

Lets assume you have a column "diadeliverydate" and a variable showColumn that is boolean

Then add the follwoing line to the init function described above

// parameters are

grid reference, column model reference, column number (start from zero) (in your grid column 3)
showColumn(grid,cm,2);

Then just create your js function "showColumn"

showColumn = function(grid,cm,col){
// I left this in to show you how to render the column in this case as a date
cm.setRenderer(col,Ext.util.Format.dateRenderer('d/m/Y'));

// show or hide the column
if(showColumn)
cm.hidden = false;
else
cm.hidden = true;
grid.reconfigure(grid.getDataSource(),cm);
}

Note: The included code is untested.

Ken

B

BrianOAuthor

Inspiring

The number of fields in the detail record, which is not shown here, is sizable. The number of records possible is very large in the grid depending on how much the user narrows their search, which can yield a big performance hit. Seems like there should be a way to pass the selected grid item id to bring back the detail data just for the chosen record without clicking another button to get the details.

T

The_ScareCrowCorrect answer

Inspiring

You need to do some research on cfgrid

The following attribute (pagesize="#intShowRows#") means that only that many records are returned.
The number of columns will not really affect the performance.

quote:

like there should be a way to pass the selected grid item id to bring back the detail data just for the chosen record without clicking another button to get the details

There is see the following code extract, but in your case there is no need for you to do this

<cfsprydataset
name="dsMessage"
type="xml"
bind="CFC:GridDataMessages.getMessageDetails(messageid={messageform:messagegrid.ID})"
xpath="messages/message"
options="{method: 'POST'}"
onBindError="errorHandler">

Ken

T

The_ScareCrow

Inspiring

I'm not sure why you want to envoke another cfc for a single record. You already have that record in the cfgrid.

All you need to do is build you form and bind the form fields to the cfgrid.

The following is an excerpt from one of my apps.

In the single page I have

My CFGRID
<cfform name="frmDisplay">
<cfgrid name="grdMessages"
format="html"
bind="CfC:GridDataMessages.getData(page={cfgridpage},
pageSize={cfgridpagesize},sortCol={cfgridsortcolumn},
sortDir={cfgridsortdirection})"
selectMode="row"
pageSize="10"
autowidth="true">
<cfgridcolumn name="fld_Date_Posted" header="Date Posted">
<cfgridcolumn name="fld_Title" header="Title">
</cfgrid>
</cfform>

Then I have the FORM
<cfform action="bb_save.cfm" method="post" enctype="multipart/form-data" name="frmMessage" onsubmit="return checkForm(_CF_this);">
<cfinput type="hidden" bind="{grdMessages.fld_Message_Id}" name="fld_Message_Id">
<cfinput type="text" size="40" name="fld_Name" id="fld_Name" bind="{grdMessages.fld_Posted_By}" readonly="true">
<cfinput type="text" size="40" name="fld_Department" id="fld_Department" bind="{grdMessages.fld_Department}" readonly="true">
</cfform>

Ken

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded