Using XTemplate with Grid

Question

I'm trying to use XTemplate to display Row information of a Grid:

    List<User> users = new ArrayList<User>();
    users.add(new User("John", "Smith"));
    users.add(new User("Bob", "James"));
    UserList list = new UserList(users);

    XTemplate tpl = XTemplate.create(getTemplate());
    tpl.applyTemplate(Util.getJsObject(list));

    RowExpander expander = new RowExpander();
    if (showExpand){
        expander.setTemplate(tpl);
        columns.add(expander);
    }

Here is the code the the getTemplate():

public native String getTemplate() /*-{
  return ['<p>Details: ',
          '<tpl for=".">',       
          '<p>{#}</p>',          // use current array index to autonumber
          '</tpl></p>'
         ].join("");
}-*/;

However I'm quite new to XTemplate and that I can't seem to make it work. I just copied some source with the samples.

Basically, what I am trying to do is just to render the above List<User> as:

Details:
1 First Name: John - Last Name: Smith
2 First Name: Bob - Last Name: James

Here is the User and UserList models:

class User extends BaseModelData {
    public User(String firstName, String lastName){
        set("firstname", firstName);
        set("lastname", lastName);
    }
}

class UserList extends BaseModelData {
    public UserList(List<User> list){
        set("users", list);
    }
    public List getUsers(){
        return get("users");
    }
    public void setUsers(List users) {
        set("users", users);
    }
}

This is how the Grid is declared:

Grid grid = new Grid<ModelData>(new ListStore<ModelData>(), new ColumnModel(columns));

And this is the details of the ListStore:

ListStore<ModelData> store = grid.getStore();
store.removeAll();
store.add(list); // Where list is List<Map<String, String>> data

score 1 · Accepted Answer · answered Oct 23 '12 at 13:19

1

It is hard to say with so little information (where is the Grid declaration? ListStore), but assuming you are building a ListStore<UserList>, your template needs to iterate through the users property inside the UserList instance, instead of ., signifying the UserList object itself (which can't be iterated):

public native String getTemplate() /*-{
  return ['<p>Details: ',
      '<tpl for="users">',       
      '<p>{#}</p>',          // use current array index to autonumber
      '</tpl></p>'
     ].join("");
}-*/;

answered Oct 23 '12 at 13:19

Colin Alworth

17,801
2
26
39

Also: If you are able, consider updating to GXT 3 - while it does frequently mean a rewrite in many areas, it also provides much better use of strong types, even in templates, to ensure that valid code is being written. Using proper Generic args everywhere (i.e. never just `List`, but `List`, etc will make it easier for the compiler and other developers to know what you mean. – Colin Alworth Oct 23 '12 at 13:22
We use, Grid grid = new Grid(new ListStore(), new ColumnModel(columns)); – quarks Oct 24 '12 at 06:08
I mean we just do ListStore see my updated question – quarks Oct 24 '12 at 07:05
It looks like the problem with my code is that the template '{field}' I put in the template string is not matching the field name in the model data... – quarks Oct 24 '12 at 11:33
Thanks for the advise though, this question is actually related to this one (which is a very hard problem we face with Ext GWT): http://stackoverflow.com/questions/13047545/row-within-a-row-with-ext-gwt-grid – quarks Oct 24 '12 at 11:34
Do you understand the fix though? Since it is still marked unanswered: The `.` in the `tpl for` is wrong, it should be `users`. Content gets wrapped in {}'s, but in the `for` attribute of the `tpl` tag, you just need to name the property that contains the list. – Colin Alworth Oct 24 '12 at 14:43
Another solution for your other problem would be to use a TreeGrid instead of a Grid - this is specifically designed to handle rows that are nested in rows, but you need to set your data up in the store correctly. – Colin Alworth Oct 24 '12 at 14:43

Using XTemplate with Grid

1 Answers1