Datatable don't rerender after a commandButton Ajax Call

UI Components for JSF
jaideralba
Posts: 51
Joined: 06 Sep 2010, 23:01
Location: São Paulo - Brazil

27 Jan 2011, 17:44

Glad to know that! :D

I guess the id of the datatable it's not only "lazyTableCar", cause the jsf fill the id of the component with its parents.

You may use the Firebug (component of Firefox), using the Element Inspector, to view the real id of this data table.
I guess it's :myForm:lazyTableCar.

Then you may remove the @form and put the id and "rerender" only the data table instead all the form.

Although, I generally use "@form" in my ajax components :lol:
Mojarra 2.0.2 (FCS b10)
GlassFish 3.0.1
PrimeFaces 2.2.1

cadutd
Posts: 12
Joined: 24 Jan 2011, 19:54
Location: Rio de Janeiro, Brazil

27 Jan 2011, 19:47

Hi people,

As i said here is the code:

datatableLazy.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">DataTable - Lazy Loading</h1>
        <div class="entry">
            <p>DataTable has built-in support to deal with huge datasets. In order to enable lazy loading, a LazyDataModel needs to be implemented
                to query the datasource when pagination, sorting, filtering or live scrolling happens.
                This example demonstrates how to display one hundred million(100000000) records efficiently.</p>

            <h:form id="formLazyTable">

                 <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="../design/ajaxloading.gif" />
                    </f:facet>

                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>

                <p:dataTable id="lazyTableCar" binding="#{tableBean.dataTable}"
                             var="car" value="#{tableBean.lazyModel}" paginator="true" rows="10" lazy="true"
                             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                             rowsPerPageTemplate="5,10,15"
                             selection="#{tableBean.selectedCar}" selectionMode="single"
                             onRowSelectComplete="carDialog.show()" onRowSelectUpdate="display">

                    <f:facet name="header">
                        Displaying #{tableBean.countLazyCars} Cars
                    </f:facet>

                    <p:column headerText="Model">
                        <h:outputText value="#{car.model}" />
                    </p:column>

                    <p:column headerText="Year">
                        <h:outputText value="#{car.year}" />
                    </p:column>

                    <p:column headerText="Manufacturer">
                        <h:outputText value="#{car.manufacturer}" />
                    </p:column>

                    <p:column headerText="Color">
                        <h:outputText value="#{car.color}" />
                    </p:column>

                    <p:column>                                                 
                        <p:commandButton value="Delete"  actionListener="#{tableBean.delete(car)}" update="@form" />
                        <p:commandButton value="Edit"  actionListener="#{tableBean.edit(car)}" update="@form" oncomplete="carEditDialog.show()"/>
                    </p:column>

                </p:dataTable>
                <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
                          width="200" showEffect="explode" hideEffect="explode">

                    <h:panelGrid id="display" columns="2" cellpadding="4">

                        <f:facet name="header">
                            <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                        </f:facet>

                        <h:outputText value="Model:" />
                        <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>

                        <h:outputText value="Year:" />
                        <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>

                        <h:outputText value="Manufacturer:" />
                        <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>

                        <h:outputText value="Color:" />
                        <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>
                    </h:panelGrid>
                </p:dialog>

                <p:dialog header="Car Detail" widgetVar="carEditDialog" resizable="false"
                          width="250" showEffect="explode" hideEffect="explode" rendered="#{tableBean.selectedCar != null}">

                    <h:panelGrid id="editForm" columns="2" cellpadding="4">

                        <f:facet name="header">
                            <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                        </f:facet>

                        <h:outputText value="Model:" />
                        <p:inputText value="#{tableBean.selectedCar.model}"/>
                        
                        <h:outputText value="Year:" />
                        <p:inputText value="#{tableBean.selectedCar.year}"/>

                        <h:outputText value="Manufacturer:" />
                        <p:inputText value="#{tableBean.selectedCar.manufacturer}"/>

                        <h:outputText value="Color:" />
                        <p:inputText value="#{tableBean.selectedCar.color}"/>

                        <p:commandButton value="Save"  actionListener="#{tableBean.save()}" update="@form" oncomplete="carEditDialog.hide()"/>
                    </h:panelGrid>
                </p:dialog>


            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="datatableLazy.xhtml">
                    <pre name="code" class="xml">
<h:form>

    <p:dataTable var="car" value="\#{tableBean.lazyModel}" paginator="true" rows="10" lazy="true"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                 rowsPerPageTemplate="5,10,15"
                 selection="\#{tableBean.selectedCar}" selectionMode="single"
                 onRowSelectComplete="carDialog.show()" onRowSelectUpdate="display">

        <f:facet name="header">
            Displaying 100,000,000 Cars
        </f:facet>

        <p:column headerText="Model">
            <h:outputText value="\#{car.model}" />
        </p:column>

        <p:column headerText="Year">
            <h:outputText value="\#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer">
            <h:outputText value="\#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color">
            <h:outputText value="\#{car.color}" />
        </p:column>
    </p:dataTable>

    <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
              width="200" showEffect="explode" hideEffect="explode">

        <h:panelGrid id="display" columns="2" cellpadding="4">

            <f:facet name="header">
                <p:graphicImage value="/images/cars/\#{tableBean.selectedCar.manufacturer}.jpg"/>
            </f:facet>

            <h:outputText value="Model:" />
            <h:outputText value="\#{tableBean.selectedCar.model}"/>

            <h:outputText value="Year:" />
            <h:outputText value="\#{tableBean.selectedCar.year}"/>

            <h:outputText value="Manufacturer:" />
            <h:outputText value="\#{tableBean.selectedCar.manufacturer}"/>

            <h:outputText value="Color:" />
            <h:outputText value="\#{tableBean.selectedCar.color}"/>
        </h:panelGrid>
    </p:dialog>

</h:form>
                    </pre>
                </p:tab>

                <p:tab title="TableBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletContext;

import org.primefaces.examples.domain.Car;
import org.primefaces.model.LazyDataModel;

public class TableBean {
	
	private LazyDataModel<Car> lazyModel;

    private Car selectedCar;

	public TableBean() {

        lazyModel = new LazyDataModel<Car>() {

			/**
			 * Dummy implementation of loading a certain segment of data.
			 * In a real application, this method should load data from a datasource
			 */
			@Override
			public List<Car> load(int first, int pageSize, String sortField, boolean sortOrder, Map<String,String> filters) {
				logger.log(Level.INFO, "Loading the lazy car data between {0} and {1}", new Object[]{first, (first+pageSize)});

                //Sorting and Filtering information are not used for demo purposes just random dummy data is returned

				List<Car> lazyCars = new ArrayList<Car>();
				populateLazyRandomCars(lazyCars, pageSize);

				return lazyCars;
			}
		};

        /**
         * In a real application, this number should be resolved by a projection query
         */
        lazyModel.setRowCount(100000000);

	}

    public Car getSelectedCar() {
		return selectedCar;
	}

	public void setSelectedCar(Car selectedCar) {
		this.selectedCar = selectedCar;
	}
	
	public LazyDataModel<Car> getLazyModel() {
		return lazyModel;
	}

	private void populateLazyRandomCars(List<Car> list, int size) {
		for(int i = 0 ; i < size ; i++) {
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
		}
	}

	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}

	private String getRandomManufacturer() {
		return manufacturers[(int) (Math.random() * 10)];
	}

	private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}
}
                    </pre>
                </p:tab>
            </p:tabView>




        </div>


    </ui:define>
</ui:composition>

TableBean

Code: Select all

/*
 * Copyright 2009 Prime Technology.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package org.primefaces.examples.view;

import java.io.File;
import java.io.IOException;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;
import java.util.logging.Level;
import java.util.logging.Logger;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.servlet.ServletContext;

import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.hssf.util.HSSFColor;
import org.primefaces.examples.domain.Car;
import org.primefaces.model.Cell;
import org.primefaces.model.LazyDataModel;

import com.lowagie.text.BadElementException;
import com.lowagie.text.Document;
import com.lowagie.text.DocumentException;
import com.lowagie.text.Image;
import com.lowagie.text.PageSize;
import com.lowagie.text.Rectangle;
import java.util.Map;
import javax.faces.model.SelectItem;
import org.primefaces.component.datatable.DataTable;
import org.primefaces.event.DragDropEvent;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
import org.primefaces.examples.domain.ManufacturerSale;

public class TableBean implements Serializable {
	
	private final static Logger logger = Logger.getLogger(TableBean.class.getName());
	
	private final static String[] colors;
	
	private final static String[] manufacturers;
	
	private String theme;

	static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";
		
		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

	private List<Car> cars;
	
	private List<Car> carsSmall;

    private List<Car> carsLarge;
	
	private Date date = new Date();
	
	private Car selectedCar;

	private Car[] selectedCars;
	
	private Cell selectedCell;
	
	private Cell[] selectedCells;

	private LazyDataModel<Car> lazyModel;

    private List<ManufacturerSale> sales;

    private List<String> columns;

    private List<Car[]> dynamicCars;

    private String columnName;

    private SelectItem[] manufacturerOptions;

    private List<Car> droppedCars;

    private List<Car> lazyCars;

    private int countLazyCars;

    private DataTable dataTable;

	public TableBean() {
		cars = new ArrayList<Car>();
		carsSmall = new ArrayList<Car>();
        carsLarge = new ArrayList<Car>();
        droppedCars = new ArrayList<Car>();
		
		populateRandomCars(cars, 50);
		populateRandomCars(carsSmall, 9);
        populateRandomCars(carsLarge, 200);
        populateRandomSales();

        createDynamicColumns();
        populateDynamicCars();
        manufacturerOptions = createFilterOptions(manufacturers);
        	
		lazyModel = new LazyDataModel<Car>() {

			/**
			 * Dummy implementation of loading a certain segment of data.
			 * In a real application, this method should load data from a datasource
			 */
			@Override
			public List<Car> load(int first, int pageSize, String sortField, boolean sortOrder, Map<String,String> filters) {
				logger.log(Level.INFO, "Loading the lazy car data between {0} and {1}", new Object[]{first, (first+pageSize)});

                //Sorting and Filtering information are not used for demo purposes just random dummy data is returned
															
				return loadLazyCars(first, pageSize);
			}
		};

        /**
         * In a real application, this number should be resolved by a projection query
         */

        lazyModel.setRowCount(100);
        countLazyCars=100;
        lazyCars = new ArrayList<Car>();
	populateLazyRandomCars(lazyCars, 100);

	}

        public List<Car> loadLazyCars(int first, int pageSize){
            List<Car> result = new ArrayList<Car>();

            for (int i = first; i < (first + pageSize); i++) {
                result.add(lazyCars.get(i));
            }

            return result;
        }

      public void delete(Car car) {
         lazyCars.remove(car);
         countLazyCars = lazyCars.size();
         lazyModel.setRowCount(countLazyCars);
         refreshTable();
     }

     public void edit(Car car) {
         selectedCar = car;                  
     }


     public void saveCar() {
         // here you can merge the car in your database
         
         refreshTable();
     }

     
    public void refreshTable() {       
        dataTable.loadLazyData();
    }

    public int getCountLazyCars() {
        return countLazyCars;
    }

    public void setCountLazyCars(int countLazyCars) {
        this.countLazyCars = countLazyCars;
    }

    public DataTable getDataTable() {
        return dataTable;
    }

    public void setDataTable(DataTable dataTable) {
        this.dataTable = dataTable;
    }



	public LazyDataModel<Car> getLazyModel() {
		return lazyModel;
	}
	
	public Car[] getSelectedCars() {
		return selectedCars;
	}
	public void setSelectedCars(Car[] selectedCars) {
		this.selectedCars = selectedCars;
	}
	
	public Car getSelectedCar() {
		return selectedCar;
	}

	public void setSelectedCar(Car selectedCar) {
		this.selectedCar = selectedCar;
	}

	public Date getDate() {
		return date;
	}
	public void setDate(Date date) {
		this.date = date;
	}

	private void populateRandomCars(List<Car> list, int size) {
		for(int i = 0 ; i < size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}
	
	private void populateLazyRandomCars(List<Car> list, int size) {
		for(int i = 0 ; i < size ; i++) {
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
		}
	}

	public List<Car> getCars() {
		return cars;
	}
	
	public List<Car> getCarsSmall() {
		return carsSmall;
	}

    public List<Car> getCarsLarge() {
		return carsLarge;
	}

	private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}
	
	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}
	
	private String getRandomManufacturer() {
		return manufacturers[(int) (Math.random() * 10)];
	}

    private int getRandomSale() {
		return (int) (Math.random() * 100000);
	}

    private int getRandomProfit() {
		return (int) (Math.random() * 100);
	}
	
	private String getRandomModel() {
		return UUID.randomUUID().toString().substring(0, 8);
	}
	
	public Cell getSelectedCell() {
		return selectedCell;
	}

	public void setSelectedCell(Cell selectedCell) {
		this.selectedCell = selectedCell;
	}

	public Cell[] getSelectedCells() {
		return selectedCells;
	}

	public void setSelectedCells(Cell[] selectedCells) {
		this.selectedCells = selectedCells;
	}
	
	public void postProcessXLS(Object document) {
		HSSFWorkbook wb = (HSSFWorkbook) document;
		HSSFSheet sheet = wb.getSheetAt(0);
		HSSFRow header = sheet.getRow(0);
		
		HSSFCellStyle cellStyle = wb.createCellStyle();  
		cellStyle.setFillForegroundColor(HSSFColor.GREEN.index);
		cellStyle.setFillPattern(HSSFCellStyle.SOLID_FOREGROUND);
		
		for(int i=0; i < header.getPhysicalNumberOfCells();i++) {
			HSSFCell cell = header.getCell(i);
			
			cell.setCellStyle(cellStyle);
		}
	}
	
	public void preProcessPDF(Object document) throws IOException, BadElementException, DocumentException {
		Document pdf = (Document) document;
        pdf.open();
        pdf.setPageSize(PageSize.A4);

		ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();
		String logo = servletContext.getRealPath("") + File.separator + "images" + File.separator + "prime_logo.png";
		
		pdf.add(Image.getInstance(logo));
	}
	
	public void displaySelectedCells(ActionEvent actionEvent) {
		System.out.println(selectedCell.getColumnId());
		Car car = (Car) selectedCell.getRowData();
		System.out.println(car.getModel());
	}
	
	public String getTheme() {
		return theme;
	}

	public void setTheme(String theme) {
		this.theme = theme;
	}
	
	public void save() {
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Info", "Changes Saved"));
	}

    public void onRowSelect(SelectEvent event) {
        FacesMessage msg = new FacesMessage("Car Selected", ((Car) event.getObject()).getModel());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void onRowUnselect(UnselectEvent event) {
        FacesMessage msg = new FacesMessage("Car Unselected", ((Car) event.getObject()).getModel());

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public String onRowSelectNavigate(SelectEvent event) {
        FacesContext.getCurrentInstance().getExternalContext().getFlash().put("selectedCar", event.getObject());

        return "carDetail?faces-redirect=true";
    }

    public List<ManufacturerSale> getSales() {
        return sales;
    }

    private void populateRandomSales() {
        sales = new ArrayList<ManufacturerSale>();

        for(int i = 0; i < 10; i++) {
            sales.add(new ManufacturerSale(manufacturers[i], getRandomSale(), getRandomSale(), getRandomProfit(), getRandomProfit()));
        }
    }

    public int getLastYearTotal() {
        int total = 0;

        for(ManufacturerSale sale : getSales()) {
            total += sale.getLastYearSale();
        }

        return total;
    }

    public int getThisYearTotal() {
        int total = 0;

        for(ManufacturerSale sale : getSales()) {
            total += sale.getThisYearSale();
        }

        return total;
    }

    private void populateDynamicCars() {
        dynamicCars = new ArrayList<Car[]>();

        for(int i=0; i < 9; i++) {
            Car[] cars = new Car[columns.size()];
            
            for(int j=0; j < columns.size(); j++) {
                cars[j] = new Car(getRandomModel(), getRandomYear(), columns.get(j), getRandomColor());
            }

            dynamicCars.add(cars);
        }
    }

    private void createDynamicColumns() {
        columns = new ArrayList<String>();
        for(int i=0; i < 3; i++) {
            columns.add(manufacturers[i]);
        }
    }

    public List<String> getColumns() {
        return columns;
    }

    public List<Car[]> getDynamicCars() {
        return dynamicCars;
    }

    public String getColumnName() {
        return columnName;
    }

    public void setColumnName(String columnName) {
        this.columnName = columnName;
    }

    public void addColumn() {
        columns.add(columnName);
        columnName = null;

        populateDynamicCars();
    }

    public void removeColumn() {
        String columnToRemove = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("columnToRemove");

        columns.remove(columnToRemove);

        populateDynamicCars();
    }

    public String[] getManufacturers() {
        return manufacturers;
    }

    public String[] getColors() {
        return colors;
    }

    public List<String> getAvailableManufacturers() {
        List<String> availableManufacturers = new ArrayList<String>();

        for(String manufacturer : manufacturers) {
            if(!columns.contains(manufacturer))
                availableManufacturers.add(manufacturer);
        }

        return availableManufacturers;
    }

    private SelectItem[] createFilterOptions(String[] data)  {
        SelectItem[] options = new SelectItem[data.length + 1];

        options[0] = new SelectItem("", "Select");
        for(int i = 0; i < data.length; i++) {
            options[i + 1] = new SelectItem(data[i], data[i]);
        }

        return options;
    }

    public SelectItem[] getManufacturerOptions() {
        return manufacturerOptions;
    }

    public void onCarDrop(DragDropEvent ddEvent) {
        Car car = ((Car) ddEvent.getData());

        droppedCars.add(car);
        carsSmall.remove(car);
    }

    public List<Car> getDroppedCars() {
        return droppedCars;
    }
}

I included a edit button to edit the car in a dialog.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 14 guests