Pagination using vaadin 10

Flow
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.

21

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.

Use Element API for this.
Each component has an element which may be asked via getElement(). The resulting Element instance has methods to get parents and children. On the client side there is DOM API and nothing else we may not suggest for you.

22

Element API works on the server side ONLY and it works ONLY for those elements that has been created on the server side.
If you use templates then it doesn’t return you children which are defined on the client side.
It will give you only the children which you have created and added on the server side (and may be there are none of them). That’s why it doesn’t work.

There is no way to get pure client side elements on the server side. If you have this need it means that you are using templates in a bad way: you don’t need the client side template since you are losing all the benefits of it. You may create and construct DOM element (even template) from the server side completely.
In this case the client side and the server side is 1:1.

Another way is to use @Id which will give you a way to access SOME dedicated children in your template.