Skip to main content
December 14, 2009
Question

Need sample code for Master/Detail grids

  • December 14, 2009
  • 1 reply
  • 860 views

I am looking for sample coldfusion 8 code that demonstrates using two editable cfgrids on the same page as a Master/Detail. The two grids would have a one to many relationship. The bottom(detail) grid will refresh when a different row is selected in the top(master) grid. Any help in locating sample code will be appreciated.

    This topic has been closed for replies.

    1 reply

    Inspiring
    December 14, 2009

    Hi,

    You need something like this?

    http://www.asfusion.com/examples/item/quick-grid-bindings

    http://www.asfusion.com/blog/entry/quick-grid-bindings

    HTH

    December 14, 2009

    Thanks so much for the quick response. I downloaded the code you suggested. I changed it to use my own queries. Here is my version :

    <cfform name="myForm" format="flash" height="380" width="700" skin="haloSilver">

    <cfformitem type="script">

    function applyFilter( term:String, grid:mx.controls.DataGrid, columns:Array ):Void {

    var filterTerm:String = term.toString().toLowerCase();

    if(filterTerm.length > 0) {

    if(_global.unfilteredData[grid.id] == undefined){

    if (_global.unfilteredData == undefined){

    _global.unfilteredData = {};

    }

    _global.unfilteredData[grid.id]  = grid.dataProvider.slice(0);

    }

    var filteredData:Array = [];

    for(var i = 0; i< _global.unfilteredData[grid.id].length; i++) {

    var item:Object =  _global.unfilteredData[grid.id];

    var added:Boolean = false;

    for(var j = 0; j< columns.length; j++){

    if(!added){

    var value:String = item[columns].toString().toLowerCase();

    if(value.indexOf(filterTerm) != -1) {

    filteredData.push(item);

    added = true;

    }

    }

    else {

    break;

    }

    }

    }

    grid.dataProvider = filteredData;

    }

    else {

    if(_global.unfilteredData[grid.id] != undefined) grid.dataProvider = _global.unfilteredData[grid.id];

    }

    }

    </cfformitem>

    <cfformgroup type="vertical">

    <cfgrid name="InvHdr" query="qInvHdr" rowheaders="false" width="120" onchange="applyFilter(InvHdr.selectedItem.id,InvDtl,['invnum'])">

    <cfgridcolumn name="invnum" header="InvoiceNumber">

    </cfgrid>

    <cfgrid name="InvDtl" query="qInvDtl" rowheaders="false">

    <cfgridcolumn name="invnum" header="InvoiceNumber">

    <cfgridcolumn name="itemid" header="Item ID">

    <cfgridcolumn name="descrip" header="Description">

    </cfgrid>

    </cfformgroup>

    </cfform>

    --------------------------------------------------------------------
    When I run it, the detail grid shows ALL records. It does not change when different Master records are selected.
    Questions:
    1. Is there any part of the ApplyFilter function that I need to change?
    2. Both the original code and my customization show 2 completely blank grids when run in Google Chrome. They look fine in IE. Any ideas why?
    3. If query column 'invnum' is my key is my function call, onchange="applyFilter(InvHdr.selectedItem.id,InvDtl,['invnum'])"
    correct?
    4. Can this be run using format="html" or does it have to be format="flash" to work properly?
    Thank You,
    lhaug

    Inspiring
    December 14, 2009

    Hi Ihaug1,

    When I run it, the detail grid shows ALL records. It does not change when different Master records are selected.

    * Make sure that you have the "id" field in both your Master and Detail tables. (Because if you look into the source code of the asfusion example you can find a field "id" in both the master and detail queries which they later refer as    onchange="applyFilter(InvHdr.selectedItem.id,InvDtl,['invnum'])">

    2. Both the original code and my customization show 2 completely blank grids when run in Google Chrome. They look fine in IE. Any ideas why?

    Not sure why.. But I read in one thread (http://www.opensubscriber.com/message/cf-talk@houseoffusion.com/10460519.html) in where they face a similar issue,

    3. If query column 'invnum' is my key is my function call, onchange="applyFilter(InvHdr.selectedItem.id,InvDtl,['invnum'])"
    correct?


    Yes.

    4. Can this be run using format="html" or does it have to be format="flash" to work properly?


    Yes. But, you need to have the Java runtime environment installed in your machine, since the grid will be displayed as an applet.

    HTH