rerender scrollableDataTable after insert a new row

[cencil]

Hi, I have a problem that I have a master detail page, master is scrollableDataTable and detail is a form, after create a new row, I save it and add back to the datatable value bind collection, but seems the scrollableDataTable does not refresh the newly created row after rerender the scrollableDataTable. Anyone have idea???

Thanks!

[nbelaevski]

Hi,

Please check this: http://community.jboss.org/wiki/CommonAjaxRequestsProblems . If it doesn't help, please post page/beans code.

[cencil]

Thanks for your information but however, it doesn't solve my problem. To make things clear, I post my post here:

Any my problem is, after click the 'Add' button, it should create a new item and add to MB collection, which blind to scrollableDataTable value, however, even I rerender the column output text, the scrollableDataTable does not reflect the newly created row.

P.S. I did try to rerender the SDT, but still not work, but if not for addition, e.g. I change the item name property value and use the same method to rerender the column output text, it works!!  so I guess it can rerender the change but not for newly creation item...

JSF backing bean

package com.bofa.kylin.webui.backing.svs;

import java.util.ArrayList;
import java.util.Collections;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Set;

import org.richfaces.component.UIScrollableDataTable;
import org.richfaces.model.SortField;
import org.richfaces.model.SortOrder;
import org.richfaces.model.selection.SimpleSelection;

public class TestMB {
    private List<TestBean> items;
    private UIScrollableDataTable testSdt;
    private Set<Integer> shSdtAjaxKeys;
    private SimpleSelection selection;
    private SortOrder sortOrder;
   
    /**
     * Constructor
     */
    public TestMB() {
        items = new ArrayList<TestBean>();
        items.add(new TestBean("Item 1"));
        items.add(new TestBean("Item 2"));
        items.add(new TestBean("Item 3"));
        items.add(new TestBean("Item 4"));
        items.add(new TestBean("Item 5"));

        shSdtAjaxKeys = new HashSet<Integer>();
       
        // default sort order
        sortOrder = new SortOrder();
        SortField[] sortField = {new SortField("name", true)};
        sortOrder.setFields(sortField);
    }

    /**
     * Scrollable data table current selection getter.
     * @return SimpleSelection
     */
    public SimpleSelection getSelection() {
        return selection;
    }

    /**
     * Scrollable data table current selection setter.
     * @param selection SimpleSelection
     */
    public void setSelection(SimpleSelection selection) {
        this.selection = selection;
    }

    /**
     * Change current selection
     */
    public void takeSelection() {
        Iterator<Object> i = getSelection().getKeys();
        while (i.hasNext()) {
            Object key = i.next();
            testSdt.setRowKey(key);
            if (testSdt.isRowAvailable()) {
                return;
            }
        }
        return;
    }
   
    public void add() {
        TestBean tb = new TestBean("Item 1.5");
        items.add(tb);
   
        shSdtAjaxKeys = Collections.singleton(items.indexOf(tb));
    }

    public List<TestBean> getItems() {
        return items;
    }

    public void setItems(List<TestBean> items) {
        this.items = items;
    }

    public UIScrollableDataTable getTestSdt() {
        return testSdt;
    }

    public void setTestSdt(UIScrollableDataTable testSdt) {
        this.testSdt = testSdt;
    }

    public Set<Integer> getShSdtAjaxKeys() {
        return shSdtAjaxKeys;
    }

    public void setShSdtAjaxKeys(Set<Integer> shSdtAjaxKeys) {
        this.shSdtAjaxKeys = shSdtAjaxKeys;
    }

    public SortOrder getSortOrder() {
        return sortOrder;
    }

    public void setSortOrder(SortOrder sortOrder) {
        this.sortOrder = sortOrder;
    }
}

xhtml

...

                <h:form id="testForm">
                    <rich:scrollableDataTable id="testSdt" rowKeyVar="rkv" ajaxKeys="#{test_backing.shSdtAjaxKeys}"
                        value="#{test_backing.items}"
                        binding="#{test_backing.testSdt}"
                        var="item"
                        selection="#{test_backing.selection}"
                        first="0"
                        rows="0"
                        sortMode="single"
                        sortOrder="#{test_backing.sortOrder}"
                        width="250px" height="155px">

                        <rich:column id="name" width="228px">
                            <f:facet name="header">
                                <h:outputText value="Name" />
                            </f:facet>
                            <h:outputText id="testColOutput" value="#{item.name}"/>
                        </rich:column>
                    </rich:scrollableDataTable>
                    <a4j:commandButton id="testBtn" value="Add"
                            action="#{test_backing.add}" reRender="testColOutput"/>
                </h:form>
                <a4j:keepAlive beanName="test_backing"/>

...

and here is the POJO

package com.bofa.kylin.webui.backing.svs;

public class TestBean {
    private String name;
   
    public TestBean(String name) {
        setName(name);
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

Thanks!!!

[ilya_shaikovsky]

1) remove ajaxKeys functionality and reRender all the table. You can't insert new row by updating just single cell. in your case one of existent rows updated.

2) remove binding if the bean in session scope or move out to some request scoped bean if you really need it.

[cencil]

Hi, thanks for your information, I follow your instruction and change it accordingly and it works fine, except a little 'flicking' of the table header. However, after rerender the data table, it result Javascript error when resize the browser window... I am using IE 7, and RichFaces 3.3.2. Althought it seems to be working fine without any issue, but it will be good if we can eliminate the JS error.

Here is my revised code.

                <h:form id="testForm">
                    <rich:scrollableDataTable id="testSdt" rowKeyVar="rkv"
                        value="#{test_backing.items}"
                        var="item"
                        first="0"
                        rows="0"
                        sortMode="single"
                        width="250px" height="155px">

                        <rich:column id="name" width="228px">
                            <f:facet name="header">
                                <h:outputText value="Name" />
                            </f:facet>
                            <h:outputText id="testColOutput" value="#{item.name}"/>
                        </rich:column>
                    </rich:scrollableDataTable>
                    <a4j:commandButton id="testBtn" value="Add"
                            action="#{test_backing.add}" reRender="testSdt"/>
                </h:form>

JS error:

Line: 63

Char: 23

Error: Not implemented

Code: 0

URL: http://localhost:8080/svs/shmaint/detail?custo=123456&shid=232&conversationContext=1

Thanks!!

Cencil

[ilya_shaikovsky]

we'll try to check this locally, but could you also check the same under latest 3.3.3 Beta1 or SNAPSHOT even better?