5 Replies Latest reply on Jan 21, 2010 5:22 AM by Ilya Shaikovsky

    rerender scrollableDataTable after insert a new row

    Cencil Chow Newbie

      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!

        • 1. Re: rerender scrollableDataTable after insert a new row
          Nick Belaevski Master

          Hi,

           

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

          • 2. Re: rerender scrollableDataTable after insert a new row
            Cencil Chow Newbie

            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!!!

            • 3. Re: rerender scrollableDataTable after insert a new row
              Ilya Shaikovsky Master

              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.

              • 4. Re: rerender scrollableDataTable after insert a new row
                Cencil Chow Newbie

                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

                • 5. Re: rerender scrollableDataTable after insert a new row
                  Ilya Shaikovsky Master
                  we'll try to check this locally, but could you also check the same under latest 3.3.3 Beta1 or SNAPSHOT even better?