Skip to main content
Inspiring
November 18, 2009
Question

cfform - Filter by calendar and radio buttons

  • November 18, 2009
  • 1 reply
  • 945 views

Hi all,

I need a cfform which has four tabs..First tab gathers the db query in grid and should have a calendar and four radio buttons(department abbreviations) to filter the data. When the tab is clicked initially, the grid should have all the depts and current date's record. Then one should be able to filter the grid-data by the radio button and selected calendar date. It would be if onlick is used.

Any help appreciated. Thank you all.

    This topic has been closed for replies.

    1 reply

    BKBK
    Community Expert
    Community Expert
    November 18, 2009

    You have more than enough details there to set the form up yourself. We could then chip in to get you going. Good luck.

    emmim44Author
    Inspiring
    November 18, 2009

    I am stuck to go more than this... The "All" and calendar filter doesnt work...

    <cfscript>
    contactsQuery = createObject("component","contacts").getContactsShort();
    departmentsQuery = createObject("component","contacts").getDepartments();
    </cfscript>

    <cfform name="myForm" format="flash" height="300" width="600" 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="hbox" width="550">
       <!---cfselect name="departmentSelect" query="departmentsQuery" display="name" value="id" onchange="applyFilter(departmentSelect.selectedItem.data,contactList,['department'])" queryposition="below">
        <option value="">Department</option>
       </cfselect--->
      
       <!---cftree name="departmentTree" onchange="applyFilter(departmentTree.selectedNode.getProperty('data').value,contactList,['department'])">
        <cftreeitem display="Departments" value="">
        <cftreeitem display="name" query="departmentsQuery" value="id" parent="" queryasroot="false">
       </cftree--->
      
       <cfformgroup type="repeater" query="departmentsQuery">
        <cfinput type="radio" name="departmentOption" value="{departmentsQuery.currentItem.id}" label="{departmentsQuery.currentItem.name}" onclick="applyFilter(departmentOption.selectedData,contactList,['department'])"> <br>
       
       </cfformgroup>
      
       </cfformgroup>
      
    <cfformgroup type="horizontal">

    <cfcalendar name="myCalendar" label="Calendar" ></cfcalendar>
       <cfgrid name="contactList" query="contactsQuery" rowheaders="false">
        <cfgridcolumn name="name" header="Print">
        <cfgridcolumn name="age" header="Status"  >
        <cfgridcolumn name="gender" header="Start Time" >
        
       </cfgrid>
    </cfformgroup>

    </cfform>

    BKBK
    Community Expert
    Community Expert
    November 25, 2009

    Nothings jumps out at me. Well, except ['department'].

    Isn't that just the array that has one element, namely, 'department' ? I wonder whether it was your intention to use the array, department