1

I would like to filter the column "Status" of my table by selecting a value in a pick list which is integrated in the column header:

Markup

<table class="list" border="0" cellpadding="0" cellspacing="0" id="maintable">
    <thead class="rich-table-thead">
        <tr class="headerRow">
            <th class="headerRow">Dev Request Name</th>
            <th class="headerRow">Status &nbsp;&nbsp;                               
                <apex:selectList id="searchStatus" value="{!selectedStatus}" size="1" onchange="getlistDevRequests">
                    <apex:selectOptions value="{!Status}" />
                </apex:selectList></th>
            <th class="headerRow">Start Date</th>
            <th class="headerRow">Due Date QA</th>
            <th class="headerRow">Estimated Hours</th>
            <th class="headerRow">Assignee</th>
            <th class="headerRow">Overview</th>         
        </tr>
    </thead>
    <apex:repeat value="{!lstDevRequests}"  var="item">
        <tbody>
            <tr class="dataRow">
                <td bgcolor="#faffff" height="50">{!item.Name}</td>
                <td bgcolor="#faffff" height="50"><span class="status" >{!item.Status__c}</span></td>
                <td bgcolor="#faffff" height="50"><apex:outputText value="{0,date,MM/dd/yyyy}"> <apex:param value="{!item.Start_Date__c}" /> </apex:outputText></td>
                <td bgcolor="#faffff" height="50"><apex:outputText value="{0,date,MM/dd/yyyy}"> <apex:param value="{!item.Due_Date_QA__c}" /> </apex:outputText></td>
                <td bgcolor="#faffff" height="50">{!item.Estimated_Hours__c}</td>
                <td bgcolor="#faffff" height="50">{!item.Assignee__r.Name}</td>
                <td bgcolor="#faffff" height="50">{!item.Overview__c}</td>
            </tr>
        </tbody>
    </apex:repeat>
</table>

Controller

public with sharing class tableDevRequests {

    List<Dev_Request__c> lstDevRequests;
    public String selectedStatus{get;set;}


    public tableDevRequests() {

    }


    public List<SelectOption> getStatus() {
        List<SelectOption> statOptions= new List<SelectOption>();
        statOptions.add( new SelectOption('','--All Status--'));
        for( Dev_Request__c dev : [select Id,Status__c from Dev_Request__c ] ) {
            statOptions.add( new SelectOption(dev.Id,dev.Status__c)); /*SelectOption list takes two parameters one is value and other one is label .In this case account name as a label and Id is the value .*/
        }
        return statOptions;
    }



    public List<Dev_Request__c> getlstDevRequests() {
        if(lstDevRequests == null)
            lstDevRequests = [Select Id, Name, Assignee__c, Assignee__r.Name, Start_Date__c, Due_Date_QA__c, Estimated_Hours__c, Estimated_Completion_Date__c, Status__c, Overview__c, Parent_Dev_Request__c, (SELECT Id, WhatId, ActivityDAte, Owner.Name, Description, Status, Subject from Tasks) from Dev_Request__c];
        return lstDevRequests;
    }
}

How would I modify my code?

  • your code is incomplete, please complete your code and post specific issue over SFSE and here nothing is 'Urgent' – Santanu Boral Jan 23 '17 at 2:29
2

You can use <apex:actionSupport/> wrapped into <apex:selectList/> and pass the selected value to the controller method.

Visualforce

<apex:selectList id="searchStatus" value="{!selectedStatus}" size="1">
      <apex:selectOptions value="{!Status}" id="field"/>
      <apex:actionSupport event="onclick" reRender="tableData" action="{!getlstDevRequests}"/>
</apex:selectList>

Create an <apex:outputPanel/> where data table will be displayed and will be reRendered from actionSupport.

<apex:outputPanel id= "tableData">
    <apex:repeat value="{!lstDevRequests}"  var="item">
       <!-- rows to display-->
   </apex:repeat>
<apex:outputPanel/>

Apex Class

In the getlstDevRequests you will receive the selectedStatus value and perform the query based on that.

public PageReference  getlstDevRequests() 
{
    if(selectedStatus =='') 
    {       
        lstDevRequests = [Select Id, Name, Assignee__c, Assignee__r.Name, Start_Date__c, 
        Due_Date_QA__c, Estimated_Hours__c, Estimated_Completion_Date__c, Status__c, 
        Overview__c, Parent_Dev_Request__c, 
        (SELECT Id, WhatId, ActivityDAte, Owner.Name, Description, Status, Subject from Tasks) 
        from Dev_Request__c];
    }
    else
    {       
        lstDevRequests = [Select Id, Name, Assignee__c, Assignee__r.Name, Start_Date__c, 
        Due_Date_QA__c, Estimated_Hours__c, Estimated_Completion_Date__c, Status__c, 
        Overview__c, Parent_Dev_Request__c, 
        (SELECT Id, WhatId, ActivityDAte, Owner.Name, Description, Status, Subject from Tasks) 
        from Dev_Request__c
        WHERE Status__c =:fieldValue];
    }        
    return null;
}
  • Note: I haven't compiled the code, I have tried to give you logic to render data based on selection – Santanu Boral Jan 23 '17 at 3:18
  • Thank you very much, I tried your code, I did substitute fieldValue with selectedStatus. However, now I get this error: Return type of an Apex action method must be a PageReference. Found: visualforce.el.VisualforceArrayList – user40501 Jan 23 '17 at 6:44
  • Just change return type to pagereference, and return null from the method – Santanu Boral Jan 23 '17 at 6:53
  • Now my list on the page displays nothing ( – user40501 Jan 23 '17 at 6:57
  • Dear Santana, thank you very much so far for your appreciated help. However, when I look into it, it seems the table body does not get rendered properly. It just shows me the table header. Thus, when I select a status, it does not do anything. I try to play around a bit, but if you have any further idea, that would be great. Maybe it helps if I put my new code here, as it has changed a bit since last time, and it is a bit more complex than just the code above? – user40501 Jan 24 '17 at 7:00
1

If temporarily hiding the rows is fine with you then I will try like;


<table class="list" border="0" cellpadding="0" cellspacing="0" id="maintable">
    <thead class="rich-table-thead">
        <tr class="headerRow">
            <th class="headerRow">Dev Request Name</th>
            <th class="headerRow">Status                                  
                <apex:selectList id="searchStatus" value="{!selectedStatus}" size="1" onchange="getlistDevRequests">
                    <apex:selectOptions value="{!Status}" />
                </apex:selectList></th>
            <th class="headerRow">Start Date</th>
            <th class="headerRow">Due Date QA</th>
            <th class="headerRow">Estimated Hours</th>
            <th class="headerRow">Assignee</th>
            <th class="headerRow">Overview</th>         
        </tr>
    </thead>
    <apex:repeat value="{!lstDevRequests}"  var="item">
        <tbody>
            <tr class="dataRow">
                <td bgcolor="#faffff" height="50">{!item.Name}</td>
                <td class="statusCol" bgcolor="#faffff" height="50">{!item.Status__c}</td>
                <td bgcolor="#faffff" height="50"><apex:outputText value="{0,date,MM/dd/yyyy}"> <apex:param value="{!item.Start_Date__c}" /> </apex:outputText></td>
                <td bgcolor="#faffff" height="50"><apex:outputText value="{0,date,MM/dd/yyyy}"> <apex:param value="{!item.Due_Date_QA__c}" /> </apex:outputText></td>
                <td bgcolor="#faffff" height="50">{!item.Estimated_Hours__c}</td>
                <td bgcolor="#faffff" height="50">{!item.Assignee__r.Name}</td>
                <td bgcolor="#faffff" height="50">{!item.Overview__c}</td>
            </tr>
        </tbody>
    </apex:repeat>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
 function getlistDevRequests()
 {
    var selectedStatus = $('[id$="searchStatus"]').value;
    if(selectedStatus != -1)
        $('.statusCol').each(function(){
            if($(this).value() !=  selectedStatus)
                $(this).closest(".dataRow").attr('style','display:none;');
        })
    else
        $('.dataRow').attr('style','display:');
 }
</script>

I have added jQuery script, a javascript method and removed span from status__c column.

And please add

statOptions.add( new SelectOption('-1','--All Status--'));
in apex class.

Note: I have not checked it in my org for compilation errors. Please verify in your org.

  • Thank you very much. Unfortunately, that does not function. What could be wrong here? Also, I already have JavaScript included in my code. How would I avoid conflicts? function switchMenu(obj,obj1,obj2) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } ... – user40501 Jan 24 '17 at 1:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.