You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Tron Walseth <tr...@telespor.no> on 2013/11/11 11:17:30 UTC
Table row visibility
Hi,
I have a table with legends explaining map (OpenLayers) layers.
I want to turn visibility on/off on the entire row based on the visibility of these map layers using JS.
I can easily turn on/off the visibility of the legend image itself using JavaScript/JQuery, but I want to toggle visibility of the entire row. I know this can be done through ajax, but I don't want to put extra unnecessary load on the server through Ajax calls.
The easiest way to do this (AFAIK) is adding an id to the table row, and toggling visibility through JQuery:
$("#tableRowId").show()/hide();
Below is the entire code of my LegendPanel pasted.
Yours,
Tron Walseth
public class LegendPanel<ID extends Serializable> extends MapPanel<ID>
{
private static final long serialVersionUID = 1L;
/**
* @param id
*/
public LegendPanel(String id, List<BusinessLayer> layers, BusinessDataAjaxMap<ID> map)
{
super(id, map);
ListDataProvider<BusinessLayer> dp = new ListDataProvider<>(layers);
DefaultDataTable<BusinessLayer, String> table = new DefaultDataTable<>("legends", getTableColumns(), dp, 100000);
add(table);
}
private static List<IColumn<BusinessLayer, String>> getTableColumns()
{
List<IColumn<BusinessLayer, String>> cols = new ArrayList<>();
cols.add(new HeaderlessColumn<BusinessLayer, String>() {
private static final long serialVersionUID = 1L;
@Override
public void populateItem(Item<ICellPopulator<BusinessLayer>> cellItem, String componentId, IModel<BusinessLayer> rowModel)
{
cellItem.add(new Label(componentId, rowModel.getObject().getLegendDescription()));
}});
cols.add(new HeaderlessColumn<BusinessLayer, String>() {
private static final long serialVersionUID = 1L;
@Override
public void populateItem(Item<ICellPopulator<BusinessLayer>> cellItem, String componentId, IModel<BusinessLayer> rowModel)
{
Url imgUrl = Url.parse(rowModel.getObject().getLayerLegend().trim());
ResourceReference ref = new UrlResourceReference(imgUrl);
ImagePanel i = new ImagePanel(componentId, ref);
i.setMarkupId(rowModel.getObject().getLegendDescription());
cellItem.add(i);
}
});
return cols;
}
/* (non-Javadoc)
* @see org.apache.wicket.Component#renderHead(org.apache.wicket.markup.head.IHeaderResponse)
*/
@Override
public void renderHead(IHeaderResponse response)
{
super.renderHead(response);
response.render(JavaScriptHeaderItem.forScript("function toggleLegend(event){\n\t" +
"var visible = event.object.visibility;\n" +
"\tvar divObject = '#' + event.object.params.BUSINESSNAME;\n" +
"\tif (visible) \n" +
"\t\t$(divObject).show();\n" +
"\telse\n" +
"\t\t$(divObject).hide();\n" +
"}", "layerlegend"));
}
/* (non-Javadoc)
* @see no.telespor.web.page.map.openlayers.MapPanel#updateComponents(org.apache.wicket.ajax.AjaxRequestTarget)
*/
@Override
public void updateComponents(AjaxRequestTarget target)
{
//empty on purpose
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
SV: Table row visibility
Posted by Tron Walseth <tr...@telespor.no>.
Hi again
I wanted to turn on/off row visibility, and in doing that, I wanted to set row id on the row.
I found out how this should be done, in overriding the newRowItem on the DefaultDataTable class, and adding an AttributeModifier to the rowItem.
Sorry for any inconvenience.
Yours,
Tron Walseth
________________________________________
Fra: Martin Grigorov [mgrigorov@apache.org]
Sendt: 11. november 2013 11:28
Til: users@wicket.apache.org
Emne: Re: Table row visibility
Hi,
What is your question ?
I guess "how to get the markup id of the row?".
I'd suggest you to add a JS event listener on the <table> that filters for
clicks on 'tr' (i.e. event delegation).
On Mon, Nov 11, 2013 at 12:17 PM, Tron Walseth <tr...@telespor.no> wrote:
> Hi,
>
> I have a table with legends explaining map (OpenLayers) layers.
> I want to turn visibility on/off on the entire row based on the visibility
> of these map layers using JS.
>
> I can easily turn on/off the visibility of the legend image itself using
> JavaScript/JQuery, but I want to toggle visibility of the entire row. I
> know this can be done through ajax, but I don't want to put extra
> unnecessary load on the server through Ajax calls.
>
> The easiest way to do this (AFAIK) is adding an id to the table row, and
> toggling visibility through JQuery:
>
> $("#tableRowId").show()/hide();
>
> Below is the entire code of my LegendPanel pasted.
>
> Yours,
> Tron Walseth
>
> public class LegendPanel<ID extends Serializable> extends MapPanel<ID>
> {
> private static final long serialVersionUID = 1L;
> /**
> * @param id
> */
> public LegendPanel(String id, List<BusinessLayer> layers,
> BusinessDataAjaxMap<ID> map)
> {
> super(id, map);
> ListDataProvider<BusinessLayer> dp = new
> ListDataProvider<>(layers);
> DefaultDataTable<BusinessLayer, String> table = new
> DefaultDataTable<>("legends", getTableColumns(), dp, 100000);
> add(table);
>
> }
>
> private static List<IColumn<BusinessLayer, String>> getTableColumns()
> {
> List<IColumn<BusinessLayer, String>> cols = new ArrayList<>();
> cols.add(new HeaderlessColumn<BusinessLayer, String>() {
>
> private static final long serialVersionUID = 1L;
>
> @Override
> public void populateItem(Item<ICellPopulator<BusinessLayer>>
> cellItem, String componentId, IModel<BusinessLayer> rowModel)
> {
> cellItem.add(new Label(componentId,
> rowModel.getObject().getLegendDescription()));
> }});
> cols.add(new HeaderlessColumn<BusinessLayer, String>() {
> private static final long serialVersionUID = 1L;
>
> @Override
> public void populateItem(Item<ICellPopulator<BusinessLayer>>
> cellItem, String componentId, IModel<BusinessLayer> rowModel)
> {
> Url imgUrl =
> Url.parse(rowModel.getObject().getLayerLegend().trim());
> ResourceReference ref = new UrlResourceReference(imgUrl);
> ImagePanel i = new ImagePanel(componentId, ref);
> i.setMarkupId(rowModel.getObject().getLegendDescription());
> cellItem.add(i);
> }
> });
>
> return cols;
> }
>
> /* (non-Javadoc)
> * @see
> org.apache.wicket.Component#renderHead(org.apache.wicket.markup.head.IHeaderResponse)
> */
> @Override
> public void renderHead(IHeaderResponse response)
> {
> super.renderHead(response);
> response.render(JavaScriptHeaderItem.forScript("function
> toggleLegend(event){\n\t" +
> "var visible = event.object.visibility;\n" +
> "\tvar divObject = '#' +
> event.object.params.BUSINESSNAME;\n" +
> "\tif (visible) \n" +
> "\t\t$(divObject).show();\n" +
> "\telse\n" +
> "\t\t$(divObject).hide();\n" +
> "}", "layerlegend"));
> }
>
> /* (non-Javadoc)
> * @see
> no.telespor.web.page.map.openlayers.MapPanel#updateComponents(org.apache.wicket.ajax.AjaxRequestTarget)
> */
> @Override
> public void updateComponents(AjaxRequestTarget target)
> {
> //empty on purpose
> }
> }
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Table row visibility
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
What is your question ?
I guess "how to get the markup id of the row?".
I'd suggest you to add a JS event listener on the <table> that filters for
clicks on 'tr' (i.e. event delegation).
On Mon, Nov 11, 2013 at 12:17 PM, Tron Walseth <tr...@telespor.no> wrote:
> Hi,
>
> I have a table with legends explaining map (OpenLayers) layers.
> I want to turn visibility on/off on the entire row based on the visibility
> of these map layers using JS.
>
> I can easily turn on/off the visibility of the legend image itself using
> JavaScript/JQuery, but I want to toggle visibility of the entire row. I
> know this can be done through ajax, but I don't want to put extra
> unnecessary load on the server through Ajax calls.
>
> The easiest way to do this (AFAIK) is adding an id to the table row, and
> toggling visibility through JQuery:
>
> $("#tableRowId").show()/hide();
>
> Below is the entire code of my LegendPanel pasted.
>
> Yours,
> Tron Walseth
>
> public class LegendPanel<ID extends Serializable> extends MapPanel<ID>
> {
> private static final long serialVersionUID = 1L;
> /**
> * @param id
> */
> public LegendPanel(String id, List<BusinessLayer> layers,
> BusinessDataAjaxMap<ID> map)
> {
> super(id, map);
> ListDataProvider<BusinessLayer> dp = new
> ListDataProvider<>(layers);
> DefaultDataTable<BusinessLayer, String> table = new
> DefaultDataTable<>("legends", getTableColumns(), dp, 100000);
> add(table);
>
> }
>
> private static List<IColumn<BusinessLayer, String>> getTableColumns()
> {
> List<IColumn<BusinessLayer, String>> cols = new ArrayList<>();
> cols.add(new HeaderlessColumn<BusinessLayer, String>() {
>
> private static final long serialVersionUID = 1L;
>
> @Override
> public void populateItem(Item<ICellPopulator<BusinessLayer>>
> cellItem, String componentId, IModel<BusinessLayer> rowModel)
> {
> cellItem.add(new Label(componentId,
> rowModel.getObject().getLegendDescription()));
> }});
> cols.add(new HeaderlessColumn<BusinessLayer, String>() {
> private static final long serialVersionUID = 1L;
>
> @Override
> public void populateItem(Item<ICellPopulator<BusinessLayer>>
> cellItem, String componentId, IModel<BusinessLayer> rowModel)
> {
> Url imgUrl =
> Url.parse(rowModel.getObject().getLayerLegend().trim());
> ResourceReference ref = new UrlResourceReference(imgUrl);
> ImagePanel i = new ImagePanel(componentId, ref);
> i.setMarkupId(rowModel.getObject().getLegendDescription());
> cellItem.add(i);
> }
> });
>
> return cols;
> }
>
> /* (non-Javadoc)
> * @see
> org.apache.wicket.Component#renderHead(org.apache.wicket.markup.head.IHeaderResponse)
> */
> @Override
> public void renderHead(IHeaderResponse response)
> {
> super.renderHead(response);
> response.render(JavaScriptHeaderItem.forScript("function
> toggleLegend(event){\n\t" +
> "var visible = event.object.visibility;\n" +
> "\tvar divObject = '#' +
> event.object.params.BUSINESSNAME;\n" +
> "\tif (visible) \n" +
> "\t\t$(divObject).show();\n" +
> "\telse\n" +
> "\t\t$(divObject).hide();\n" +
> "}", "layerlegend"));
> }
>
> /* (non-Javadoc)
> * @see
> no.telespor.web.page.map.openlayers.MapPanel#updateComponents(org.apache.wicket.ajax.AjaxRequestTarget)
> */
> @Override
> public void updateComponents(AjaxRequestTarget target)
> {
> //empty on purpose
> }
> }
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>