DataView (ListView) template question

18 views
Skip to first unread message

Haritos Hatzidimitriou

unread,
Feb 25, 2021, 9:37:24 AMFeb 25
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 AMFeb 25
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 PMFeb 25
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 :-) )                                                                                              
Untitled.png
No exception is thrown in java so the "undefined" is a JS thing...

Sebastien Briquet

unread,
Feb 25, 2021, 6:38:50 PMFeb 25
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:

Haritos Hatzidimitriou

unread,
Feb 26, 2021, 6:57:25 AMFeb 26
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:

Capture.png

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 PMFeb 26
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
0 new messages