DataView (ListView) template question

Haritos Hatzidimitriou

unread,

Feb 25, 2021, 9:37:24 AM2/25/21

to wicket-jquery-ui

Hello Sebastien,

I'm trying to use the DataView.class (com.googlecode.kendo.ui.repeater.dataview)

and after some trial and error (my list appears empty even thought the pager recognizes that there are in fact 6 elements in my list) I realized I need to override the newTemplate()

method in order to provide a template to the data view. However I don't know how exactly to do this. My data provider is just a simple ListDataProvider so just a simple list of Strings. So I'm not sure what 'key' to provide in the template. I tried the following but it doesn't work:

ListDataProvider<String> dataProvider = new ListDataProvider<>(getGoodsList());

DataViewPanel<String> panel = new DataViewPanel<String>("suspectedGoodsListView", dataProvider, 20L, options) {

private static final long serialVersionUID = 1L;

protected IJQueryTemplate newTemplate()

{

return new IJQueryTemplate() {

private static final long serialVersionUID = 1L;

@Override

public String getText()

{

return "<i>#: data #</i>";

}

@Override

public List getTextProperties()

{

return Generics.newArrayList();

}

};

}

};

also tried data.name in the getText() method with the same result.

Can you give me some help with implementing the newTemplate() method?

I just want to display a list of Strings - no images, nothing fancy.

Thank you in advance

Haritos

Sebastien Briquet

unread,

Feb 25, 2021, 10:35:31 AM2/25/21

to wicket-jquery-ui

Hi Haritos,

I agree the use of the template is not straightforward...

It is a little bit strange we need to provide the template and I didn't made it mandatory (like abstract)... I will need to double check that.

Anyway, the rule for the templates is that the template-text should embed the kendo data properties (like #: data.firstName #).

Normally for these variable to be interpolated, the bean properties (like "firstName") should be provided too (by getTextProperty).

Maybe it is not needed for the DataView template to override getTextProperty because it already has a JsonRenderer, but just in case you can override it like bellow:

So at the end you can have something like:

        return new IJQueryTemplate() {

            private static final long serialVersionUID = 1L;

            @Override
            public String getText()
            {

                return "<span data-key='#: data.key #'>" // lf
                        + "<img class='gravatar' src='#= data.gravatarImageUrl #' title='#: data.firstName # #: data.lastName #' />" // lf
                        + "</span>";
            }

            @Override
            public List<String> getTextProperties()
            {
                return Arrays.asList("firstName", "lastName", "gravatarImageUrl");
            }
        };

If your template is rather big, you can opt for a dedicated tmpl file

MyDataView.java

    @Override
   protected IJQueryTemplate newTemplate()
   {
        return new JQueryPackageTextTemplate(MyDataView.class) {

private static final long serialVersionUID = 1L;

@Override

            public List<String> getTextProperties()
            {
                return Arrays.asList("email", "firstName", "lastName", "gravatarImageUrl");
            }
        };
   }

MyDataView.tmpl (same class name)

<div class='my-class'>
<img class='gravatar' src='#= data.gravatarImageUrl #' alt='#: data.email # ' />
#: data.firstName # #: data.lastName #
</div>

Additionally you can also provide variables to the template

final Map<String, Object> variables = Generics.newHashMap();
variables.put("var1", "boup");

new JQueryPackageTextTemplate(MyDataView.class, variables);

in the template, you can retrieve the value using the "${var1}" notation

Note that there is also the DataViewPanel that embed the Pager by default

Hope this helps,

Sebastien

Haritos Hatzidimitriou

unread,

Feb 25, 2021, 6:06:16 PM2/25/21

to wicket-jquery-ui

Hi Sebastian,

Thank for taking the time to help me. I'm still not sure I understand. My first mistake seems to be that I provided my ListDataProvider with a list of Strings instead of a List of Pojos...

So I created a simple one (remember all I want to do is display a list of strings):

public class ListItem implements Serializable {

private String good;

public ListItem(String good) {

this.good = good;

}

public String getGood() {

return good;

}

public void setGood(String good) {

this.good = good;

}

So I tried the following but it still doesn't work:

ListDataProvider<ListItem> dataProvider = new ListDataProvider<>(getGoodsList()); // org.apache.wicket.markup.repeater.data.ListDataProvider

DataViewPanel<ListItem> panel = new DataViewPanel<ListItem>("suspectedGoodsListView", dataProvider, 20L, options) {

private static final long serialVersionUID = 1L;

protected IJQueryTemplate newTemplate()

{

return new IJQueryTemplate() {

private static final long serialVersionUID = 1L;

@Override

public String getText()

{

return "<li>'#: data.good #'</li>";

}

@Override

public List getTextProperties()

{

return Arrays.asList("good");

}

};

}

};

This is the result (they are not even one per line :-) )

No exception is thrown in java so the "undefined" is a JS thing...

Sebastien Briquet

unread,

Feb 25, 2021, 6:38:50 PM2/25/21

to wicket-jquery-ui

Hi Haritos,

Usually, the default property of renderer is "text", so you should be able to use "data.text" and get the string representation.

But the DataView uses a JsonRenderer by default, meaning it is expecting a json compatible object.

So 2 options :

1/ you can provide another or your own renderer (see TextRenderer)

2/ you make your pojo json compatible. An easy way to do it (IIRC) is to implement toString like this:

    @Override
    public String toString() {
        return new JSONObject(this).toString();
    }

Also, if you were expecting one row per line, maybe you confused with a DataTable? The DataView is actually the integration of Kendo UI ListView:

https://demos.telerik.com/kendo-ui/listview/index

Haritos Hatzidimitriou

unread,

Feb 26, 2021, 6:57:25 AM2/26/21

to wicket-jquery-ui

Hi Sebastian,

Thanks for the help your tip worked great! I thought using a DataTable just to display one column was overkill so I opted to try the ListView instead. I think it's a good fit for my use case:

A few ideas regarding the DataViewPanel:

newTemplate() should be made Abstract
Add a constructor that allows you to provide a renderer for the DataView
Add method onChange() that is called by the DataView.onChange() so that the user has access to it.
Maybe do the same for methods onCreate/onUpdate/onDelete
Add JS code so the first item of the list is selected by default when rendering the page.
Add an example for ListView (using DataViewPanel ) in the web site

I can open a PR and do it if you want.

Thanks again for your help!

Regards

Haritos

P.S I don't see the dataTable with checkbox example in the website. Do you plan to update it?

Sebastien

unread,

Feb 26, 2021, 6:55:18 PM2/26/21

to wicket-j...@googlegroups.com

Hi Haristos,

I actually integrated the DataView for my own use-case for a side project. That's why it is not complete and there is no demo page.

Yes, your help will be appreciated! Feel free to open a PR! :). I agree with your points, except maybe the first item selected by default. I don't know if it should be like this. Please have a look to the kendo ui demo site to see how they did. Also if you select the fist item programmatically, the change event will not be triggered I think

I forgot to upload the demo site of the latest release, I'll do it! Thanks!

Reply all

Reply to author

Forward