You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Davide Vecchi <dv...@amc.dk> on 2016/02/19 10:19:44 UTC
Making a grid's checkbox column preserve its checked state across
pages
Hi everybody,
The following is my scenario, I'm looking for suggestions about good ways to go about it.
Many of my pages have grids, and many of these grids have columns whose content in each row is a checkbox.
If the grid has many rows and so it gets divided into grid pages and it gets a Pager, if I check some checkboxes in the 1st page of the grid and then use the Pager to go to the 2nd page of the grid and then to go back to the 1st page, the checkboxes in the 1st page of the grid have lost their checked state and are all unchecked. I want the checkboxes to preserve their "checked" state while paging back and forth over the grid.
The checkbox is created by a <p:> tag in the page template, just before the </t:grid> closing tag. F.ex. if the Java class is MyPage.java, the grid tag in MyPage.tml will contain:
<p:myColumnCell>
<input t:type="checkbox" value="myRecord.myField" .... />
</p:myColumnCell>
In MyPage.java, myRecord is an instance field annotated with @Property .
Currently I handle this by annotating myRecord with @Persist and making sure to save into it the state of each checkbox that the user changes, so when the user goes back to page 1 the checkboxes that were checked there are still checked.
However this requires changes in MyPage.java, so if I want this behavior in other pages I must make the same changes in the Java classes of all those pages.
I'm looking for a way to make changes in only one place and have this functionality in all the pages that have a grid, without having to make changes in all the pages. In case, I'm totally open to customizing Grid.java or GridPager.java or other classes.
RE: Making a grid's checkbox column preserve its checked state across pages
Posted by heph estos <h3...@gmail.com>.
The best way is to keep a data structure seperated from your grid and this
be used as index of checked and unchecked lines,assuming each line is
identified uniquely. Updating grid upfate your structure and reverse on
page flips.
Στις 19 Φεβ 2016 15:41, ο χρήστης "Davide Vecchi" <dv...@amc.dk> έγραψε:
> The way in which I was thinking to handle this for now was to act
> client-side on the change of a checkbox and send its checked state to the
> server via Ajax, without POSTing the form. The idea of saving the states in
> the client instead is interesting, I had not thought about it and I will
> definitely explore it.
>
> However my final goal is to avoid having to make changes (either client or
> server-side) in each page that has grids with checkboxes, and I was
> wondering if there was some existing functionality that I could exploit to
> somehow make the grid handle the checkbox states on its own without any
> "help" from the page the grid is in.
>
> Otherwise I'm considering modifying the Grid (or the GridPager or other
> component) so that the component is aware of having checkbox columns and
> saves the checkboxes states on paging, and restores them when going back to
> the same grid page. Any suggestion or observation about this would be
> welcome.
>
>
>
> -----Original Message-----
> From: Lance Java [mailto:lance.java@googlemail.com]
> Sent: Friday, February 19, 2016 14:10
> To: Tapestry users <us...@tapestry.apache.org>
> Subject: Re: Making a grid's checkbox column preserve its checked state
> across pages
>
> If you want the values serverside, you'll need to POST the form when
> changing pages. You might find this difficult to achieve as paging is
> currently done as a GET request.
>
> The simplest solution would be to add a change event listener clientside
> and store the values on the client until the form is submitted / saved. You
> might use a hidden text field for this.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
RE: Making a grid's checkbox column preserve its checked state across
pages
Posted by Svein-Erik Løken <sv...@jacilla.no>.
A working example if needed :
<div id="sidebarRouteEdit" style="display: none;background-color: rgba(255, 255, 255, 0.95)" class="leaflet-control">
<t:zone t:id="routeEditZone">
<h1>Route Edit ${routeEditChangedIndicator}</h1>
<a id="sidebarRouteCreate" style="cursor: pointer;${ts2ControlsVisibility}">Create</a>
<a id="sidebarRouteUpdate" style="cursor: pointer;${routeControlsVisibility}">Update</a>
<a id="sidebarRouteDelete" style="cursor: pointer;${routeControlsVisibility}">Delete</a>
<p/>
<t:form t:id="routeEditForm" class="form-horizontal well" async="true">
Route Id: ${routeId}<br/>
Selected ts2Id: ${ts2Id}<br/>
Route length: ${routeLengthInKmFormatted} km
<p/>
<div class="form-group">
<t:submit event="SubmitUpdate" value="Update" data-id="sidebarRouteEditUpdate" style="display: none;margin-left:15px"/>
<t:submit event="SubmitSave" value="Save" disabled="${saveDisabled}" data-id="sidebarRouteEditSubmit" style="margin-left:15px"/>
<div id="sidebarRouteEditClose" class="btn btn-default">Close</div>
</div>
<t:grid data-id="compactGrid" source="routeElements" row="freshRouteelement" model="model" renderTableIfEmpty="true" rowsPerPage="9999">
<p:udHeader><i class="fa fa-chevron-circle-down"/> <i class="fa fa-chevron-circle-up"/></p:udHeader>
<p:reverseDirectionHeader><i class="fa fa-exchange"/></p:reverseDirectionHeader>
<p:removeHeader><span class="fa fa-remove" style="color: #cccccc;padding: 2px"/></p:removeHeader>
<p:reverseDirectionCell>
<t:checkbox onchange="$('[data-id=\'sidebarRouteEditUpdate\']').click()" value="freshRouteelement.reverseDirection"/>
</p:reverseDirectionCell>
<p:udCell>
<t:eventlink event="upDown" context="[freshRouteelement.sequence, 1]" async="true" style="padding: 2px;${lastVisibility}" class="fa fa-chevron-circle-down"/>
<t:eventlink event="upDown" context="[freshRouteelement.sequence, -1]" async="true" style="padding: 2px;${firstVisibility}" class="fa fa-chevron-circle-up"/>
</p:udCell>
<p:removeCell>
<t:eventlink event="removeRouteElement" context="[freshRouteelement.trackSegment2Id]" async="true" style="padding: 2px;color:#333" class="fa fa-remove"/>
</p:removeCell>
</t:grid>
</t:form>
</t:zone>
<h4>Ctrl + Click to Add</h4>
<h4>Ctrl + Shift + Click to Remove</h4>
</div>
void onSubmitUpdate() {
isRouteChanged = true;
routeChangedAjaxResponse();
}
void onSubmitSave() {
routeService.saveRoute(routeId, routeElements);
isRouteChanged = false;
routeChangedAjaxResponse();
}
private void routeChangedAjaxResponse() {
if (request.isXHR()) {
final JSONArray jsonRouteElements = new JSONArray();
for (final FreshRouteelement freshRouteelement : this.routeElements) {
JSONArray latLngs = new JSONArray();
for (Coordinate coordinate : freshRouteelement.getTracksegment2ByTrackSegment2Id().getLineString().getCoordinates()) {
latLngs.put(new LatLng(coordinate.y, coordinate.x).getJsonObject());
}
jsonRouteElements.put(new JSONObject(
"ts2Id", freshRouteelement.getTrackSegment2Id(),
"rev", freshRouteelement.getReverseDirection(),
"latLngs", latLngs));
}
ajaxResponseRenderer
.addRender(routeEditZone)
.addCallback(new JavaScriptCallback() {
@Override
public void run(JavaScriptSupport javascriptSupport) {
javascriptSupport.require("map/map-superadmin").invoke("updateRouteHelperLine")
.with(new JSONObject("routeElements", jsonRouteElements));
}
});
setRouteChangedFlagAjaxResponse(isRouteChanged);
}
}
RE: Making a grid's checkbox column preserve its checked state across pages
Posted by Lance Java <la...@googlemail.com>.
You might be able to do that with my observe mixin
http://t5stitch-lazan.rhcloud.com/observedemo
On 19 Feb 2016 1:41 p.m., "Davide Vecchi" <dv...@amc.dk> wrote:
> The way in which I was thinking to handle this for now was to act
> client-side on the change of a checkbox and send its checked state to the
> server via Ajax, without POSTing the form. The idea of saving the states in
> the client instead is interesting, I had not thought about it and I will
> definitely explore it.
>
> However my final goal is to avoid having to make changes (either client or
> server-side) in each page that has grids with checkboxes, and I was
> wondering if there was some existing functionality that I could exploit to
> somehow make the grid handle the checkbox states on its own without any
> "help" from the page the grid is in.
>
> Otherwise I'm considering modifying the Grid (or the GridPager or other
> component) so that the component is aware of having checkbox columns and
> saves the checkboxes states on paging, and restores them when going back to
> the same grid page. Any suggestion or observation about this would be
> welcome.
>
>
>
> -----Original Message-----
> From: Lance Java [mailto:lance.java@googlemail.com]
> Sent: Friday, February 19, 2016 14:10
> To: Tapestry users <us...@tapestry.apache.org>
> Subject: Re: Making a grid's checkbox column preserve its checked state
> across pages
>
> If you want the values serverside, you'll need to POST the form when
> changing pages. You might find this difficult to achieve as paging is
> currently done as a GET request.
>
> The simplest solution would be to add a change event listener clientside
> and store the values on the client until the form is submitted / saved. You
> might use a hidden text field for this.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
RE: Making a grid's checkbox column preserve its checked state
across pages
Posted by Davide Vecchi <dv...@amc.dk>.
The way in which I was thinking to handle this for now was to act client-side on the change of a checkbox and send its checked state to the server via Ajax, without POSTing the form. The idea of saving the states in the client instead is interesting, I had not thought about it and I will definitely explore it.
However my final goal is to avoid having to make changes (either client or server-side) in each page that has grids with checkboxes, and I was wondering if there was some existing functionality that I could exploit to somehow make the grid handle the checkbox states on its own without any "help" from the page the grid is in.
Otherwise I'm considering modifying the Grid (or the GridPager or other component) so that the component is aware of having checkbox columns and saves the checkboxes states on paging, and restores them when going back to the same grid page. Any suggestion or observation about this would be welcome.
-----Original Message-----
From: Lance Java [mailto:lance.java@googlemail.com]
Sent: Friday, February 19, 2016 14:10
To: Tapestry users <us...@tapestry.apache.org>
Subject: Re: Making a grid's checkbox column preserve its checked state across pages
If you want the values serverside, you'll need to POST the form when changing pages. You might find this difficult to achieve as paging is currently done as a GET request.
The simplest solution would be to add a change event listener clientside and store the values on the client until the form is submitted / saved. You might use a hidden text field for this.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Making a grid's checkbox column preserve its checked state across pages
Posted by Lance Java <la...@googlemail.com>.
If you want the values serverside, you'll need to POST the form when
changing pages. You might find this difficult to achieve as paging is
currently done as a GET request.
The simplest solution would be to add a change event listener clientside
and store the values on the client until the form is submitted / saved. You
might use a hidden text field for this.
On 19 Feb 2016 9:19 a.m., "Davide Vecchi" <dv...@amc.dk> wrote:
> Hi everybody,
>
> The following is my scenario, I'm looking for suggestions about good ways
> to go about it.
>
> Many of my pages have grids, and many of these grids have columns whose
> content in each row is a checkbox.
>
> If the grid has many rows and so it gets divided into grid pages and it
> gets a Pager, if I check some checkboxes in the 1st page of the grid and
> then use the Pager to go to the 2nd page of the grid and then to go back to
> the 1st page, the checkboxes in the 1st page of the grid have lost their
> checked state and are all unchecked. I want the checkboxes to preserve
> their "checked" state while paging back and forth over the grid.
>
> The checkbox is created by a <p:> tag in the page template, just before
> the </t:grid> closing tag. F.ex. if the Java class is MyPage.java, the grid
> tag in MyPage.tml will contain:
>
> <p:myColumnCell>
>
> <input t:type="checkbox"
> value="myRecord.myField" .... />
>
> </p:myColumnCell>
>
> In MyPage.java, myRecord is an instance field annotated with @Property .
>
> Currently I handle this by annotating myRecord with @Persist and making
> sure to save into it the state of each checkbox that the user changes, so
> when the user goes back to page 1 the checkboxes that were checked there
> are still checked.
>
> However this requires changes in MyPage.java, so if I want this behavior
> in other pages I must make the same changes in the Java classes of all
> those pages.
>
> I'm looking for a way to make changes in only one place and have this
> functionality in all the pages that have a grid, without having to make
> changes in all the pages. In case, I'm totally open to customizing
> Grid.java or GridPager.java or other classes.
>