Pagination using vaadin 10

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

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.