0 Replies Latest reply on Nov 18, 2009 12:17 PM by emmim44

    cfform - Filter by calendar and radio buttons

    emmim44 Level 1

      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.


      contactsQuery = createObject("component","contacts").getContactsShort();
      departmentsQuery = createObject("component","contacts").getDepartments();

      <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][i];
           var added:Boolean = false;
           for(var j = 0; j< columns.length; j++){
             var value:String = item[columns[j]].toString().toLowerCase();
             if(value.indexOf(filterTerm) != -1) {
              added = true;
            else {
         grid.dataProvider = filteredData;
         else {
          if(_global.unfilteredData[grid.id] != undefined) grid.dataProvider = _global.unfilteredData[grid.id];
         <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>
         <!---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">
         <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 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" >



      Any help appreciated. Thank you all.