How to draw a checkbox in <apex:column> headerValue attribute

Question

I have a controller class which has a list of Wrapper object like 'SchoolWrapper'. This school wrapper class has a instance of Object 'school' and one boolean variable.

Now i am using tag to iterate this wrapper list on VF page. I need to handle 2 thing over here -

1) i what that tag iterate only those wrapper object where boolean variable value is "True". If wrapper class boolean variable value is "False" then that wrapper object should not be inerated on VF page. where can i write this condition in tag?

2) I need to implement "Select All/None" functionality and for that i need to display a "CheckBox" in hearverValue attribite rather than text and need to bind the same with controller. how can i do that.

Thanks in advance

Answer 1

As @MattLacey said, use the apex:facet inside of an apex:column.

Once you do that, you can either write the implementation of the checkAll / uncheckAll to be strictly client side with JavaScript or you can use built-in Visualforce for everything.

Client Side (JavaScript)

You could use jQuery or just plain old JavaScript to implement a checkAll / uncheckAll that is strictly client side.

The checkbox in that case would not need to be an apex:inputCheckbox. You could just use a plain old HTML checkbox.

<apex:column >
    <apex:facet name="header">
        <input type="checkbox" id="checkAllBox" onclick="toggleCheckAll(this)"/>
    </apex:facet>
    <apex:inputCheckbox value="{!wrappedItem.checked}"/>
</apex:column>

And the JS:

var $j = jQuery.noConflict();
function toggleCheckAll(checkAllBox) {
    $j('.checkableTable :checkbox').prop('checked', checkAllBox.checked);
}

Server Side (Pure Visualforce / No JavaScript)

If you want a pure Visualforce solution where the checkbox is an apex:inputCheckbox that when checked/unchecked invokes an action in the controller to check all of the wrapped items and redisplay them then you'd want something like this:

<apex:column >
    <apex:facet name="header">
        <apex:inputCheckbox value="{!checkAllValue}" reRender="myWrappers">
            <apex:actionSupport event="onchange" rerender="theBlock" action="{!processCheckChange}"/>
        </apex:inputCheckbox>
    </apex:facet>
    <apex:inputCheckbox value="{!wrappedItem.checked}"/>
</apex:column>

You'll have to write the processCheckChange method to set the value of the wrappedItems checked.

In my opinion, the JavaScript solution is usually preferable, since you don't want your users to have to experience the lag of a round trip to the server to check / uncheck all boxes.

In answer to question number 1 about the conditional rendering

You could either filter the list directly in the controller to remove the unchecked items or you could use the rendered attribute of apex:column. For example:

<apex:column rendered="{!w.checked}">
    <input type="checkbox" />
</apex:column>
<apex:column value="{!w.school.Name}" rendered="{!w.checked }" />
<apex:column value="{!w.school.OtherField}" rendered="{!w.checked}"/>

If you have to do that it would be better to use the native Visualforce (no JavaScript solution).

Answer 2

You should be able to do this using an <apex:facet>:

<apex:column>
  <apex:facet name="header">
    <apex:inputCheckbox value="{!somefield}"/>
  </apex:facet>
</apex:column>

As for conditional rendering of rows, that's going to be a bit tricky if you're using a table like this. The easiest way might be to add another getter to the controller and use that to return just the list of objects that are true:

public List<Wrapper> GetSchools()
{
  List<Wrapper> ret = new List<Wrapper>();

  for(Wrapper obj : theMainList)
  {
    if(obj.theBoolean)
    {
      ret.Add(obj);
    }
  }

  return ret;
}

An alternative would be to replace the main list with a map of Boolean -> List<Wrapper> but that's probably getting a bit overcomplicated for this scenario. You could even do away with the wrapper altogether, use a map of Id -> Boolean to manage which records are displayed and use a StandardSetController to do the loading and management of the records - that way you get pagination for free as well!

Answer 3

<apex:column headervalue="" style="width:1%">
    <apex:facet name="header">
         <input type="checkbox" id="selectAllUnticked"/>
    </apex:facet>
 <apex:inputCheckbox value="{!btxnRec.check}" styleClass="unselectedCheckbox"/> 
</apex:column>

Javascript:

$(document).ready(function() {
$('#selectAllUnticked').click(function(event) {
if(this.checked) { 
    $('.unselectedCheckbox').each(function() { 
        this.checked = true;              
    });
}else{
    $('.unselectedCheckbox').each(function() { 
        this.checked = false;                    
    });        
}});  
});