Pagination using vaadin 10

Flow
1

Hi Team,
I am currently looking for pagination implementation on the Vaadin Grid,not able to see any stuff regarding the same.
So currently i am doing it manually, and i am facing issue :- The value is not rendering which having Date type field when i am removing whole children data from grid component and adding again new data.

i am using LocalDateTimeRenderer < > for given input.

This is my Code


	private Grid<ConfigurationGridDTO> configGrid;

	   configGrid.setDataProvider(configDataProvider);
	   configGrid.addColumn(new LocalDateTimeRenderer < > (ConfigurationGridDTO::getPreSaleStartDate,
	     DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT,
	      FormatStyle.MEDIUM))).setComparator((fpsDate, spsDate) -> fpsDate.compareTo(spsDate))
	    .setWidth("40px").setResizable(true).setSortable(Boolean.TRUE)
	    .setHeader("Presale Start Date").setId("");
	   configGrid.addColumn(new LocalDateTimeRenderer < > (ConfigurationGridDTO::getPreSaleEndDate,
	     DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT,
	      FormatStyle.MEDIUM))).setComparator((fpeDate, speDate) -> fpeDate.compareTo(speDate))
	    .setWidth("40px").setResizable(true).setSortable(Boolean.TRUE)
	    .setHeader("Presale End Date");
	   configGrid.addColumn(new LocalDateTimeRenderer < > (ConfigurationGridDTO::getPublicSaleStartDate,
	     DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT,
	      FormatStyle.MEDIUM))).setComparator((fplsDate, splfDate) -> fplsDate.compareTo(splfDate))
	    .setWidth("40px").setResizable(true).setSortable(Boolean.TRUE)
	    .setHeader("Public Start Date");
	   configGrid.addColumn(new LocalDateTimeRenderer < > (ConfigurationGridDTO::getPublicSaleEndDate,
	     DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT,
	      FormatStyle.MEDIUM))).setComparator((fpleDate, spleDate) -> fpleDate.compareTo(spleDate))
	    .setWidth("40px").setResizable(true).setSortable(Boolean.TRUE)
	    .setHeader("Public End Date");
	   configGrid.addColumn(ConfigurationGridDTO::getSoftCap).setHeader("Soft Cap").setComparator(
	     (fSoftCap, sSoftCap) -> fSoftCap.compareTo(sSoftCap))
	    .setWidth("10px").setResizable(true).setSortable(Boolean.TRUE);
	   configGrid.addColumn(ConfigurationGridDTO::getHardCap).setHeader("Hard Cap").setComparator(
	     (fHardcap, sHardCap) -> fHardcap.compareTo(sHardCap))
	    .setWidth("10px").setResizable(true).setSortable(Boolean.TRUE);
	   configGrid.addColumn(ConfigurationGridDTO::getPreSaleTarget).setHeader("Presale Target").setComparator(
	     (fPresaleTarget, sPresaleTarget) -> fPresaleTarget.compareTo(sPresaleTarget))
	    .setWidth("20px").setResizable(true).setSortable(Boolean.TRUE);
	   configGrid.addColumn(ConfigurationGridDTO::getPublicSaleTarget).setHeader("Public Sale Target").setComparator(
	     (fPresaleEndTarget, sPresaleEndTarget) -> fPresaleEndTarget.compareTo(sPresaleEndTarget))
	    .setWidth("20px").setResizable(true).setSortable(Boolean.TRUE);
	   configGrid.addColumn(new LocalDateTimeRenderer < > (ConfigurationGridDTO::getModifyDate,
	     DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT,
	      FormatStyle.MEDIUM)), "modifyDate").setComparator((firstMdate, secondMdate) ->
	     firstMdate.compareTo(secondMdate)
	    )
	    .setWidth("20px").setResizable(true).setSortable(Boolean.TRUE)
	    .setHeader("Modified Date");
	   configGrid.addColumn(ConfigurationGridDTO::getModifierUser).setHeader("Modifier Id").setResizable(true).setSortable(Boolean.TRUE);
	   configGrid.setHeightByRows(Boolean.TRUE);
2

It’s a lot of code and I can’t see what causes the issue from your description.
Could you please localize the problem? If I understood your correctly a Date type column
is the source of the issue. So may be it’s enough to have only this column and
almost everything else is just not relevant?

whole children data from grid component and adding again new data

What do you mean by children data? The data which you use to set into the Grid?
Or you are using some components inside the Grid?

3

It’s working and populate date properly, But when removing content from grid using (configGrid.getElement().removeAllChildren()) and then again rendering date with same below code then it’s not rendering date while date is available in grid.

configGrid.addColumn(new LocalDateTimeRenderer < > (ConfigurationGridDTO::getPreSaleStartDate,
DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT,
FormatStyle.MEDIUM))).setComparator((fpsDate, spsDate) → fpsDate.compareTo(spsDate))
.setWidth(“40px”).setResizable(true).setSortable(Boolean.TRUE)
.setHeader(“Presale Start Date”).setId(“”);

4

Sorry, I don’t really understand why do you remove children from the Grid ?

5

For removing previous page grid content and rendering next page content for Pagination

6

I’m not sure that this is a correct way to do.
Technically, you are breaking the client side element when you do configGrid.getElement().removeAllChildren().
The content of Grid is not populated from the server side but there are client side elements in the web-component. And removeAllChildren() is implemented nowadays (I hope I’m not wrong) so that it removes all children including client-side children.
This may break the functionality of a grid web component.

Why you don’t just replace the data (via data providers or setItems)?

7

Thanks for your answer.

8

I have one more question.
I need to implement loader and for this using client side script for remove loader view but giving error of reference error (_removeLoader) is not defined. Below code is client side template with function and server side java code for calling the client side function:-



#loaderIndicatorId.open {
display:none;
}




java code:
UI.getCurrent().getPage().executeJavaScript(“_removeLoader()”);

9

If you are developing a server-based application, I don’t think you need to tinker with any client-side code when using Grid component. Grid has got all the rich features to control everything from the server side itself. If you post your requirements here (with a simple example), someone will offer help.

10

UI.getCurrent().getPage().executeJavaScript("_removeLoader()");
This executes a global function _removeLoader() somehow defined.

If you want to execute a function for some element then you may do either
Element.callFunction or UI.getCurrent().getPage().executeJavaScript("$0._removeLoader(), element)";.

11

Calling like this ‘loaderIndicatorId.callFunction(“_removeLoader”)’ give TypeError: _removeLoader loader is not a function.
public void afterNavigation(AfterNavigationEvent event) {
loaderIndicatorId.callFunction(“_removeLoader”);
}

<dom-module id="main-view">
#loaderIndicatorId.open { display:none; } 
<div id="loaderIndicatorId" class="v-loading-indicator first" >

</div>
12

Do you have _removeLoader function in your element at all?
Either the code snippet is not complete or broken.
I don’t see the function definition.

This message _removeLoader loader is also weird. What the loader is ?

13

Yes

class MyApp extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior]
, Polymer.Element) {
static get is() { return ‘main-view’; }
_removeLoader(){
this.$.loaderIndicatorId.classList.remove(‘open’);
}

}
window.customElements.define(MyApp.is, MyApp);
14

What is loaderIndicatorId in your Java code?
Looks like you are calling the JS function on a wrong element.

15

Element

@Id(“loaderIndicatorId”)
private Element loaderIndicatorId;

16

But your function is defined for main-view web component.
There is no function _removeLoader in your loading indicator element which is div.
You should call function for the main view instance instead.

17

As this is main view(Parent) for all view then would you let me know how to instantiate it.
And also can suggest any stuff for access element of parent view from child view and vice versa.

18

It’s instantiated for you. If you instantiate it explicitly then it won’t be used by router since it doesn’t know about it.

If your method public void afterNavigation(AfterNavigationEvent event) is inside MainView class then just implement it as
getElement().callFunction("_removeLoader") and that’s it.

19

Thanks for your quick response.
Please, Also suggest for access children of parent view from child view and vice versa from server side java code and client side script.

20

I tried below but return empty list but this class element is available in parent.
List components = getElement().getParent().getChildren()
.filter(element → element.getClassList().contains(“v-loading-indicator”))
.collect(Collectors.toList());
Please, Share if any stuff is available for the same.
Thanks.