Struggling with Grid and TemplateRenderer

Bryan32 · August 29, 2018, 4:10pm

Hello,

I’m having trouble getting Grid to work with TemplateRenderer.

The following code configures my Grid:

@Id("grid")
private Grid<FinancialAccount> grid;
	
grid.addColumn(AccountCard.getTemplate()
    .withProperty("accountCard", AccountCard::create));

AccountCard is pretty much OrderCard from the Bakery demo:

public class AccountCard {
	
	public static TemplateRenderer<FinancialAccount> getTemplate() {
		return TemplateRenderer.of(
				  "<account-card"
				+ "  account-card='[[item.accountCard]
]'"
				+ "  on-card-click='cardClick'>"
				+ "</account-card>");
	}
	
	public static AccountCard create(FinancialAccount account) {
		return new AccountCard(account);
	}
	
	...

Finally, the gist of account-card.html:

<dom-module id="account-card">
    <template>
	<style include="shared-styles">
	
		:host {
			display: block;
		}
		
		.content {
        	display: block;
        	width: 100%;
        	margin-left: auto;
        	margin-right: auto;
      	}
	
	 </style>
<div class="content">
 <h2>Test</h2>
 <div class="account_name">[[accountCard.name]
]</div>
 <div class="balance">[[accountCard.balance]
]</div>
</div>
</template>
...
</dom-module>

It looks like the TemplateRenderer is working. My backend service loads two accounts, and I see two rows in the Grid. Each row contains an (see attached). The issue is that the element is empty:

<account-card class="style-scope account-list"></account-card>

I’m pretty sure I have the data binding correct, but I wouldn’t be surprised if that part wasn’t working. I am surprised that the <h2> element isn’t rendered inside the <account-card>.

Any help would be greatly appreciated.

Bryan

Hayden1 · August 30, 2018, 2:44am

Howdy,

Got into the developer sources tab and check that your dom-module is there and there are no errors present in the developer console.

If it’s not there make sure you are using an @HTMLImport(“account-card.html”) on your AccountCard class to let Vaadin no you want that html loaded into the browser to be used.

If you’ve done that I’d suggest manually checking that your AccountCard class renders properly on its own first to make sure your error is between the AccountCard and the template renderer.

Bryan32 · August 30, 2018, 4:18pm

Hayden,

Thanks for the reply!

That’s a good tip to check the Sources tab in Chrome’s DevTools to make sure the dom-module is available. In my case, it was not.

I ended up adding the following to the .html file that contained my Grid:

<link rel="import" href="account-card.html">

Issue resolved.

Thanks again for your help,

Bryan

Hayden1 · August 30, 2018, 11:02pm

To make it more modular if you add that link to your Account-card class Vaadin will include the file every time the class is used so you can use it anywhere. Just went through all this.

Gianluca21 · September 10, 2018, 4:46pm

Hi guys I have the same problem.

Can you help me giving some snippet code to understand where i’m wrong?
I have a class with a Grid where I add the column to it.

public BehaviorAnalyticsView() {

 	this.filters.setPlaceHolder("Search...");
 	this.filters.addActionClickListener(e -> updateGrid(filters));

 	grid.addColumn(UserCard.getTemplate().withProperty("orderCard", UserCard::create));

 }

In the constructor I add the column and then after click on search I execute grid.setItems(result.getResult());
The result is always a sad white page

UserCard is the same that your AccountCard.
In debug mode I can see that all get method are called but nothing appear on my grid.
I added the HtmlImport as suggested but nothing change


@HtmlImport("src/views/analytics/user-card.html")
public class UserCard {

I also included in the Html where the grid is defined.
Where am I doing wrong? I do not know what to do

Thanks

Gianluca21 · September 11, 2018, 1:33pm

Hi,
I solved my problem!

I have another question.
Is it possible that, in the previous example, AccountCard returns a Div?
How do I write HTML to host this component?

With a simple get it does not work. I have no mistake but I do not see anything as a result

<div class="account_div">{{accountCard.div}}</div>

Sergey267 · February 5, 2019, 3:14am

Hi, I can’t understand what should UserCard::create or AccountCard::create methods contain. Can someone please explain?

I’m trying to make a view that looks like a StorefrontView in a Bakery demo app. But I can’t understand how this construction works:

grid.addColumn(  "<order-card"
				+ "  order-card='[[item.orderCard]
]'"
				+ "</order-card>"
				.withProperty("orderCard", OrderCard::create)
);

OrderCard is just a bean class and didn’t provide any ValueProvider<>, so how the data is passed to orderCard property?

I made an almost a copy of a StoreFront view looking like this:

Tag("tablefront-view")
@HtmlImport("frontend://src/views/tablefront-view.html")
@Route(value = "tablefront", layout = MainView.class)
@RouteAlias(value = "", layout = MainView.class)
public class TablefrontView extends PolymerTemplate<TemplateModel> {
	@Id("grid")
	private Grid<Table> grid;
	
	public TablefrontView() {
		ListDataProvider<Table> dataProvider = new ListDataProvider<>(TableService.getInstance().findTables()); //TableService returns List<> of 3 Tables 
		grid.setDataProvider(dataProvider);
		grid.addColumn(TableCard.getTemplate()
				.withProperty("table-card", TableCard::create)
				);
	}
}

And here is my TableCard.class:

public class TableCard {
	public static TemplateRenderer<Table> getTemplate() {
		return TemplateRenderer.of(
				  "<table-card"
				+ "  table-card='[[item.tableCard]
]'"
				+ "</table-card>");
	}
	public static TableCard create(TableSummary table) {
		return new TableCard(table);
	}
	private final TableSummary table;
	public TableCard(TableSummary table) {
		this.table = table;
	}
	public String getname() {
		return table.getName();
	}
	public String getLoadTime() {
		return table.getLoadTime();
	}
	public String getStatus() {
		return table.getStatus();
	}
}

Interface TableSummary:

public interface TableSummary {
	String getStatus();
	String getLoadTime();
	String getName();
}

table-card template:

<dom-module id="table-card">
  <template>
	<style include="shared-styles">...
    <div class="content">
      <div class="wrapper">
        <div class="info-wrapper">
          <div class="status-badge">[[tableCard.status]
]</div>
          <div class="time-place">
            <h3 class="time">[[tableCard.loadTime]
]</h3>
          </div>
        </div>
        <div class="name-items">
          <h3 class="name">[[tableCard.name]
]</h3>
        </div>
      </div>
    </div>
  </template>
    <script>...
</dom-module>

The result of this code is a Grid of 1 column with 3 rows which cells are consist of Template ‘table-card’. But there is now data in the fields. Here is the screen from developer Sources. All of dom-modules is there and there are no errors present in the developer console.
Sorry for my English!

Chris330 · February 6, 2019, 8:22am

Hi =)
personal suggestion → stop using the TemplateRender XD
Maybe create a card which extends “Div” and holds other divs and spans and anything you want. This will work perfectly when using grid.addComponentColumn(Card::new).
If you set a clasname to your card, you can style it with CSS

Sergey267 · February 6, 2019, 9:55am

Hi Chris! Thank you for your reply, it will be the plan B =).
Anyway I want to understand how to work with a TemplateRenderer and PolymerTemplates. Could someone help me, please?

Sergey267 · February 8, 2019, 10:36am

I solved my problem!
I made a mistake because of my inattentiveness.

Kaspar4 · February 8, 2019, 10:57am

Hey Sergey

If that mistake was somewhere in the code that you shared above, could you share with us what that mistake was, so others can learn from it too? Thanks

Sergey267 · February 10, 2019, 10:32am

Kaspar Scherrer:
Hey Sergey

If that mistake was somewhere in the code that you shared above, could you share with us what that mistake was, so others can learn from it too? Thanks

Yeah, no problem. I used a wrong property name.
Wrong code:

grid.addColumn(TableCard.getTemplate()
	.withProperty("table-card", TableCard::create)
);

Right code:

grid.addColumn(TableCard.getTemplate()
	.withProperty("tableCard", TableCard::create)
);

Martin595 · February 12, 2019, 4:03am

Sergey Belinskiy:

Kaspar Scherrer:
Hey Sergey

If that mistake was somewhere in the code that you shared above, could you share with us what that mistake was, so others can learn from it too? Thanks

Yeah, no problem. I used a wrong property name.
Wrong code:
grid.addColumn(TableCard.getTemplate()
	.withProperty("table-card", TableCard::create)
);
Right code:
grid.addColumn(TableCard.getTemplate()
	.withProperty("tableCard", TableCard::create)
);

Aren’t both of those valid polymer names (and referring to the same object)?