How to customize the grid to show three <td>s in two rows?

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

How to customize the grid to show three <td>s in two rows?

g kuczera
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:



Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Chris Poulsen
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 <[hidden email]> 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:
>
>
> ​
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

g kuczera
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 <[hidden email]>:

> 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 <[hidden email]> 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:
> >
> >
> > ​
> >
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Chris Poulsen
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 <[hidden email]> 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 <[hidden email]>:
>
> > 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 <[hidden email]> 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:
> > >
> > >
> > > ​
> > >
> >
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

g kuczera
Thanks for the idea, Chris. I was going to make the table with styled divs
and t:Loop, but much better option is to create it with the regular table
syntax, but having two rows - just like you mentioned - inside the t:Loop.
So you saved me a lot of time.

PS: I already have it tested, so the rest is just trying to recover the
styles, which disappeared after replacing the t:Grid with t:Loop (it looks
that tapestry automatically adds, after generating the html from t:Grid,
the classes with the names of the columns eg. <td class="topic">Some kind
of topic</td>).

2016-06-22 9:50 GMT+02:00 Chris Poulsen <[hidden email]>:

> 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 <[hidden email]> 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 <[hidden email]>:
> >
> > > 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 <[hidden email]> 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:
> > > >
> > > >
> > > > ​
> > > >
> > >
> >
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Chris Poulsen
You should checkout the tapestry source (Grid, GridRows and friends) to see
how the output is generated.

--
Chris

On Wed, Jun 22, 2016 at 12:50 PM, g kuczera <[hidden email]> wrote:

> Thanks for the idea, Chris. I was going to make the table with styled divs
> and t:Loop, but much better option is to create it with the regular table
> syntax, but having two rows - just like you mentioned - inside the t:Loop.
> So you saved me a lot of time.
>
> PS: I already have it tested, so the rest is just trying to recover the
> styles, which disappeared after replacing the t:Grid with t:Loop (it looks
> that tapestry automatically adds, after generating the html from t:Grid,
> the classes with the names of the columns eg. <td class="topic">Some kind
> of topic</td>).
>
> 2016-06-22 9:50 GMT+02:00 Chris Poulsen <[hidden email]>:
>
> > 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 <[hidden email]> 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 <[hidden email]>:
> > >
> > > > 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 <[hidden email]>
> 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:
> > > > >
> > > > >
> > > > > ​
> > > > >
> > > >
> > >
> >
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Norman Franke-2
In reply to this post by Chris Poulsen
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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]>:
>>
>>> 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 <[hidden email]> 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: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

g kuczera
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 <[hidden email]>:

> 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 <[hidden email]>
> 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 <[hidden email]> 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 <[hidden email]>:
> >>
> >>> 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 <[hidden email]> 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: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Loading...