Problem when using 2 DataTables with the same Options object in the same page

[haritos30]

Hello all,

I'm using wicket-jquery 7 and I'm trying to do something that seems very simple: Use 2 datatables in the same page. In my case dataTable & dataTable2 have different data however as you can see it's the same table in the page. Even if I use a different data models the result is the same: the last datatable being added is the ONLY one that is being rendered for all cases. This is the same if you use 3,4 or more datatables. It is always the last one that is shown for all datatable instances. In my example I also use an accordion but this not related to the problem. Even if I don't use an accordion and simply try to display two tables in the same page the result is the same. I'm attaching the java and HTML code but it's rather basic, nothing fancy.

Please help me with this problem because it is driving me nuts. I'm trying to find a solution for 3 days now.

Thank you in advance! Haritos

import java.util.ArrayList;
import java.util.List;

import org.apache.wicket.PageReference;
import org.apache.wicket.extensions.markup.html.tabs.ITab;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.repeater.data.ListDataProvider;
import org.apache.wicket.util.lang.Generics;

import com.googlecode.wicket.jquery.core.Options;
import com.googlecode.wicket.kendo.ui.datatable.DataTable;
import com.googlecode.wicket.kendo.ui.datatable.column.IColumn;
import com.googlecode.wicket.kendo.ui.datatable.column.PropertyColumn;
import com.googlecode.wicket.kendo.ui.widget.accordion.AccordionPanel;

import web.pages.abstracts.AbstractPage;
import web.pages.afa.amendmentRequests.helpers.Entry;
import web.pages.afa.amendmentRequests.helpers.wicket.TableTab;
import web.pages.common.panels.MessagePanel;
import web.wicket.kendo.ui.component.CustomPropertyColumn;

public class RequestComparePage extends AbstractPage {

    private static final long serialVersionUID = 1L;
            
    private final Form<?> form = new Form<Void>("form");
    private final Options options = new Options();
    private final AccordionPanel accordion;
    private final RequestComparePageMenu menu;
    
    private List<ITab> tabs = Generics.newArrayList();
    
    public RequestComparePage(PageReference historyPage) {
        super("compare.request");
        menu = new RequestComparePageMenu("PageActionMenu", historyPage);
        add(form);
        add(new MessagePanel());
        addFeedbackPanel();
        add(menu);
        options.set("scrollable", false);
        options.set("selectable", false);
        options.set("resizable", false);
        
        DataTable<Entry> table = new DataTable<>("DataTable", getColumns(), getData(), 25, options);
        DataTable<Entry> table2 = new DataTable<>("DataTable2", getColumns(), getData2(), 25, options);
        // table.setMarkupId("DataTable1");
        // table2.setMarkupId("DataTable2");
        tabs.add(new TableTab("ADM - Mister ADM", table));
        tabs.add(new TableTab("Goods Nice Classification", table2));
        accordion = new AccordionPanel("accordion", tabs); 
        form.add(accordion);
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        super.renderHead(response);
    }
     
    private ListDataProvider<Entry> getData() {
        List<Entry> list = new ArrayList<>();
        list.add(new Entry("IPR Type", "selected value 1", "latest value 1"));
        list.add(new Entry("Registration Number", "selected value 2", "latest value 2", Entry.Status.NEW));
        list.add(new Entry("Filing Date", "selected value 3", "latest value 3", Entry.Status.DELETED));
        list.add(new Entry("Expiry Date", "selected value 4", "latest value 4", Entry.Status.MODIFIED));
        list.add(new Entry("Trademark Name", "selected value 5", "latest value 5"));
        return new ListDataProvider<Entry>(list);

    }
    
    private ListDataProvider<Entry> getData2() {
        List<Entry> list = new ArrayList<>();
        list.add(new Entry("Nice Class", "22", "1", Entry.Status.NEW));
        list.add(new Entry("Registration Number", "100114", "100114", Entry.Status.MODIFIED));
        list.add(new Entry("Description", "This is a description", "This is another description", Entry.Status.DELETED));
        return new ListDataProvider<Entry>(list);
    }
    
    @SuppressWarnings("serial")
    private List<IColumn> getColumns() {
        List<IColumn> columns = new ArrayList<>();
        columns.add(new PropertyColumn(" ", "valueName") {
            @Override
            public String getAttributes() {
                 return "{ class: \"names\"}";
            }
        });
        columns.add(new PropertyColumn("Selected Afa Amendment Request Value", "selectedValue"));
        columns.add(new PropertyColumn("Latest Afa Amendment Request Value", "latestValue"));
        columns.add(new CustomPropertyColumn("status", false));
        return columns;
    }
 }

HTML:

<html xmlns:wicket>
<wicket:head>
	<style type="text/css">
		.k-grid {                      
		    border: 1px solid #CCCCCC; 
		}                              
               .names {
        	     background-color: #E6E6E6;
        	     font-weight: bold;
        	     border: 1px solid #CCCCCC !important; 
             }
             .k-link {
        	   font-weight: bold;
             }                                                   
	</style>
</wicket:head>
<wicket:extend>
	<div class="pagemenu" wicket:id="PageActionMenu" />
	<div wicket:id="feedbackPanel" />
	<div wicket:id="MessagePanel" />
	<div id="content">
		<div wicket:id="subtitlePanel" />
		<form wicket:id="form">
			<div wicket:id="accordion" style="width: 75%">[accordion]</div>
		</form>
	</div>
</wicket:extend>
</html>

[sebfz1]

I'll try to have a look tomorrow (somehow it rings a bell...)

[haritos30]

Thank you!

[sebfz1]

I tested against wicket-kendo-ui-7.15.0 and wicket-kendo-ui-8.10.0 and it works as expected (see image bellow).

When I mentioned that it rings a bell, I know remember that it used to be an issue where only one DataProvider could exist in a rendered page (so the last one IIRC). I do then suppose that you are using an older version.

Please upgrade and the problem should be gone. If it is not the case, please create a quickstart that repro the issue in your GitHub account... I'm closing the issue, please reopen if needed.

[haritos30]

Sorry but I can't find version 7.15.0. The latest I can find in the mvn repository is 7.10.2 (this is the version I'm already using)

[haritos30]

ok I will try to build from source code

[sebfz1]

Oh, seems you are right! That's surprising because the release tag exits....

I will re-roll the release on Saturday...

[haritos30]

Sorry but the problem is still 100% reproducible even with version 7.15.0

[haritos30]

ok I don't know how but I got it working with different options in each dataTable. nothing else changed, code is the same....

[haritos30]

ok I found it and it's 100% reproducible. If you use the same options in the 2 tables the problem occurs. The reason you failed to reproduce it was because you used different options object for your 2 tables.

Please verify.

Thank you in advance

[sebfz1]

Oh, I would not have expected that at all! I will have a look this weekend...

[sebfz1]

Ok, found the issue. It easy to fix but may have some side effects. I need to assess the risk of silent breaks...

For now the workaround is also trivial, you just need Options objects that are not the same Object. Eg:

new DataTable<>("datatable", ..., new Options(options))  // will do a shallow copy

[mdbergmann]

I'm not sure if related, but maybe so.

Since recent update(s) any DataTable is visible with filled data only once, when first time loaded. After that any DataTable is empty.