PrimeFaces 5 ColumnToggler Example

By Arvind Rai, February 02, 2015
This page will provide PrimeFaces 5 ColumnToggler example. ColumnToggler component is used with dataTable. The use of ColumnToggler is selecting and deselecting columns to display and hide. The attributes of ColumnToggler are datasource and trigger. datasource refers to dataTable id and trigger refers the id of the component where it will be displayed. Find the code snippet.
<p:dataTable id="studentDetail">
    <f:facet name="header">
        <p:commandButton id="toggler" />
        <p:columnToggler datasource="studentDetail" trigger="toggler" />
    </f:facet>
</p:dataTable> 
columnToggler component is used with dataTable . Within the dataTable, create a commandButton and columnToggler component. The attributes of columnToggler component are

datasource : Assign the dataTable id to this columnToggler attribute.
trigger : Assign the commandButton id to this attribute.

Complete Example for ColumnToggler

Now find the complete example of ColumnToggler component. We are creating a datatable for student with some columns.

Create View for ColumnToggler

Find the XHTML for the demo.
students.xhtml
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title> PrimeFaces 5 ColumnToggler Example </title>
    </h:head>
    <h:body>
     <h3> PrimeFaces 5 ColumnToggler Example </h3>
     <h:form>
      <p:dataTable value="#{columnTogglerView.studentList}" var="student" id="studentDetail">
        <f:facet name="header">
	  <p:commandButton id="toggler" type="button" value="Add Delete Student Columns" style="float:center" icon="ui-icon-circle-arrow-s" />
	  <p:columnToggler datasource="studentDetail" trigger="toggler" />
        </f:facet>			 
	<p:column headerText="Id">
           <h:outputText value="#{student.id}" />
	</p:column>
	<p:column headerText="Name">
	   <h:outputText value="#{student.name}" />
	</p:column>
	<p:column headerText="Location">
	   <h:outputText value="#{student.location}" />
	</p:column>
	<p:column headerText="Age">
	   <h:outputText value="#{student.age}" />
	</p:column>			    			    
      </p:dataTable>
     </h:form>
    </h:body>
</html>	 

Managed Bean

Find the managed bean for the example.
ColumnTogglerView.java
package com.concretepage;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
@ManagedBean(name = "columnTogglerView")
@ViewScoped
public class ColumnTogglerView implements Serializable {
	private static final long serialVersionUID = 1L;
	private  List<Student> studentList = new ArrayList<Student>();
        @PostConstruct
        public void init() {
            studentList.add(new Student(111, "Ram", "Ayodhya", 22));
            studentList.add(new Student(222, "Mahesh", "Varanasi", 24));
            studentList.add(new Student(333, "Krishna", "Mathura", 23));
        }
	public List<Student> getStudentList() {
	   return studentList;
	}
	static public class Student implements Serializable {
        private Integer id;
        private String name;
        private String location;
        private Integer age;
        public Student(Integer id,String name, String location, Integer age) {
            this.id = id;
            this.name = name;
            this.location = location;
            this.age = age;
        }
	public Integer getId() {
	    return id;
	}
	public String getName() {
	    return name;
	}
	public String getLocation() {
	    return location;
	}
	public Integer getAge() {
	    return age;
	}
    }
} 

Output

To test the application download source code and deploy the war file into tomcat and access the URL http://localhost:8080/primefaces5-1/students.xhtml
Click on the button as "Add Delete Student Columns" and select or deselect columns to display.
PrimeFaces 5 ColumnToggler Example

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us