Re: How to customize the grid to show three s in two rows?

[g kuczera <gk...@gmail.com>]

I ended up using the loop in this way:

        <table class="double_regular clear">        	
        	<tr>
        		<th>${message:title-label}</th>
    			<th>${message:content-label}</th>
        	</tr>
	        <t:Loop t:source="objectsSource" t:value="currentObject">
	        	<tbody>
           			<tr>
		        		<td><t:pageLink page="literal:object/details"
context="${currentObject.id}">${currentObject.title}</t:pageLink></td>
		            	        <td>${currentObject.content}</td>
	        		</tr>
           			<tr>
		        		<td colspan="2">${currentObject.date}</td>
		        	</tr>
	        	</tbody>	
				<p:empty>
					<tbody>
		           			<tr>
			        			<td colspan="2">${noObjectsMessage}</td>
		        			</tr>
					</tbody>
				</p:empty>				   	        	
	        </t:Loop>
        </table>

With the css styles based on the elements' types. Thanks guys for the help.

PS: In this case, especially the <tbody> tag was very useful - helped
me to use the hover style over the two rows at the same time.




2016-06-24 18:03 GMT+02:00 Norman Franke <fr...@bethzur.com>:

> It’s not meant to, but can. I add a new column for the special row via
> t:add=“special” or whatever. Then define that column in the grid:
>
>         <p:specalCell>
>         <t:outputraw value="literal:&lt;/td>&lt;/tr>&lt;tr>&lt;td
> colspan=‘2' class='desc'>" />
>         <div>Some Content Here</div>
>         </p:specalCell >
>
> I usually use CSS to hide that column, since you’ll end up with an empty
> column on the end. You can make it a real column, if desired, by just
> adding content after the first line. However, that confuses sorting since
> you have two columns inside of one.
>
> I typically use this for a description or long textual content. I usually
> wrap that in a <div> with CSS of white-space: nowrap; overflow: hidden; so
> it just truncates after the first line,
>
> -Norman
>
> > On Jun 22, 2016, at 3:50 AM, Chris Poulsen <ma...@nesluop.dk>
> wrote:
> >
> > So:
> > <tr>
> >    <td/><td/>
> > </tr>
> > <tr>
> >    <td colspan="2"/>
> > </tr>
> >
> > For each row.
> >
> > The grid is not meant to handle something like that.
> >
> > You can roll your own component(s) to render what you need (using loop
> > etc.) or add an extra cell as a regular grid cell and then use a mixin to
> > manipulate the html of the grid to introduce a new row containing the
> cell.
> > The latter being the most "hackish solution" of the two, IMO.
> >
> > --
> > Chris
> >
> > On Wed, Jun 22, 2016 at 8:22 AM, g kuczera <gk...@gmail.com> wrote:
> >
> >> Sorry, the image was not embedded correctly. Here is the link:
> >> http://i.imgur.com/OlnNVBn.png
> >>
> >> (two headers before, three headers after).
> >> Now I am examining if it's possible to move the third <td> component
> down
> >> (below the other two) via css styling.
> >>
> >> 2016-06-22 8:13 GMT+02:00 Chris Poulsen <ma...@nesluop.dk>:
> >>
> >>> Your post seems incomplete, so it is not clear to me, what you are
> trying
> >>> to do.
> >>>
> >>> --
> >>> Chris
> >>>
> >>> On Wed, Jun 22, 2016 at 8:05 AM, g kuczera <gk...@gmail.com> wrote:
> >>>
> >>>> Currently I got a request to add another visible column to the table
> >>> (grid
> >>>> component), but the request was for it to be placed below the rest.
> >> What
> >>> do
> >>>> you think the best approach would be in this case? I see three of
> them:
> >>>>
> >>>>   - add the mentioned column in the *include* parameter and after
> >>>>   rendering the page move it below the others (is that even possible?)
> >>>>
> >>>> <t:grid t:id="casesGrid" id="casesGrid" class="regular clear"
> >>>> source="casesDataSource" include="id, topic, date" row="currentCase"
> >>>> pagerPosition="none">
> >>>>
> >>>>   - I tried putting the regular <p> inside the <t:grid> with
> >>>>   currentCase.date value, but without having it in the include
> >>> parameter, but
> >>>>   the grid ignores that and do not render the date value
> >>>>
> >>>> <p:idCell>${currentCase.id}</p:idCell>
> >>>>
> >>>> <p:topicCell>${currentCase.topic}</p:topicCell>
> >>>>
> >>>> <p>${currentCase.date}</p>
> >>>>
> >>>>   - the last one would be using the loop component, and put the values
> >>>>   inside divs, which can be easily moved around - it would mean for me
> >>>>   changing the casesDataSource (extended GridDataSource) to something
> >>>>   different, because the loop source cannot be feed with it
> >>>>
> >>>> What do you think is possible in this case?
> >>>>
> >>>> Here is the concept art:
> >>>>
> >>>>
> >>>> ​
> >>>>
> >>>
> >>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>