You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Ba...@Koopmanint.com on 2008/05/21 15:00:43 UTC
[Trinidad] Selecting a row in tr:table by clicking on the row
Hi List,
I'm looking for a method to select a row in a tr:table or tr:treeTable by
clicking anywhere on the row. I have a rather complex UI and I'm looking
for ways to reduce the number of controls the user sees. One thing I came
up with was removing the radio buttons in the treeTable on my page. While
the user should be able to select a single row, I thought it would be nice
if the row was selected just by clicking anywhere on the row and selection
of the row is indicated by a different background color and/or use of a
different font (bold instead of plain).
I found a proposal for this functionality as standard feature here:
http://myfaces.markmail.org/search/?q=table%20select%20row#query:table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
But this did not make in into the regular builds aparantly.
Does someone know a way to achieve this without adapting Trinidad itself.
I think it should be possible with a clever combination of skinning (CSS)
and JavaScript.
Best regards,
Bart Kummel
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Ba...@Koopmanint.com.
Hi Bill,
The Dojo component looks really powerful, but it goes far beyond what I
need. And I think it's not that straightforward to integrate it with the
trinidad components we're using. But if you can prove the contrary, I'm
interested!
Best regards,
Bart Kummel
"Zigc Junk" <zi...@gmail.com>
29-05-2008 16:58
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
"MyFaces Discussion" <us...@myfaces.apache.org>
cc
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Maybe it is easier just to use the ready-made javascript component, such
as
http://dojocampus.org/explorer/#Dojox_Grid_Basic
regards
Bill
On Thu, May 29, 2008 at 8:22 AM, <Ba...@koopmanint.com> wrote:
>
> Hi all,
>
> Yesterday I posted a couple of questions on how to change the tr:table
so
> that a row can be selected by clicking on the row instead of the radio
> buttons/checkboxes that are used by default. I figured a couple of
things
> out myself. I'll try to explain what I've accomplished so far:
>
> I've been focussing on single selection only for now.
> It's easy to hide the column with radio buttons, since the TH and TD's
in
> that column get a different CSS style class. I already have a custom
> skin.css file, if you want to know how to do that, see the skinning
> documentation on the Trinidad website. To hide the column with radio
> buttons, just add the following to your skinning css file:
> af|tableSelectOne_cell-icon-format-band {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> af|tableSelectOne_cell-icon-format {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> af|column_header-icon-format {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> To select a row by clicking on it's contents, I add an onclick
eventhandler
> to the component that renders the contents of each column. This
implicates
> that the row will not get selected when the user clicks somewhere in a
table
> cell where no contents are rendered. For example when using a
tr:outputText
> component, the code becomes:
> <tr:outputText value="#{row.someVariable}"
> onclick="${mySelectRow('#{tableId}', #{status.count});}"/>
> This calls a JavaScript function which is (in my case) defined in the
> Facelets page template. (It should be possible to include a .js file as
a
> resource, but I did not succeed in that approach yet...) Note that
there
> must be a variable tableId, containing the ID of the table. It can be
> defined like this:
> <c:set variable="tableId" value="table1"/>
> You can use it in your table declaration as well:
> <tr:table id="#{tableId}" ... >
> The script that contains the function definition looks like this:
> <script type='text/javascript' language='javascript'>
> //<![CDATA[
> function kpmSelectRow(tableName, rowIndex) {
> var n = rowIndex - 1;
> var selBox = document.getElementById(tableName+':'+n);
> selBox.checked = true;
> var selectedRow = selBox.parentNode.parentNode;
> var table = selectedRow.parentNode;
>
> var rowCount = table.rows.length;
> for (var currentRow = 0; currentRow < rowCount; currentRow++) {
> var r = table.rows[currentRow]
> if(currentRow == rowIndex) {
> if(r.className.indexOf('selectedRow') < 0) {
> r.className += ' selectedRow';
> } else {
> selBox.checked = false;
> r.className = r.className.replace(/selectedRow/g,
'');
> }
> } else {
> r.className = r.className.replace(/selectedRow/g, '');
> }
> }
> }
> //]]>
> </script>
> As you can see, this script sets a CSS class "selectedRow" on the
selected
> row and removes it again if the row gets deselected (either by clicking
it a
> second time or by clicking another row.)
> The CSS class "selectedRow" is used in the skinning CSS file, to change
the
> layout of all cells (TD's) that are contained in a selected row, like
this:
> .selectedRow td.af_column_cell-text-band {
> background-color: rgb(0, 0, 200);
> font-weight: bold;
> color: rgb(255, 255, 255);
> }
> .selectedRow td.af_column_cell-text {
> background-color: rgb(0, 0, 200);
> font-weight: bold;
> color: rgb(255, 255, 255);
> }
> Notice that we have to do it twice, because even and odd rows get
different
> CSS classes. This also gives us the possibility to use different styling
for
> selected rows, matching the "banding" colors. (As you can see, I chose
to
> keep the selected style the same, regardless of the "banding".)
>
> Following this recipe, I now have a table where a single row can be
selected
> by clicking on the contents of a cell in the row. Clicking the row a
second
> time will deselect it. Here's my list of things I want to do to make it
even
> better. Any suggestions on how to achieve these things will be highly
> appreciated...
>
> It should be possible to select a row by clicking on a cell (a TD
element,
> so not only it's contents.) I'm still searching for a way to add an
onclick
> value to a rendered TD element, but this seems hard (impossible?) to
> achieve.
> The table component remembers the selected row in several situations:
>
> when pagination is used, the selected row is remembered if the user
> navigates to another page and back to the page that contains the
selected
> row.
> when some action is performed on a selected row (for example a detail
page
> is shown) and the user returns to the table page.
>
> In these situtations, the remembered selection is not shown using my
> solution. So I'm looking for a method to re-apply my script whenever a
table
> is refreshed.
>
> When using a disabled component to render a read only value (for
instance a
> disabled checkbox to render a read only boolean value), the onclick
event
> does not get fired when clicking on the disabled component.
> I still prefer to place my JavaScript function in a separate .js file,
but I
> cannot find a method to include such a file any help on that is
appreciated
> too!
> I don't need it right now, but for the sake of completeness it would be
nice
> if I could add support for multiple select too. It shouldn't be too
hard...
>
> So far I had a lot of fun figuring this out. I improved my JavaScript
skills
> a little bit too. I'll keep the list posted of I figure out more things.
If
> anyone has an idea on improving this solution, please let met (and the
list)
> know!
>
> Best regards,
> Bart Kummel
>
>
>
> Bart.Kummel@Koopmanint.com
>
> 28-05-2008 12:52
>
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
> To
> "MyFaces Discussion" <us...@myfaces.apache.org>
> cc
> MyFaces Discussion <us...@myfaces.apache.org>
> Subject
> Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
>
>
>
> Hi all,
>
> Thanks for your replies. I agree with Shane that "richness" being a core
> feature of JSF. However, I find "if XYZ can do it, it ought to be
possible
> in Trinidad too" a somewhat tricky assumption. With the right
combination of
> Java, JavaScript, XML, etc, virtually everything is possible. But I'm
asking
> this question on a Myfaces Trinidad mailing list. The reason for that is
> that I'm looking for a solution that requires the least amount of custom
> code and will not interfer with standard Trinidad features.
>
> With some additional Googling, I found some useful bits and pieces. I
can
> now select a row by clicking on it's contents, this can be achieved by
> adding an onclick property to the tr:outputText that renders the
contents of
> a cell in the tr:table. Like this:
> onclick="var selBox = document.getElementById
> ('#{tableId}:${status.count-1}'); selBox.checked='true';
> selBox.parentNode.parentNode.className='selectedRow';"
> In this snippet tableId is the id I gave to my tr:table. status is the
> variable name I assigned to the varStatus property of the tr:table. As
you
> can see, the JavaScript code also changes the className of the parent of
the
> parent of the selection checkbox. This is actually the table row.
>
> Now I have selected a row in the table by clicking on its contents, I
have
> some additional things to do:
>
> I have to externalize the JavaScript code in a .js file. (That's not
> difficult.)
> I have to add some functionality to unselect a row. In case of a single
> selection table, this is done by selecting another row. This works
already
> for the radiobutton, but the "selectedRow" class is not yet removed from
the
> table row in that case. In case of a multiple selection table, this
should
> be done by clicking on the row again. Therefore, the current selection
state
> should be checked first. I think this is pretty straightforward,
expecially
> once I have rewritten the solution as a couple of JavaScript functions
in a
> separate .js file.
> Trinidad does not use the tr element for styling, but relies on the td
> elements only. If I change the style of the tr element, this cannot be
seen
> on the page, because the style is overridden by the style that is
defined
> for the td elements. If someone has a suggestion how to solve this,
please
> let me know. (I can think of a solution where I iterate over all TD's in
> JavaScript, but this does not sound very elegant.)
> If I succeed in implementing this solution, I still have the
> checkboxes/radiobuttons in the first column. Neither the table cell (TD)
nor
> the box/button itself get a special CSS class from Trinidad, so I cannot
> think of a simple way to hide this column using CSS only. Of course I
could
> set the "rowSelection" property of my tr:table to "none", but that way I
> would lose the selection functionality, meaning that I would have to
write
> something myself. That's not the type of solution I am looking for, as I
> want to stay with standard functionality as much as possible.
Suggestions
> are appreciated!
> Selecting a row by clikcing on its contents is a step in the right
> direction, but I'm still looking for a way to make the whole row
> "clickable". Does someone have any idea on how I can add an onclick
property
> to either the tr element or to every td element within a row? Adding an
> onclick property to the tr:column results in an onclick property on the
> table header. Anyone?
>
> That are a lot of questions in one email... I'd highly appreciate any
> suggestions / idea's.
>
> Best regards,
> Bart Kummel
>
>
> Shane Petroff <sh...@mayet.ca>
>
> 27-05-2008 17:04
>
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
>
> To
> MyFaces Discussion <us...@myfaces.apache.org>
> cc
> Subject
> Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
>
>
>
>
> Zigc Junk wrote:
> If you really need that kind of richness, you
> should use other technologies such as applet, etc.
>
>
> Huh?! Richness is the "raison d'être" for JSF; striving for desktop
features
> is the goal!
>
> I'd love to see something like this too (selection of any sort on tree
would
> be a step forward). I have to admit that neither my javascript nor css
is up
> to the task, but what about using goLinks in your nodes/column cells,
use
> whatever styleClass you are currently using on the outputText
components,
> then trigger your css changes from the link's js. You couldn't handle
> clicking on the whitespace inside the table, but it should be familiar
to
> users at least (more so than the stinking radio buttons and checkboxes
> featured by Trinidad and other frameworks) Besides, if the guys at
icefaces
> can do it, it ought not to be impossible in Trinidad (naturally,
icefaces
> doesn't have a treeTable...)
>
> http://component-showcase.icefaces.org/component-showcase/showcase.iface
> (open the "table" folder and choose "row selection")
>
> Shane
>
>
> On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> wrote:
>
> Hi List,
>
> I asked this question a couple of days ago, but still not have an answer
> from somebody who knows about the tr:table component. Even if the answer
> would be "No, that's not possible at all" I'd like to know that, because
> that saves me from searching for the impossible...
>
> Best regards,
> Bart Kummel
>
> Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
>
>
> Hi Guy,
>
> The Trinidad tr:table component (which is Trinidad's dataTable
> replacement) does not have a property rowOnClick...
>
> Best regards,
> Bart Kummel
>
> Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
>
>
> Hi Bart,
>
> I don't know about Trinidad, but for showing selected row in <t:
> dataTable> I simply saved the selected row in hidden field (you can
> store in the hidden field the id of the selected object or the row
> index). For showing the selected row you can use css and for
> clicking on the entire row you can use: rowOnClick.
> Guy.
>
> From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
> Sent: Wednesday, May 21, 2008 4:01 PM
> To: MyFaces Discussion
> Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
> Hi List,
>
> I'm looking for a method to select a row in a tr:table or tr:
> treeTable by clicking anywhere on the row. I have a rather complex
> UI and I'm looking for ways to reduce the number of controls the
> user sees. One thing I came up with was removing the radio buttons
> in the treeTable on my page. While the user should be able to select
> a single row, I thought it would be nice if the row was selected
> just by clicking anywhere on the row and selection of the row is
> indicated by a different background color and/or use of a different
> font (bold instead of plain).
>
> I found a proposal for this functionality as standard feature here:
> http://myfaces.markmail.org/search/?q=table%20select%20row#query:
> table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
> But this did not make in into the regular builds aparantly.
>
> Does someone know a way to achieve this without adapting Trinidad
> itself. I think it should be possible with a clever combination of
> skinning (CSS) and JavaScript.
>
> Best regards,
> Bart Kummel
>
>
>
>
>
> --
> Shane
>
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Zigc Junk <zi...@gmail.com>.
Maybe it is easier just to use the ready-made javascript component, such as
http://dojocampus.org/explorer/#Dojox_Grid_Basic
regards
Bill
On Thu, May 29, 2008 at 8:22 AM, <Ba...@koopmanint.com> wrote:
>
> Hi all,
>
> Yesterday I posted a couple of questions on how to change the tr:table so
> that a row can be selected by clicking on the row instead of the radio
> buttons/checkboxes that are used by default. I figured a couple of things
> out myself. I'll try to explain what I've accomplished so far:
>
> I've been focussing on single selection only for now.
> It's easy to hide the column with radio buttons, since the TH and TD's in
> that column get a different CSS style class. I already have a custom
> skin.css file, if you want to know how to do that, see the skinning
> documentation on the Trinidad website. To hide the column with radio
> buttons, just add the following to your skinning css file:
> af|tableSelectOne_cell-icon-format-band {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> af|tableSelectOne_cell-icon-format {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> af|column_header-icon-format {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> To select a row by clicking on it's contents, I add an onclick eventhandler
> to the component that renders the contents of each column. This implicates
> that the row will not get selected when the user clicks somewhere in a table
> cell where no contents are rendered. For example when using a tr:outputText
> component, the code becomes:
> <tr:outputText value="#{row.someVariable}"
> onclick="${mySelectRow('#{tableId}', #{status.count});}"/>
> This calls a JavaScript function which is (in my case) defined in the
> Facelets page template. (It should be possible to include a .js file as a
> resource, but I did not succeed in that approach yet...) Note that there
> must be a variable tableId, containing the ID of the table. It can be
> defined like this:
> <c:set variable="tableId" value="table1"/>
> You can use it in your table declaration as well:
> <tr:table id="#{tableId}" ... >
> The script that contains the function definition looks like this:
> <script type='text/javascript' language='javascript'>
> //<![CDATA[
> function kpmSelectRow(tableName, rowIndex) {
> var n = rowIndex - 1;
> var selBox = document.getElementById(tableName+':'+n);
> selBox.checked = true;
> var selectedRow = selBox.parentNode.parentNode;
> var table = selectedRow.parentNode;
>
> var rowCount = table.rows.length;
> for (var currentRow = 0; currentRow < rowCount; currentRow++) {
> var r = table.rows[currentRow]
> if(currentRow == rowIndex) {
> if(r.className.indexOf('selectedRow') < 0) {
> r.className += ' selectedRow';
> } else {
> selBox.checked = false;
> r.className = r.className.replace(/selectedRow/g, '');
> }
> } else {
> r.className = r.className.replace(/selectedRow/g, '');
> }
> }
> }
> //]]>
> </script>
> As you can see, this script sets a CSS class "selectedRow" on the selected
> row and removes it again if the row gets deselected (either by clicking it a
> second time or by clicking another row.)
> The CSS class "selectedRow" is used in the skinning CSS file, to change the
> layout of all cells (TD's) that are contained in a selected row, like this:
> .selectedRow td.af_column_cell-text-band {
> background-color: rgb(0, 0, 200);
> font-weight: bold;
> color: rgb(255, 255, 255);
> }
> .selectedRow td.af_column_cell-text {
> background-color: rgb(0, 0, 200);
> font-weight: bold;
> color: rgb(255, 255, 255);
> }
> Notice that we have to do it twice, because even and odd rows get different
> CSS classes. This also gives us the possibility to use different styling for
> selected rows, matching the "banding" colors. (As you can see, I chose to
> keep the selected style the same, regardless of the "banding".)
>
> Following this recipe, I now have a table where a single row can be selected
> by clicking on the contents of a cell in the row. Clicking the row a second
> time will deselect it. Here's my list of things I want to do to make it even
> better. Any suggestions on how to achieve these things will be highly
> appreciated...
>
> It should be possible to select a row by clicking on a cell (a TD element,
> so not only it's contents.) I'm still searching for a way to add an onclick
> value to a rendered TD element, but this seems hard (impossible?) to
> achieve.
> The table component remembers the selected row in several situations:
>
> when pagination is used, the selected row is remembered if the user
> navigates to another page and back to the page that contains the selected
> row.
> when some action is performed on a selected row (for example a detail page
> is shown) and the user returns to the table page.
>
> In these situtations, the remembered selection is not shown using my
> solution. So I'm looking for a method to re-apply my script whenever a table
> is refreshed.
>
> When using a disabled component to render a read only value (for instance a
> disabled checkbox to render a read only boolean value), the onclick event
> does not get fired when clicking on the disabled component.
> I still prefer to place my JavaScript function in a separate .js file, but I
> cannot find a method to include such a file any help on that is appreciated
> too!
> I don't need it right now, but for the sake of completeness it would be nice
> if I could add support for multiple select too. It shouldn't be too hard...
>
> So far I had a lot of fun figuring this out. I improved my JavaScript skills
> a little bit too. I'll keep the list posted of I figure out more things. If
> anyone has an idea on improving this solution, please let met (and the list)
> know!
>
> Best regards,
> Bart Kummel
>
>
>
> Bart.Kummel@Koopmanint.com
>
> 28-05-2008 12:52
>
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
> To
> "MyFaces Discussion" <us...@myfaces.apache.org>
> cc
> MyFaces Discussion <us...@myfaces.apache.org>
> Subject
> Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
>
>
>
> Hi all,
>
> Thanks for your replies. I agree with Shane that "richness" being a core
> feature of JSF. However, I find "if XYZ can do it, it ought to be possible
> in Trinidad too" a somewhat tricky assumption. With the right combination of
> Java, JavaScript, XML, etc, virtually everything is possible. But I'm asking
> this question on a Myfaces Trinidad mailing list. The reason for that is
> that I'm looking for a solution that requires the least amount of custom
> code and will not interfer with standard Trinidad features.
>
> With some additional Googling, I found some useful bits and pieces. I can
> now select a row by clicking on it's contents, this can be achieved by
> adding an onclick property to the tr:outputText that renders the contents of
> a cell in the tr:table. Like this:
> onclick="var selBox = document.getElementById
> ('#{tableId}:${status.count-1}'); selBox.checked='true';
> selBox.parentNode.parentNode.className='selectedRow';"
> In this snippet tableId is the id I gave to my tr:table. status is the
> variable name I assigned to the varStatus property of the tr:table. As you
> can see, the JavaScript code also changes the className of the parent of the
> parent of the selection checkbox. This is actually the table row.
>
> Now I have selected a row in the table by clicking on its contents, I have
> some additional things to do:
>
> I have to externalize the JavaScript code in a .js file. (That's not
> difficult.)
> I have to add some functionality to unselect a row. In case of a single
> selection table, this is done by selecting another row. This works already
> for the radiobutton, but the "selectedRow" class is not yet removed from the
> table row in that case. In case of a multiple selection table, this should
> be done by clicking on the row again. Therefore, the current selection state
> should be checked first. I think this is pretty straightforward, expecially
> once I have rewritten the solution as a couple of JavaScript functions in a
> separate .js file.
> Trinidad does not use the tr element for styling, but relies on the td
> elements only. If I change the style of the tr element, this cannot be seen
> on the page, because the style is overridden by the style that is defined
> for the td elements. If someone has a suggestion how to solve this, please
> let me know. (I can think of a solution where I iterate over all TD's in
> JavaScript, but this does not sound very elegant.)
> If I succeed in implementing this solution, I still have the
> checkboxes/radiobuttons in the first column. Neither the table cell (TD) nor
> the box/button itself get a special CSS class from Trinidad, so I cannot
> think of a simple way to hide this column using CSS only. Of course I could
> set the "rowSelection" property of my tr:table to "none", but that way I
> would lose the selection functionality, meaning that I would have to write
> something myself. That's not the type of solution I am looking for, as I
> want to stay with standard functionality as much as possible. Suggestions
> are appreciated!
> Selecting a row by clikcing on its contents is a step in the right
> direction, but I'm still looking for a way to make the whole row
> "clickable". Does someone have any idea on how I can add an onclick property
> to either the tr element or to every td element within a row? Adding an
> onclick property to the tr:column results in an onclick property on the
> table header. Anyone?
>
> That are a lot of questions in one email... I'd highly appreciate any
> suggestions / idea's.
>
> Best regards,
> Bart Kummel
>
>
> Shane Petroff <sh...@mayet.ca>
>
> 27-05-2008 17:04
>
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
>
> To
> MyFaces Discussion <us...@myfaces.apache.org>
> cc
> Subject
> Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
>
>
>
>
> Zigc Junk wrote:
> If you really need that kind of richness, you
> should use other technologies such as applet, etc.
>
>
> Huh?! Richness is the "raison d'être" for JSF; striving for desktop features
> is the goal!
>
> I'd love to see something like this too (selection of any sort on tree would
> be a step forward). I have to admit that neither my javascript nor css is up
> to the task, but what about using goLinks in your nodes/column cells, use
> whatever styleClass you are currently using on the outputText components,
> then trigger your css changes from the link's js. You couldn't handle
> clicking on the whitespace inside the table, but it should be familiar to
> users at least (more so than the stinking radio buttons and checkboxes
> featured by Trinidad and other frameworks) Besides, if the guys at icefaces
> can do it, it ought not to be impossible in Trinidad (naturally, icefaces
> doesn't have a treeTable...)
>
> http://component-showcase.icefaces.org/component-showcase/showcase.iface
> (open the "table" folder and choose "row selection")
>
> Shane
>
>
> On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> wrote:
>
> Hi List,
>
> I asked this question a couple of days ago, but still not have an answer
> from somebody who knows about the tr:table component. Even if the answer
> would be "No, that's not possible at all" I'd like to know that, because
> that saves me from searching for the impossible...
>
> Best regards,
> Bart Kummel
>
> Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
>
>
> Hi Guy,
>
> The Trinidad tr:table component (which is Trinidad's dataTable
> replacement) does not have a property rowOnClick...
>
> Best regards,
> Bart Kummel
>
> Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
>
>
> Hi Bart,
>
> I don't know about Trinidad, but for showing selected row in <t:
> dataTable> I simply saved the selected row in hidden field (you can
> store in the hidden field the id of the selected object or the row
> index). For showing the selected row you can use css and for
> clicking on the entire row you can use: rowOnClick.
> Guy.
>
> From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
> Sent: Wednesday, May 21, 2008 4:01 PM
> To: MyFaces Discussion
> Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
> Hi List,
>
> I'm looking for a method to select a row in a tr:table or tr:
> treeTable by clicking anywhere on the row. I have a rather complex
> UI and I'm looking for ways to reduce the number of controls the
> user sees. One thing I came up with was removing the radio buttons
> in the treeTable on my page. While the user should be able to select
> a single row, I thought it would be nice if the row was selected
> just by clicking anywhere on the row and selection of the row is
> indicated by a different background color and/or use of a different
> font (bold instead of plain).
>
> I found a proposal for this functionality as standard feature here:
> http://myfaces.markmail.org/search/?q=table%20select%20row#query:
> table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
> But this did not make in into the regular builds aparantly.
>
> Does someone know a way to achieve this without adapting Trinidad
> itself. I think it should be possible with a clever combination of
> skinning (CSS) and JavaScript.
>
> Best regards,
> Bart Kummel
>
>
>
>
>
> --
> Shane
>
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Ba...@Koopmanint.com.
I tried that. The 'onclick' attribute on tr:column only renders an onclick
attribute on the TH element...
"Rafa Pérez" <ra...@gmail.com>
29-05-2008 16:11
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
"MyFaces Discussion" <us...@myfaces.apache.org>
cc
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi all,
tr:column has an 'onclick' attribute that you may set.
HTH,
-- Rafa
On Thu, May 29, 2008 at 4:08 PM, Rottstock, Sven
<Sv...@sungard.de> wrote:
> Upps - forget it. It doesn't work. Sorry
>
>
> ________________________________
> SunGard Europa 2008: Complexity, Compliance & Cost
> Steigende Komplexität der Weltwirtschaft, fortschreitende Harmonisierung
der
> europäischen und weltweiten Regularien. Außerdem: Kundenzufriedenheit
> sichern und nachhaltige Profitabilität gewährleisten. Ziele, die
Unternehmen
> nur erreichen, wenn sie Strategie und Technologie fortwährend an die
neuen
> Herausforderungen anpassen. Treffen Sie Präsident Václav Havel und
lernen
> Sie, wie er Veränderungen als Chance begreift. Und wo die Chancen für
Ihr
> Unternehmen liegen.
> SunGard Europa * Prag, 16. - 18. Juni 2008 * Info & Anmeldung:
> www.sungardeuropa.com
>
> P Think before you print
> CONFIDENTIALITY: This e-mail (including any attachments) may contain
> confidential, proprietary and privileged information, and unauthorized
> disclosure or use is prohibited. If you receive this e-mail in error,
> please notify the sender and delete this e-mail from your system.
>
> SunGard CARNOT GmbH * Registered: Frankfurt am Main, Handelsregister
> Frankfurt HRB 79504 * Geschäftsführer: Harold Finders, Dr. Marc Gille,
Dr.
> Dirk Lüth, Michael J. Ruane, Victoria Elizabeth Silbey
>
>
> ________________________________
> Von: Rottstock, Sven [mailto:Sven.Rottstock@sungard.de]
> Gesendet: Donnerstag, 29. Mai 2008 15:42
> An: MyFaces Discussion
> Betreff: AW: [Trinidad] Selecting a row in tr:table by clicking on the
row
>
> Hi,
>
> just a little improvement: It is not necessary to set a tableId via
> <c:set/>. Your JS Function will also work if you set the parameter as
> follows:
> mySelectRow(this.id, #{status.count});
>
> Regards,
>
> Sven
>
>
> ________________________________
> SunGard Europa 2008: Complexity, Compliance & Cost
> Steigende Komplexität der Weltwirtschaft, fortschreitende Harmonisierung
der
> europäischen und weltweiten Regularien. Außerdem: Kundenzufriedenheit
> sichern und nachhaltige Profitabilität gewährleisten. Ziele, die
Unternehmen
> nur erreichen, wenn sie Strategie und Technologie fortwährend an die
neuen
> Herausforderungen anpassen. Treffen Sie Präsident Václav Havel und
lernen
> Sie, wie er Veränderungen als Chance begreift. Und wo die Chancen für
Ihr
> Unternehmen liegen.
> SunGard Europa * Prag, 16. - 18. Juni 2008 * Info & Anmeldung:
> www.sungardeuropa.com
>
> P Think before you print
> CONFIDENTIALITY: This e-mail (including any attachments) may contain
> confidential, proprietary and privileged information, and unauthorized
> disclosure or use is prohibited. If you receive this e-mail in error,
> please notify the sender and delete this e-mail from your system.
>
> SunGard CARNOT GmbH * Registered: Frankfurt am Main, Handelsregister
> Frankfurt HRB 79504 * Geschäftsführer: Harold Finders, Dr. Marc Gille,
Dr.
> Dirk Lüth, Michael J. Ruane, Victoria Elizabeth Silbey
>
>
> ________________________________
> Von: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
> Gesendet: Donnerstag, 29. Mai 2008 15:23
> An: MyFaces Discussion
> Cc: MyFaces Discussion
> Betreff: Re: [Trinidad] Selecting a row in tr:table by clicking on the
row
>
>
> Hi all,
>
> Yesterday I posted a couple of questions on how to change the tr:table
so
> that a row can be selected by clicking on the row instead of the radio
> buttons/checkboxes that are used by default. I figured a couple of
things
> out myself. I'll try to explain what I've accomplished so far:
>
> I've been focussing on single selection only for now.
> It's easy to hide the column with radio buttons, since the TH and TD's
in
> that column get a different CSS style class. I already have a custom
> skin.css file, if you want to know how to do that, see the skinning
> documentation on the Trinidad website. To hide the column with radio
> buttons, just add the following to your skinning css file:
> af|tableSelectOne_cell-icon-format-band {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> af|tableSelectOne_cell-icon-format {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> af|column_header-icon-format {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> To select a row by clicking on it's contents, I add an onclick
eventhandler
> to the component that renders the contents of each column. This
implicates
> that the row will not get selected when the user clicks somewhere in a
table
> cell where no contents are rendered. For example when using a
tr:outputText
> component, the code becomes:
> <tr:outputText value="#{row.someVariable}"
> onclick="${mySelectRow('#{tableId}', #{status.count});}"/>
> This calls a JavaScript function which is (in my case) defined in the
> Facelets page template. (It should be possible to include a .js file as
a
> resource, but I did not succeed in that approach yet...) Note that
there
> must be a variable tableId, containing the ID of the table. It can be
> defined like this:
> <c:set variable="tableId" value="table1"/>
> You can use it in your table declaration as well:
> <tr:table id="#{tableId}" ... >
> The script that contains the function definition looks like this:
> <script type='text/javascript' language='javascript'>
> //<![CDATA[
> function kpmSelectRow(tableName, rowIndex) {
> var n = rowIndex - 1;
> var selBox = document.getElementById(tableName+':'+n);
> selBox.checked = true;
> var selectedRow = selBox.parentNode.parentNode;
> var table = selectedRow.parentNode;
>
> var rowCount = table.rows.length;
> for (var currentRow = 0; currentRow < rowCount; currentRow++) {
> var r = table.rows[currentRow]
> if(currentRow == rowIndex) {
> if(r.className.indexOf('selectedRow') < 0) {
> r.className += ' selectedRow';
> } else {
> selBox.checked = false;
> r.className = r.className.replace(/selectedRow/g,
'');
> }
> } else {
> r.className = r.className.replace(/selectedRow/g, '');
> }
> }
> }
> //]]>
> </script>
> As you can see, this script sets a CSS class "selectedRow" on the
selected
> row and removes it again if the row gets deselected (either by clicking
it a
> second time or by clicking another row.)
> The CSS class "selectedRow" is used in the skinning CSS file, to change
the
> layout of all cells (TD's) that are contained in a selected row, like
this:
> .selectedRow td.af_column_cell-text-band {
> background-color: rgb(0, 0, 200);
> font-weight: bold;
> color: rgb(255, 255, 255);
> }
> .selectedRow td.af_column_cell-text {
> background-color: rgb(0, 0, 200);
> font-weight: bold;
> color: rgb(255, 255, 255);
> }
> Notice that we have to do it twice, because even and odd rows get
different
> CSS classes. This also gives us the possibility to use different styling
for
> selected rows, matching the "banding" colors. (As you can see, I chose
to
> keep the selected style the same, regardless of the "banding".)
>
> Following this recipe, I now have a table where a single row can be
selected
> by clicking on the contents of a cell in the row. Clicking the row a
second
> time will deselect it. Here's my list of things I want to do to make it
even
> better. Any suggestions on how to achieve these things will be highly
> appreciated...
>
> It should be possible to select a row by clicking on a cell (a TD
element,
> so not only it's contents.) I'm still searching for a way to add an
onclick
> value to a rendered TD element, but this seems hard (impossible?) to
> achieve.
> The table component remembers the selected row in several situations:
>
> when pagination is used, the selected row is remembered if the user
> navigates to another page and back to the page that contains the
selected
> row.
> when some action is performed on a selected row (for example a detail
page
> is shown) and the user returns to the table page.
>
> In these situtations, the remembered selection is not shown using my
> solution. So I'm looking for a method to re-apply my script whenever a
table
> is refreshed.
>
> When using a disabled component to render a read only value (for
instance a
> disabled checkbox to render a read only boolean value), the onclick
event
> does not get fired when clicking on the disabled component.
> I still prefer to place my JavaScript function in a separate .js file,
but I
> cannot find a method to include such a file any help on that is
appreciated
> too!
> I don't need it right now, but for the sake of completeness it would be
nice
> if I could add support for multiple select too. It shouldn't be too
hard...
>
> So far I had a lot of fun figuring this out. I improved my JavaScript
skills
> a little bit too. I'll keep the list posted of I figure out more things.
If
> anyone has an idea on improving this solution, please let met (and the
list)
> know!
>
> Best regards,
> Bart Kummel
>
>
>
> Bart.Kummel@Koopmanint.com
>
> 28-05-2008 12:52
>
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
> To
> "MyFaces Discussion" <us...@myfaces.apache.org>
> cc
> MyFaces Discussion <us...@myfaces.apache.org>
> Subject
> Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
>
>
>
> Hi all,
>
> Thanks for your replies. I agree with Shane that "richness" being a core
> feature of JSF. However, I find "if XYZ can do it, it ought to be
possible
> in Trinidad too" a somewhat tricky assumption. With the right
combination of
> Java, JavaScript, XML, etc, virtually everything is possible. But I'm
asking
> this question on a Myfaces Trinidad mailing list. The reason for that is
> that I'm looking for a solution that requires the least amount of custom
> code and will not interfer with standard Trinidad features.
>
> With some additional Googling, I found some useful bits and pieces. I
can
> now select a row by clicking on it's contents, this can be achieved by
> adding an onclick property to the tr:outputText that renders the
contents of
> a cell in the tr:table. Like this:
> onclick="var selBox = document.getElementById
> ('#{tableId}:${status.count-1}'); selBox.checked='true';
> selBox.parentNode.parentNode.className='selectedRow';"
> In this snippet tableId is the id I gave to my tr:table. status is the
> variable name I assigned to the varStatus property of the tr:table. As
you
> can see, the JavaScript code also changes the className of the parent of
the
> parent of the selection checkbox. This is actually the table row.
>
> Now I have selected a row in the table by clicking on its contents, I
have
> some additional things to do:
>
> I have to externalize the JavaScript code in a .js file. (That's not
> difficult.)
> I have to add some functionality to unselect a row. In case of a single
> selection table, this is done by selecting another row. This works
already
> for the radiobutton, but the "selectedRow" class is not yet removed from
the
> table row in that case. In case of a multiple selection table, this
should
> be done by clicking on the row again. Therefore, the current selection
state
> should be checked first. I think this is pretty straightforward,
expecially
> once I have rewritten the solution as a couple of JavaScript functions
in a
> separate .js file.
> Trinidad does not use the tr element for styling, but relies on the td
> elements only. If I change the style of the tr element, this cannot be
seen
> on the page, because the style is overridden by the style that is
defined
> for the td elements. If someone has a suggestion how to solve this,
please
> let me know. (I can think of a solution where I iterate over all TD's in
> JavaScript, but this does not sound very elegant.)
> If I succeed in implementing this solution, I still have the
> checkboxes/radiobuttons in the first column. Neither the table cell (TD)
nor
> the box/button itself get a special CSS class from Trinidad, so I cannot
> think of a simple way to hide this column using CSS only. Of course I
could
> set the "rowSelection" property of my tr:table to "none", but that way I
> would lose the selection functionality, meaning that I would have to
write
> something myself. That's not the type of solution I am looking for, as I
> want to stay with standard functionality as much as possible.
Suggestions
> are appreciated!
> Selecting a row by clikcing on its contents is a step in the right
> direction, but I'm still looking for a way to make the whole row
> "clickable". Does someone have any idea on how I can add an onclick
property
> to either the tr element or to every td element within a row? Adding an
> onclick property to the tr:column results in an onclick property on the
> table header. Anyone?
>
> That are a lot of questions in one email... I'd highly appreciate any
> suggestions / idea's.
>
> Best regards,
> Bart Kummel
>
>
> Shane Petroff <sh...@mayet.ca>
>
> 27-05-2008 17:04
>
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
>
> To
> MyFaces Discussion <us...@myfaces.apache.org>
> cc
> Subject
> Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
>
>
>
>
> Zigc Junk wrote:
> If you really need that kind of richness, you
> should use other technologies such as applet, etc.
>
>
> Huh?! Richness is the "raison d'être" for JSF; striving for desktop
features
> is the goal!
>
> I'd love to see something like this too (selection of any sort on tree
would
> be a step forward). I have to admit that neither my javascript nor css
is up
> to the task, but what about using goLinks in your nodes/column cells,
use
> whatever styleClass you are currently using on the outputText
components,
> then trigger your css changes from the link's js. You couldn't handle
> clicking on the whitespace inside the table, but it should be familiar
to
> users at least (more so than the stinking radio buttons and checkboxes
> featured by Trinidad and other frameworks) Besides, if the guys at
icefaces
> can do it, it ought not to be impossible in Trinidad (naturally,
icefaces
> doesn't have a treeTable...)
>
> http://component-showcase.icefaces.org/component-showcase/showcase.iface
> (open the "table" folder and choose "row selection")
>
> Shane
>
>
> On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> wrote:
>
> Hi List,
>
> I asked this question a couple of days ago, but still not have an answer
> from somebody who knows about the tr:table component. Even if the answer
> would be "No, that's not possible at all" I'd like to know that, because
> that saves me from searching for the impossible...
>
> Best regards,
> Bart Kummel
>
> Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
>
>
> Hi Guy,
>
> The Trinidad tr:table component (which is Trinidad's dataTable
> replacement) does not have a property rowOnClick...
>
> Best regards,
> Bart Kummel
>
> Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
>
>
> Hi Bart,
>
> I don't know about Trinidad, but for showing selected row in <t:
> dataTable> I simply saved the selected row in hidden field (you can
> store in the hidden field the id of the selected object or the row
> index). For showing the selected row you can use css and for
> clicking on the entire row you can use: rowOnClick.
> Guy.
>
> From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
> Sent: Wednesday, May 21, 2008 4:01 PM
> To: MyFaces Discussion
> Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
> Hi List,
>
> I'm looking for a method to select a row in a tr:table or tr:
> treeTable by clicking anywhere on the row. I have a rather complex
> UI and I'm looking for ways to reduce the number of controls the
> user sees. One thing I came up with was removing the radio buttons
> in the treeTable on my page. While the user should be able to select
> a single row, I thought it would be nice if the row was selected
> just by clicking anywhere on the row and selection of the row is
> indicated by a different background color and/or use of a different
> font (bold instead of plain).
>
> I found a proposal for this functionality as standard feature here:
> http://myfaces.markmail.org/search/?q=table%20select%20row#query:
> table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
> But this did not make in into the regular builds aparantly.
>
> Does someone know a way to achieve this without adapting Trinidad
> itself. I think it should be possible with a clever combination of
> skinning (CSS) and JavaScript.
>
> Best regards,
> Bart Kummel
>
>
>
>
>
> --
> Shane
>
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Rafa Pérez <ra...@gmail.com>.
Hi all,
tr:column has an 'onclick' attribute that you may set.
HTH,
-- Rafa
On Thu, May 29, 2008 at 4:08 PM, Rottstock, Sven
<Sv...@sungard.de> wrote:
> Upps - forget it. It doesn't work. Sorry
>
>
> ________________________________
> SunGard Europa 2008: Complexity, Compliance & Cost
> Steigende Komplexität der Weltwirtschaft, fortschreitende Harmonisierung der
> europäischen und weltweiten Regularien. Außerdem: Kundenzufriedenheit
> sichern und nachhaltige Profitabilität gewährleisten. Ziele, die Unternehmen
> nur erreichen, wenn sie Strategie und Technologie fortwährend an die neuen
> Herausforderungen anpassen. Treffen Sie Präsident Václav Havel und lernen
> Sie, wie er Veränderungen als Chance begreift. Und wo die Chancen für Ihr
> Unternehmen liegen.
> SunGard Europa * Prag, 16. - 18. Juni 2008 * Info & Anmeldung:
> www.sungardeuropa.com
>
> P Think before you print
> CONFIDENTIALITY: This e-mail (including any attachments) may contain
> confidential, proprietary and privileged information, and unauthorized
> disclosure or use is prohibited. If you receive this e-mail in error,
> please notify the sender and delete this e-mail from your system.
>
> SunGard CARNOT GmbH * Registered: Frankfurt am Main, Handelsregister
> Frankfurt HRB 79504 * Geschäftsführer: Harold Finders, Dr. Marc Gille, Dr.
> Dirk Lüth, Michael J. Ruane, Victoria Elizabeth Silbey
>
>
> ________________________________
> Von: Rottstock, Sven [mailto:Sven.Rottstock@sungard.de]
> Gesendet: Donnerstag, 29. Mai 2008 15:42
> An: MyFaces Discussion
> Betreff: AW: [Trinidad] Selecting a row in tr:table by clicking on the row
>
> Hi,
>
> just a little improvement: It is not necessary to set a tableId via
> <c:set/>. Your JS Function will also work if you set the parameter as
> follows:
> mySelectRow(this.id, #{status.count});
>
> Regards,
>
> Sven
>
>
> ________________________________
> SunGard Europa 2008: Complexity, Compliance & Cost
> Steigende Komplexität der Weltwirtschaft, fortschreitende Harmonisierung der
> europäischen und weltweiten Regularien. Außerdem: Kundenzufriedenheit
> sichern und nachhaltige Profitabilität gewährleisten. Ziele, die Unternehmen
> nur erreichen, wenn sie Strategie und Technologie fortwährend an die neuen
> Herausforderungen anpassen. Treffen Sie Präsident Václav Havel und lernen
> Sie, wie er Veränderungen als Chance begreift. Und wo die Chancen für Ihr
> Unternehmen liegen.
> SunGard Europa * Prag, 16. - 18. Juni 2008 * Info & Anmeldung:
> www.sungardeuropa.com
>
> P Think before you print
> CONFIDENTIALITY: This e-mail (including any attachments) may contain
> confidential, proprietary and privileged information, and unauthorized
> disclosure or use is prohibited. If you receive this e-mail in error,
> please notify the sender and delete this e-mail from your system.
>
> SunGard CARNOT GmbH * Registered: Frankfurt am Main, Handelsregister
> Frankfurt HRB 79504 * Geschäftsführer: Harold Finders, Dr. Marc Gille, Dr.
> Dirk Lüth, Michael J. Ruane, Victoria Elizabeth Silbey
>
>
> ________________________________
> Von: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
> Gesendet: Donnerstag, 29. Mai 2008 15:23
> An: MyFaces Discussion
> Cc: MyFaces Discussion
> Betreff: Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
> Hi all,
>
> Yesterday I posted a couple of questions on how to change the tr:table so
> that a row can be selected by clicking on the row instead of the radio
> buttons/checkboxes that are used by default. I figured a couple of things
> out myself. I'll try to explain what I've accomplished so far:
>
> I've been focussing on single selection only for now.
> It's easy to hide the column with radio buttons, since the TH and TD's in
> that column get a different CSS style class. I already have a custom
> skin.css file, if you want to know how to do that, see the skinning
> documentation on the Trinidad website. To hide the column with radio
> buttons, just add the following to your skinning css file:
> af|tableSelectOne_cell-icon-format-band {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> af|tableSelectOne_cell-icon-format {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> af|column_header-icon-format {
> display: none;
> visibility: hidden;
> width: 0px;
> }
> To select a row by clicking on it's contents, I add an onclick eventhandler
> to the component that renders the contents of each column. This implicates
> that the row will not get selected when the user clicks somewhere in a table
> cell where no contents are rendered. For example when using a tr:outputText
> component, the code becomes:
> <tr:outputText value="#{row.someVariable}"
> onclick="${mySelectRow('#{tableId}', #{status.count});}"/>
> This calls a JavaScript function which is (in my case) defined in the
> Facelets page template. (It should be possible to include a .js file as a
> resource, but I did not succeed in that approach yet...) Note that there
> must be a variable tableId, containing the ID of the table. It can be
> defined like this:
> <c:set variable="tableId" value="table1"/>
> You can use it in your table declaration as well:
> <tr:table id="#{tableId}" ... >
> The script that contains the function definition looks like this:
> <script type='text/javascript' language='javascript'>
> //<![CDATA[
> function kpmSelectRow(tableName, rowIndex) {
> var n = rowIndex - 1;
> var selBox = document.getElementById(tableName+':'+n);
> selBox.checked = true;
> var selectedRow = selBox.parentNode.parentNode;
> var table = selectedRow.parentNode;
>
> var rowCount = table.rows.length;
> for (var currentRow = 0; currentRow < rowCount; currentRow++) {
> var r = table.rows[currentRow]
> if(currentRow == rowIndex) {
> if(r.className.indexOf('selectedRow') < 0) {
> r.className += ' selectedRow';
> } else {
> selBox.checked = false;
> r.className = r.className.replace(/selectedRow/g, '');
> }
> } else {
> r.className = r.className.replace(/selectedRow/g, '');
> }
> }
> }
> //]]>
> </script>
> As you can see, this script sets a CSS class "selectedRow" on the selected
> row and removes it again if the row gets deselected (either by clicking it a
> second time or by clicking another row.)
> The CSS class "selectedRow" is used in the skinning CSS file, to change the
> layout of all cells (TD's) that are contained in a selected row, like this:
> .selectedRow td.af_column_cell-text-band {
> background-color: rgb(0, 0, 200);
> font-weight: bold;
> color: rgb(255, 255, 255);
> }
> .selectedRow td.af_column_cell-text {
> background-color: rgb(0, 0, 200);
> font-weight: bold;
> color: rgb(255, 255, 255);
> }
> Notice that we have to do it twice, because even and odd rows get different
> CSS classes. This also gives us the possibility to use different styling for
> selected rows, matching the "banding" colors. (As you can see, I chose to
> keep the selected style the same, regardless of the "banding".)
>
> Following this recipe, I now have a table where a single row can be selected
> by clicking on the contents of a cell in the row. Clicking the row a second
> time will deselect it. Here's my list of things I want to do to make it even
> better. Any suggestions on how to achieve these things will be highly
> appreciated...
>
> It should be possible to select a row by clicking on a cell (a TD element,
> so not only it's contents.) I'm still searching for a way to add an onclick
> value to a rendered TD element, but this seems hard (impossible?) to
> achieve.
> The table component remembers the selected row in several situations:
>
> when pagination is used, the selected row is remembered if the user
> navigates to another page and back to the page that contains the selected
> row.
> when some action is performed on a selected row (for example a detail page
> is shown) and the user returns to the table page.
>
> In these situtations, the remembered selection is not shown using my
> solution. So I'm looking for a method to re-apply my script whenever a table
> is refreshed.
>
> When using a disabled component to render a read only value (for instance a
> disabled checkbox to render a read only boolean value), the onclick event
> does not get fired when clicking on the disabled component.
> I still prefer to place my JavaScript function in a separate .js file, but I
> cannot find a method to include such a file any help on that is appreciated
> too!
> I don't need it right now, but for the sake of completeness it would be nice
> if I could add support for multiple select too. It shouldn't be too hard...
>
> So far I had a lot of fun figuring this out. I improved my JavaScript skills
> a little bit too. I'll keep the list posted of I figure out more things. If
> anyone has an idea on improving this solution, please let met (and the list)
> know!
>
> Best regards,
> Bart Kummel
>
>
>
> Bart.Kummel@Koopmanint.com
>
> 28-05-2008 12:52
>
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
> To
> "MyFaces Discussion" <us...@myfaces.apache.org>
> cc
> MyFaces Discussion <us...@myfaces.apache.org>
> Subject
> Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
>
>
>
> Hi all,
>
> Thanks for your replies. I agree with Shane that "richness" being a core
> feature of JSF. However, I find "if XYZ can do it, it ought to be possible
> in Trinidad too" a somewhat tricky assumption. With the right combination of
> Java, JavaScript, XML, etc, virtually everything is possible. But I'm asking
> this question on a Myfaces Trinidad mailing list. The reason for that is
> that I'm looking for a solution that requires the least amount of custom
> code and will not interfer with standard Trinidad features.
>
> With some additional Googling, I found some useful bits and pieces. I can
> now select a row by clicking on it's contents, this can be achieved by
> adding an onclick property to the tr:outputText that renders the contents of
> a cell in the tr:table. Like this:
> onclick="var selBox = document.getElementById
> ('#{tableId}:${status.count-1}'); selBox.checked='true';
> selBox.parentNode.parentNode.className='selectedRow';"
> In this snippet tableId is the id I gave to my tr:table. status is the
> variable name I assigned to the varStatus property of the tr:table. As you
> can see, the JavaScript code also changes the className of the parent of the
> parent of the selection checkbox. This is actually the table row.
>
> Now I have selected a row in the table by clicking on its contents, I have
> some additional things to do:
>
> I have to externalize the JavaScript code in a .js file. (That's not
> difficult.)
> I have to add some functionality to unselect a row. In case of a single
> selection table, this is done by selecting another row. This works already
> for the radiobutton, but the "selectedRow" class is not yet removed from the
> table row in that case. In case of a multiple selection table, this should
> be done by clicking on the row again. Therefore, the current selection state
> should be checked first. I think this is pretty straightforward, expecially
> once I have rewritten the solution as a couple of JavaScript functions in a
> separate .js file.
> Trinidad does not use the tr element for styling, but relies on the td
> elements only. If I change the style of the tr element, this cannot be seen
> on the page, because the style is overridden by the style that is defined
> for the td elements. If someone has a suggestion how to solve this, please
> let me know. (I can think of a solution where I iterate over all TD's in
> JavaScript, but this does not sound very elegant.)
> If I succeed in implementing this solution, I still have the
> checkboxes/radiobuttons in the first column. Neither the table cell (TD) nor
> the box/button itself get a special CSS class from Trinidad, so I cannot
> think of a simple way to hide this column using CSS only. Of course I could
> set the "rowSelection" property of my tr:table to "none", but that way I
> would lose the selection functionality, meaning that I would have to write
> something myself. That's not the type of solution I am looking for, as I
> want to stay with standard functionality as much as possible. Suggestions
> are appreciated!
> Selecting a row by clikcing on its contents is a step in the right
> direction, but I'm still looking for a way to make the whole row
> "clickable". Does someone have any idea on how I can add an onclick property
> to either the tr element or to every td element within a row? Adding an
> onclick property to the tr:column results in an onclick property on the
> table header. Anyone?
>
> That are a lot of questions in one email... I'd highly appreciate any
> suggestions / idea's.
>
> Best regards,
> Bart Kummel
>
>
> Shane Petroff <sh...@mayet.ca>
>
> 27-05-2008 17:04
>
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
>
> To
> MyFaces Discussion <us...@myfaces.apache.org>
> cc
> Subject
> Re: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
>
>
>
>
> Zigc Junk wrote:
> If you really need that kind of richness, you
> should use other technologies such as applet, etc.
>
>
> Huh?! Richness is the "raison d'être" for JSF; striving for desktop features
> is the goal!
>
> I'd love to see something like this too (selection of any sort on tree would
> be a step forward). I have to admit that neither my javascript nor css is up
> to the task, but what about using goLinks in your nodes/column cells, use
> whatever styleClass you are currently using on the outputText components,
> then trigger your css changes from the link's js. You couldn't handle
> clicking on the whitespace inside the table, but it should be familiar to
> users at least (more so than the stinking radio buttons and checkboxes
> featured by Trinidad and other frameworks) Besides, if the guys at icefaces
> can do it, it ought not to be impossible in Trinidad (naturally, icefaces
> doesn't have a treeTable...)
>
> http://component-showcase.icefaces.org/component-showcase/showcase.iface
> (open the "table" folder and choose "row selection")
>
> Shane
>
>
> On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> wrote:
>
> Hi List,
>
> I asked this question a couple of days ago, but still not have an answer
> from somebody who knows about the tr:table component. Even if the answer
> would be "No, that's not possible at all" I'd like to know that, because
> that saves me from searching for the impossible...
>
> Best regards,
> Bart Kummel
>
> Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
>
>
> Hi Guy,
>
> The Trinidad tr:table component (which is Trinidad's dataTable
> replacement) does not have a property rowOnClick...
>
> Best regards,
> Bart Kummel
>
> Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
>
>
> Hi Bart,
>
> I don't know about Trinidad, but for showing selected row in <t:
> dataTable> I simply saved the selected row in hidden field (you can
> store in the hidden field the id of the selected object or the row
> index). For showing the selected row you can use css and for
> clicking on the entire row you can use: rowOnClick.
> Guy.
>
> From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
> Sent: Wednesday, May 21, 2008 4:01 PM
> To: MyFaces Discussion
> Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
> Hi List,
>
> I'm looking for a method to select a row in a tr:table or tr:
> treeTable by clicking anywhere on the row. I have a rather complex
> UI and I'm looking for ways to reduce the number of controls the
> user sees. One thing I came up with was removing the radio buttons
> in the treeTable on my page. While the user should be able to select
> a single row, I thought it would be nice if the row was selected
> just by clicking anywhere on the row and selection of the row is
> indicated by a different background color and/or use of a different
> font (bold instead of plain).
>
> I found a proposal for this functionality as standard feature here:
> http://myfaces.markmail.org/search/?q=table%20select%20row#query:
> table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
> But this did not make in into the regular builds aparantly.
>
> Does someone know a way to achieve this without adapting Trinidad
> itself. I think it should be possible with a clever combination of
> skinning (CSS) and JavaScript.
>
> Best regards,
> Bart Kummel
>
>
>
>
>
> --
> Shane
>
AW: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by "Rottstock, Sven" <Sv...@sungard.de>.
Upps - forget it. It doesn't work. Sorry
_______________________________
SunGard Europa 2008: Complexity, Compliance & Cost
Steigende Komplexität der Weltwirtschaft, fortschreitende Harmonisierung der europäischen und weltweiten Regularien. Außerdem: Kundenzufriedenheit sichern und nachhaltige Profitabilität gewährleisten.
Ziele, die Unternehmen nur erreichen, wenn sie Strategie und Technologie fortwährend an die neuen Herausforderungen anpassen. Treffen Sie Präsident Václav Havel und lernen Sie, wie er Veränderungen als Chance begreift. Und wo die Chancen für Ihr Unternehmen liegen.
SunGard Europa . Prag, 16. - 18. Juni 2008 . Info & Anmeldung: www.sungardeuropa.com
Think before you print
CONFIDENTIALITY: This e-mail (including any attachments) may contain confidential, proprietary and privileged information, and unauthorized disclosure or use is prohibited. If you receive this e-mail in error, please notify the sender and delete this e-mail from your system.
SunGard CARNOT GmbH * Registered: Frankfurt am Main, Handelsregister Frankfurt HRB 79504 * Geschäftsführer: Harold Finders, Dr. Marc Gille, Dr. Dirk Lüth, Michael J. Ruane, Victoria Elizabeth Silbey
________________________________
Von: Rottstock, Sven [mailto:Sven.Rottstock@sungard.de]
Gesendet: Donnerstag, 29. Mai 2008 15:42
An: MyFaces Discussion
Betreff: AW: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi,
just a little improvement: It is not necessary to set a tableId via <c:set/>. Your JS Function will also work if you set the parameter as follows:
mySelectRow(this.id, #{status.count});
Regards,
Sven
________________________________
SunGard Europa 2008: Complexity, Compliance & Cost
Steigende Komplexität der Weltwirtschaft, fortschreitende Harmonisierung der europäischen und weltweiten Regularien. Außerdem: Kundenzufriedenheit sichern und nachhaltige Profitabilität gewährleisten. Ziele, die Unternehmen nur erreichen, wenn sie Strategie und Technologie fortwährend an die neuen Herausforderungen anpassen. Treffen Sie Präsident Václav Havel und lernen Sie, wie er Veränderungen als Chance begreift. Und wo die Chancen für Ihr Unternehmen liegen.
SunGard Europa * Prag, 16. - 18. Juni 2008 * Info & Anmeldung: www.sungardeuropa.com
P Think before you print
CONFIDENTIALITY: This e-mail (including any attachments) may contain confidential, proprietary and privileged information, and unauthorized disclosure or use is prohibited. If you receive this e-mail in error, please notify the sender and delete this e-mail from your system.
SunGard CARNOT GmbH * Registered: Frankfurt am Main, Handelsregister Frankfurt HRB 79504 * Geschäftsführer: Harold Finders, Dr. Marc Gille, Dr. Dirk Lüth, Michael J. Ruane, Victoria Elizabeth Silbey
________________________________
Von: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
Gesendet: Donnerstag, 29. Mai 2008 15:23
An: MyFaces Discussion
Cc: MyFaces Discussion
Betreff: Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi all,
Yesterday I posted a couple of questions on how to change the tr:table so that a row can be selected by clicking on the row instead of the radio buttons/checkboxes that are used by default. I figured a couple of things out myself. I'll try to explain what I've accomplished so far:
* I've been focussing on single selection only for now.
* It's easy to hide the column with radio buttons, since the TH and TD's in that column get a different CSS style class. I already have a custom skin.css file, if you want to know how to do that, see the skinning documentation on the Trinidad website. To hide the column with radio buttons, just add the following to your skinning css file:
af|tableSelectOne_cell-icon-format-band {
display: none;
visibility: hidden;
width: 0px;
}
af|tableSelectOne_cell-icon-format {
display: none;
visibility: hidden;
width: 0px;
}
af|column_header-icon-format {
display: none;
visibility: hidden;
width: 0px;
}
* To select a row by clicking on it's contents, I add an onclick eventhandler to the component that renders the contents of each column. This implicates that the row will not get selected when the user clicks somewhere in a table cell where no contents are rendered. For example when using a tr:outputText component, the code becomes:
<tr:outputText value="#{row.someVariable}" onclick="${mySelectRow('#{tableId}', #{status.count});}"/>
This calls a JavaScript function which is (in my case) defined in the Facelets page template. (It should be possible to include a .js file as a resource, but I did not succeed in that approach yet...) Note that there must be a variable tableId, containing the ID of the table. It can be defined like this:
<c:set variable="tableId" value="table1"/>
You can use it in your table declaration as well:
<tr:table id="#{tableId}" ... >
* The script that contains the function definition looks like this:
<script type='text/javascript' language='javascript'>
//<![CDATA[
function kpmSelectRow(tableName, rowIndex) {
var n = rowIndex - 1;
var selBox = document.getElementById(tableName+':'+n);
selBox.checked = true;
var selectedRow = selBox.parentNode.parentNode;
var table = selectedRow.parentNode;
var rowCount = table.rows.length;
for (var currentRow = 0; currentRow < rowCount; currentRow++) {
var r = table.rows[currentRow]
if(currentRow == rowIndex) {
if(r.className.indexOf('selectedRow') < 0) {
r.className += ' selectedRow';
} else {
selBox.checked = false;
r.className = r.className.replace(/selectedRow/g, '');
}
} else {
r.className = r.className.replace(/selectedRow/g, '');
}
}
}
//]]>
</script>
As you can see, this script sets a CSS class "selectedRow" on the selected row and removes it again if the row gets deselected (either by clicking it a second time or by clicking another row.)
* The CSS class "selectedRow" is used in the skinning CSS file, to change the layout of all cells (TD's) that are contained in a selected row, like this:
.selectedRow td.af_column_cell-text-band {
background-color: rgb(0, 0, 200);
font-weight: bold;
color: rgb(255, 255, 255);
}
.selectedRow td.af_column_cell-text {
background-color: rgb(0, 0, 200);
font-weight: bold;
color: rgb(255, 255, 255);
}
Notice that we have to do it twice, because even and odd rows get different CSS classes. This also gives us the possibility to use different styling for selected rows, matching the "banding" colors. (As you can see, I chose to keep the selected style the same, regardless of the "banding".)
Following this recipe, I now have a table where a single row can be selected by clicking on the contents of a cell in the row. Clicking the row a second time will deselect it. Here's my list of things I want to do to make it even better. Any suggestions on how to achieve these things will be highly appreciated...
* It should be possible to select a row by clicking on a cell (a TD element, so not only it's contents.) I'm still searching for a way to add an onclick value to a rendered TD element, but this seems hard (impossible?) to achieve.
* The table component remembers the selected row in several situations:
* when pagination is used, the selected row is remembered if the user navigates to another page and back to the page that contains the selected row.
* when some action is performed on a selected row (for example a detail page is shown) and the user returns to the table page.
In these situtations, the remembered selection is not shown using my solution. So I'm looking for a method to re-apply my script whenever a table is refreshed.
* When using a disabled component to render a read only value (for instance a disabled checkbox to render a read only boolean value), the onclick event does not get fired when clicking on the disabled component.
* I still prefer to place my JavaScript function in a separate .js file, but I cannot find a method to include such a file any help on that is appreciated too!
* I don't need it right now, but for the sake of completeness it would be nice if I could add support for multiple select too. It shouldn't be too hard...
So far I had a lot of fun figuring this out. I improved my JavaScript skills a little bit too. I'll keep the list posted of I figure out more things. If anyone has an idea on improving this solution, please let met (and the list) know!
Best regards,
Bart Kummel
Bart.Kummel@Koopmanint.com
28-05-2008 12:52
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
"MyFaces Discussion" <us...@myfaces.apache.org>
cc
MyFaces Discussion <us...@myfaces.apache.org>
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi all,
Thanks for your replies. I agree with Shane that "richness" being a core feature of JSF. However, I find "if XYZ can do it, it ought to be possible in Trinidad too" a somewhat tricky assumption. With the right combination of Java, JavaScript, XML, etc, virtually everything is possible. But I'm asking this question on a Myfaces Trinidad mailing list. The reason for that is that I'm looking for a solution that requires the least amount of custom code and will not interfer with standard Trinidad features.
With some additional Googling, I found some useful bits and pieces. I can now select a row by clicking on it's contents, this can be achieved by adding an onclick property to the tr:outputText that renders the contents of a cell in the tr:table. Like this:
onclick="var selBox = document.getElementById ('#{tableId}:${status.count-1}'); selBox.checked='true'; selBox.parentNode.parentNode.className='selectedRow';"
In this snippet tableId is the id I gave to my tr:table. status is the variable name I assigned to the varStatus property of the tr:table. As you can see, the JavaScript code also changes the className of the parent of the parent of the selection checkbox. This is actually the table row.
Now I have selected a row in the table by clicking on its contents, I have some additional things to do:
* I have to externalize the JavaScript code in a .js file. (That's not difficult.)
* I have to add some functionality to unselect a row. In case of a single selection table, this is done by selecting another row. This works already for the radiobutton, but the "selectedRow" class is not yet removed from the table row in that case. In case of a multiple selection table, this should be done by clicking on the row again. Therefore, the current selection state should be checked first. I think this is pretty straightforward, expecially once I have rewritten the solution as a couple of JavaScript functions in a separate .js file.
* Trinidad does not use the tr element for styling, but relies on the td elements only. If I change the style of the tr element, this cannot be seen on the page, because the style is overridden by the style that is defined for the td elements. If someone has a suggestion how to solve this, please let me know. (I can think of a solution where I iterate over all TD's in JavaScript, but this does not sound very elegant.)
* If I succeed in implementing this solution, I still have the checkboxes/radiobuttons in the first column. Neither the table cell (TD) nor the box/button itself get a special CSS class from Trinidad, so I cannot think of a simple way to hide this column using CSS only. Of course I could set the "rowSelection" property of my tr:table to "none", but that way I would lose the selection functionality, meaning that I would have to write something myself. That's not the type of solution I am looking for, as I want to stay with standard functionality as much as possible. Suggestions are appreciated!
* Selecting a row by clikcing on its contents is a step in the right direction, but I'm still looking for a way to make the whole row "clickable". Does someone have any idea on how I can add an onclick property to either the tr element or to every td element within a row? Adding an onclick property to the tr:column results in an onclick property on the table header. Anyone?
That are a lot of questions in one email... I'd highly appreciate any suggestions / idea's.
Best regards,
Bart Kummel
Shane Petroff <sh...@mayet.ca>
27-05-2008 17:04
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
MyFaces Discussion <us...@myfaces.apache.org>
cc
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Zigc Junk wrote:
If you really need that kind of richness, you
should use other technologies such as applet, etc.
Huh?! Richness is the "raison d'être" for JSF; striving for desktop features is the goal!
I'd love to see something like this too (selection of any sort on tree would be a step forward). I have to admit that neither my javascript nor css is up to the task, but what about using goLinks in your nodes/column cells, use whatever styleClass you are currently using on the outputText components, then trigger your css changes from the link's js. You couldn't handle clicking on the whitespace inside the table, but it should be familiar to users at least (more so than the stinking radio buttons and checkboxes featured by Trinidad and other frameworks) Besides, if the guys at icefaces can do it, it ought not to be impossible in Trinidad (naturally, icefaces doesn't have a treeTable...)
http://component-showcase.icefaces.org/component-showcase/showcase.iface <http://component-showcase.icefaces.org/component-showcase/showcase.iface>
(open the "table" folder and choose "row selection")
Shane
On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> <ma...@koopmanint.com> wrote:
Hi List,
I asked this question a couple of days ago, but still not have an answer
from somebody who knows about the tr:table component. Even if the answer
would be "No, that's not possible at all" I'd like to know that, because
that saves me from searching for the impossible...
Best regards,
Bart Kummel
Bart.Kummel@Koopmanint.com <ma...@Koopmanint.com> wrote on 21-05-2008 16:11:05:
Hi Guy,
The Trinidad tr:table component (which is Trinidad's dataTable
replacement) does not have a property rowOnClick...
Best regards,
Bart Kummel
Guy Bashan <gu...@gmail.com> <ma...@gmail.com> wrote on 21-05-2008 15:23:48:
Hi Bart,
I don't know about Trinidad, but for showing selected row in <t:
dataTable> I simply saved the selected row in hidden field (you can
store in the hidden field the id of the selected object or the row
index). For showing the selected row you can use css and for
clicking on the entire row you can use: rowOnClick.
Guy.
From: Bart.Kummel@Koopmanint.com <ma...@Koopmanint.com> [mailto:Bart.Kummel@Koopmanint.com <ma...@Koopmanint.com> ]
Sent: Wednesday, May 21, 2008 4:01 PM
To: MyFaces Discussion
Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi List,
I'm looking for a method to select a row in a tr:table or tr:
treeTable by clicking anywhere on the row. I have a rather complex
UI and I'm looking for ways to reduce the number of controls the
user sees. One thing I came up with was removing the radio buttons
in the treeTable on my page. While the user should be able to select
a single row, I thought it would be nice if the row was selected
just by clicking anywhere on the row and selection of the row is
indicated by a different background color and/or use of a different
font (bold instead of plain).
I found a proposal for this functionality as standard feature here:
http://myfaces.markmail.org/search/?q=table%20select%20row#query: <http://myfaces.markmail.org/search/?q=table%20select%20row#query:>
table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
But this did not make in into the regular builds aparantly.
Does someone know a way to achieve this without adapting Trinidad
itself. I think it should be possible with a clever combination of
skinning (CSS) and JavaScript.
Best regards,
Bart Kummel
--
Shane
AW: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by "Rottstock, Sven" <Sv...@sungard.de>.
Hi,
just a little improvement: It is not necessary to set a tableId via <c:set/>. Your JS Function will also work if you set the parameter as follows:
mySelectRow(this.id, #{status.count});
Regards,
Sven
_______________________________
SunGard Europa 2008: Complexity, Compliance & Cost
Steigende Komplexität der Weltwirtschaft, fortschreitende Harmonisierung der europäischen und weltweiten Regularien. Außerdem: Kundenzufriedenheit sichern und nachhaltige Profitabilität gewährleisten.
Ziele, die Unternehmen nur erreichen, wenn sie Strategie und Technologie fortwährend an die neuen Herausforderungen anpassen. Treffen Sie Präsident Václav Havel und lernen Sie, wie er Veränderungen als Chance begreift. Und wo die Chancen für Ihr Unternehmen liegen.
SunGard Europa . Prag, 16. - 18. Juni 2008 . Info & Anmeldung: www.sungardeuropa.com
Think before you print
CONFIDENTIALITY: This e-mail (including any attachments) may contain confidential, proprietary and privileged information, and unauthorized disclosure or use is prohibited. If you receive this e-mail in error, please notify the sender and delete this e-mail from your system.
SunGard CARNOT GmbH * Registered: Frankfurt am Main, Handelsregister Frankfurt HRB 79504 * Geschäftsführer: Harold Finders, Dr. Marc Gille, Dr. Dirk Lüth, Michael J. Ruane, Victoria Elizabeth Silbey
________________________________
Von: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
Gesendet: Donnerstag, 29. Mai 2008 15:23
An: MyFaces Discussion
Cc: MyFaces Discussion
Betreff: Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi all,
Yesterday I posted a couple of questions on how to change the tr:table so that a row can be selected by clicking on the row instead of the radio buttons/checkboxes that are used by default. I figured a couple of things out myself. I'll try to explain what I've accomplished so far:
* I've been focussing on single selection only for now.
* It's easy to hide the column with radio buttons, since the TH and TD's in that column get a different CSS style class. I already have a custom skin.css file, if you want to know how to do that, see the skinning documentation on the Trinidad website. To hide the column with radio buttons, just add the following to your skinning css file:
af|tableSelectOne_cell-icon-format-band {
display: none;
visibility: hidden;
width: 0px;
}
af|tableSelectOne_cell-icon-format {
display: none;
visibility: hidden;
width: 0px;
}
af|column_header-icon-format {
display: none;
visibility: hidden;
width: 0px;
}
* To select a row by clicking on it's contents, I add an onclick eventhandler to the component that renders the contents of each column. This implicates that the row will not get selected when the user clicks somewhere in a table cell where no contents are rendered. For example when using a tr:outputText component, the code becomes:
<tr:outputText value="#{row.someVariable}" onclick="${mySelectRow('#{tableId}', #{status.count});}"/>
This calls a JavaScript function which is (in my case) defined in the Facelets page template. (It should be possible to include a .js file as a resource, but I did not succeed in that approach yet...) Note that there must be a variable tableId, containing the ID of the table. It can be defined like this:
<c:set variable="tableId" value="table1"/>
You can use it in your table declaration as well:
<tr:table id="#{tableId}" ... >
* The script that contains the function definition looks like this:
<script type='text/javascript' language='javascript'>
//<![CDATA[
function kpmSelectRow(tableName, rowIndex) {
var n = rowIndex - 1;
var selBox = document.getElementById(tableName+':'+n);
selBox.checked = true;
var selectedRow = selBox.parentNode.parentNode;
var table = selectedRow.parentNode;
var rowCount = table.rows.length;
for (var currentRow = 0; currentRow < rowCount; currentRow++) {
var r = table.rows[currentRow]
if(currentRow == rowIndex) {
if(r.className.indexOf('selectedRow') < 0) {
r.className += ' selectedRow';
} else {
selBox.checked = false;
r.className = r.className.replace(/selectedRow/g, '');
}
} else {
r.className = r.className.replace(/selectedRow/g, '');
}
}
}
//]]>
</script>
As you can see, this script sets a CSS class "selectedRow" on the selected row and removes it again if the row gets deselected (either by clicking it a second time or by clicking another row.)
* The CSS class "selectedRow" is used in the skinning CSS file, to change the layout of all cells (TD's) that are contained in a selected row, like this:
.selectedRow td.af_column_cell-text-band {
background-color: rgb(0, 0, 200);
font-weight: bold;
color: rgb(255, 255, 255);
}
.selectedRow td.af_column_cell-text {
background-color: rgb(0, 0, 200);
font-weight: bold;
color: rgb(255, 255, 255);
}
Notice that we have to do it twice, because even and odd rows get different CSS classes. This also gives us the possibility to use different styling for selected rows, matching the "banding" colors. (As you can see, I chose to keep the selected style the same, regardless of the "banding".)
Following this recipe, I now have a table where a single row can be selected by clicking on the contents of a cell in the row. Clicking the row a second time will deselect it. Here's my list of things I want to do to make it even better. Any suggestions on how to achieve these things will be highly appreciated...
* It should be possible to select a row by clicking on a cell (a TD element, so not only it's contents.) I'm still searching for a way to add an onclick value to a rendered TD element, but this seems hard (impossible?) to achieve.
* The table component remembers the selected row in several situations:
* when pagination is used, the selected row is remembered if the user navigates to another page and back to the page that contains the selected row.
* when some action is performed on a selected row (for example a detail page is shown) and the user returns to the table page.
In these situtations, the remembered selection is not shown using my solution. So I'm looking for a method to re-apply my script whenever a table is refreshed.
* When using a disabled component to render a read only value (for instance a disabled checkbox to render a read only boolean value), the onclick event does not get fired when clicking on the disabled component.
* I still prefer to place my JavaScript function in a separate .js file, but I cannot find a method to include such a file any help on that is appreciated too!
* I don't need it right now, but for the sake of completeness it would be nice if I could add support for multiple select too. It shouldn't be too hard...
So far I had a lot of fun figuring this out. I improved my JavaScript skills a little bit too. I'll keep the list posted of I figure out more things. If anyone has an idea on improving this solution, please let met (and the list) know!
Best regards,
Bart Kummel
Bart.Kummel@Koopmanint.com
28-05-2008 12:52
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
"MyFaces Discussion" <us...@myfaces.apache.org>
cc
MyFaces Discussion <us...@myfaces.apache.org>
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi all,
Thanks for your replies. I agree with Shane that "richness" being a core feature of JSF. However, I find "if XYZ can do it, it ought to be possible in Trinidad too" a somewhat tricky assumption. With the right combination of Java, JavaScript, XML, etc, virtually everything is possible. But I'm asking this question on a Myfaces Trinidad mailing list. The reason for that is that I'm looking for a solution that requires the least amount of custom code and will not interfer with standard Trinidad features.
With some additional Googling, I found some useful bits and pieces. I can now select a row by clicking on it's contents, this can be achieved by adding an onclick property to the tr:outputText that renders the contents of a cell in the tr:table. Like this:
onclick="var selBox = document.getElementById ('#{tableId}:${status.count-1}'); selBox.checked='true'; selBox.parentNode.parentNode.className='selectedRow';"
In this snippet tableId is the id I gave to my tr:table. status is the variable name I assigned to the varStatus property of the tr:table. As you can see, the JavaScript code also changes the className of the parent of the parent of the selection checkbox. This is actually the table row.
Now I have selected a row in the table by clicking on its contents, I have some additional things to do:
* I have to externalize the JavaScript code in a .js file. (That's not difficult.)
* I have to add some functionality to unselect a row. In case of a single selection table, this is done by selecting another row. This works already for the radiobutton, but the "selectedRow" class is not yet removed from the table row in that case. In case of a multiple selection table, this should be done by clicking on the row again. Therefore, the current selection state should be checked first. I think this is pretty straightforward, expecially once I have rewritten the solution as a couple of JavaScript functions in a separate .js file.
* Trinidad does not use the tr element for styling, but relies on the td elements only. If I change the style of the tr element, this cannot be seen on the page, because the style is overridden by the style that is defined for the td elements. If someone has a suggestion how to solve this, please let me know. (I can think of a solution where I iterate over all TD's in JavaScript, but this does not sound very elegant.)
* If I succeed in implementing this solution, I still have the checkboxes/radiobuttons in the first column. Neither the table cell (TD) nor the box/button itself get a special CSS class from Trinidad, so I cannot think of a simple way to hide this column using CSS only. Of course I could set the "rowSelection" property of my tr:table to "none", but that way I would lose the selection functionality, meaning that I would have to write something myself. That's not the type of solution I am looking for, as I want to stay with standard functionality as much as possible. Suggestions are appreciated!
* Selecting a row by clikcing on its contents is a step in the right direction, but I'm still looking for a way to make the whole row "clickable". Does someone have any idea on how I can add an onclick property to either the tr element or to every td element within a row? Adding an onclick property to the tr:column results in an onclick property on the table header. Anyone?
That are a lot of questions in one email... I'd highly appreciate any suggestions / idea's.
Best regards,
Bart Kummel
Shane Petroff <sh...@mayet.ca>
27-05-2008 17:04
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
MyFaces Discussion <us...@myfaces.apache.org>
cc
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Zigc Junk wrote:
If you really need that kind of richness, you
should use other technologies such as applet, etc.
Huh?! Richness is the "raison d'être" for JSF; striving for desktop features is the goal!
I'd love to see something like this too (selection of any sort on tree would be a step forward). I have to admit that neither my javascript nor css is up to the task, but what about using goLinks in your nodes/column cells, use whatever styleClass you are currently using on the outputText components, then trigger your css changes from the link's js. You couldn't handle clicking on the whitespace inside the table, but it should be familiar to users at least (more so than the stinking radio buttons and checkboxes featured by Trinidad and other frameworks) Besides, if the guys at icefaces can do it, it ought not to be impossible in Trinidad (naturally, icefaces doesn't have a treeTable...)
http://component-showcase.icefaces.org/component-showcase/showcase.iface <http://component-showcase.icefaces.org/component-showcase/showcase.iface>
(open the "table" folder and choose "row selection")
Shane
On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> <ma...@koopmanint.com> wrote:
Hi List,
I asked this question a couple of days ago, but still not have an answer
from somebody who knows about the tr:table component. Even if the answer
would be "No, that's not possible at all" I'd like to know that, because
that saves me from searching for the impossible...
Best regards,
Bart Kummel
Bart.Kummel@Koopmanint.com <ma...@Koopmanint.com> wrote on 21-05-2008 16:11:05:
Hi Guy,
The Trinidad tr:table component (which is Trinidad's dataTable
replacement) does not have a property rowOnClick...
Best regards,
Bart Kummel
Guy Bashan <gu...@gmail.com> <ma...@gmail.com> wrote on 21-05-2008 15:23:48:
Hi Bart,
I don't know about Trinidad, but for showing selected row in <t:
dataTable> I simply saved the selected row in hidden field (you can
store in the hidden field the id of the selected object or the row
index). For showing the selected row you can use css and for
clicking on the entire row you can use: rowOnClick.
Guy.
From: Bart.Kummel@Koopmanint.com <ma...@Koopmanint.com> [mailto:Bart.Kummel@Koopmanint.com <ma...@Koopmanint.com> ]
Sent: Wednesday, May 21, 2008 4:01 PM
To: MyFaces Discussion
Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi List,
I'm looking for a method to select a row in a tr:table or tr:
treeTable by clicking anywhere on the row. I have a rather complex
UI and I'm looking for ways to reduce the number of controls the
user sees. One thing I came up with was removing the radio buttons
in the treeTable on my page. While the user should be able to select
a single row, I thought it would be nice if the row was selected
just by clicking anywhere on the row and selection of the row is
indicated by a different background color and/or use of a different
font (bold instead of plain).
I found a proposal for this functionality as standard feature here:
http://myfaces.markmail.org/search/?q=table%20select%20row#query: <http://myfaces.markmail.org/search/?q=table%20select%20row#query:>
table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
But this did not make in into the regular builds aparantly.
Does someone know a way to achieve this without adapting Trinidad
itself. I think it should be possible with a clever combination of
skinning (CSS) and JavaScript.
Best regards,
Bart Kummel
--
Shane
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Ba...@Koopmanint.com.
Hi all,
Yesterday I posted a couple of questions on how to change the tr:table so
that a row can be selected by clicking on the row instead of the radio
buttons/checkboxes that are used by default. I figured a couple of things
out myself. I'll try to explain what I've accomplished so far:
I've been focussing on single selection only for now.
It's easy to hide the column with radio buttons, since the TH and TD's in
that column get a different CSS style class. I already have a custom
skin.css file, if you want to know how to do that, see the skinning
documentation on the Trinidad website. To hide the column with radio
buttons, just add the following to your skinning css file:
af|tableSelectOne_cell-icon-format-band {
display: none;
visibility: hidden;
width: 0px;
}
af|tableSelectOne_cell-icon-format {
display: none;
visibility: hidden;
width: 0px;
}
af|column_header-icon-format {
display: none;
visibility: hidden;
width: 0px;
}
To select a row by clicking on it's contents, I add an onclick
eventhandler to the component that renders the contents of each column.
This implicates that the row will not get selected when the user clicks
somewhere in a table cell where no contents are rendered. For example when
using a tr:outputText component, the code becomes:
<tr:outputText value="#{row.someVariable}" onclick="${
mySelectRow('#{tableId}', #{status.count});}"/>
This calls a JavaScript function which is (in my case) defined in the
Facelets page template. (It should be possible to include a .js file as a
resource, but I did not succeed in that approach yet...) Note that there
must be a variable tableId, containing the ID of the table. It can be
defined like this:
<c:set variable="tableId" value="table1"/>
You can use it in your table declaration as well:
<tr:table id="#{tableId}" ... >
The script that contains the function definition looks like this:
<script type='text/javascript' language='javascript'>
//<![CDATA[
function kpmSelectRow(tableName, rowIndex) {
var n = rowIndex - 1;
var selBox = document.getElementById(tableName+':'+n);
selBox.checked = true;
var selectedRow = selBox.parentNode.parentNode;
var table = selectedRow.parentNode;
var rowCount = table.rows.length;
for (var currentRow = 0; currentRow < rowCount; currentRow++) {
var r = table.rows[currentRow]
if(currentRow == rowIndex) {
if(r.className.indexOf('selectedRow') < 0) {
r.className += ' selectedRow';
} else {
selBox.checked = false;
r.className = r.className.replace(/selectedRow/g, '');
}
} else {
r.className = r.className.replace(/selectedRow/g, '');
}
}
}
//]]>
</script>
As you can see, this script sets a CSS class "selectedRow" on the selected
row and removes it again if the row gets deselected (either by clicking it
a second time or by clicking another row.)
The CSS class "selectedRow" is used in the skinning CSS file, to change
the layout of all cells (TD's) that are contained in a selected row, like
this:
.selectedRow td.af_column_cell-text-band {
background-color: rgb(0, 0, 200);
font-weight: bold;
color: rgb(255, 255, 255);
}
.selectedRow td.af_column_cell-text {
background-color: rgb(0, 0, 200);
font-weight: bold;
color: rgb(255, 255, 255);
}
Notice that we have to do it twice, because even and odd rows get
different CSS classes. This also gives us the possibility to use different
styling for selected rows, matching the "banding" colors. (As you can see,
I chose to keep the selected style the same, regardless of the "banding".)
Following this recipe, I now have a table where a single row can be
selected by clicking on the contents of a cell in the row. Clicking the
row a second time will deselect it. Here's my list of things I want to do
to make it even better. Any suggestions on how to achieve these things
will be highly appreciated...
It should be possible to select a row by clicking on a cell (a TD element,
so not only it's contents.) I'm still searching for a way to add an
onclick value to a rendered TD element, but this seems hard (impossible?)
to achieve.
The table component remembers the selected row in several situations:
when pagination is used, the selected row is remembered if the user
navigates to another page and back to the page that contains the selected
row.
when some action is performed on a selected row (for example a detail page
is shown) and the user returns to the table page.
In these situtations, the remembered selection is not shown using my
solution. So I'm looking for a method to re-apply my script whenever a
table is refreshed.
When using a disabled component to render a read only value (for instance
a disabled checkbox to render a read only boolean value), the onclick
event does not get fired when clicking on the disabled component.
I still prefer to place my JavaScript function in a separate .js file, but
I cannot find a method to include such a file any help on that is
appreciated too!
I don't need it right now, but for the sake of completeness it would be
nice if I could add support for multiple select too. It shouldn't be too
hard...
So far I had a lot of fun figuring this out. I improved my JavaScript
skills a little bit too. I'll keep the list posted of I figure out more
things. If anyone has an idea on improving this solution, please let met
(and the list) know!
Best regards,
Bart Kummel
Bart.Kummel@Koopmanint.com
28-05-2008 12:52
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
"MyFaces Discussion" <us...@myfaces.apache.org>
cc
MyFaces Discussion <us...@myfaces.apache.org>
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi all,
Thanks for your replies. I agree with Shane that "richness" being a core
feature of JSF. However, I find "if XYZ can do it, it ought to be possible
in Trinidad too" a somewhat tricky assumption. With the right combination
of Java, JavaScript, XML, etc, virtually everything is possible. But I'm
asking this question on a Myfaces Trinidad mailing list. The reason for
that is that I'm looking for a solution that requires the least amount of
custom code and will not interfer with standard Trinidad features.
With some additional Googling, I found some useful bits and pieces. I can
now select a row by clicking on it's contents, this can be achieved by
adding an onclick property to the tr:outputText that renders the contents
of a cell in the tr:table. Like this:
onclick="var selBox = document.getElementById ('#{tableId}:
${status.count-1}'); selBox.checked='true';
selBox.parentNode.parentNode.className='selectedRow';"
In this snippet tableId is the id I gave to my tr:table. status is the
variable name I assigned to the varStatus property of the tr:table. As you
can see, the JavaScript code also changes the className of the parent of
the parent of the selection checkbox. This is actually the table row.
Now I have selected a row in the table by clicking on its contents, I have
some additional things to do:
I have to externalize the JavaScript code in a .js file. (That's not
difficult.)
I have to add some functionality to unselect a row. In case of a single
selection table, this is done by selecting another row. This works already
for the radiobutton, but the "selectedRow" class is not yet removed from
the table row in that case. In case of a multiple selection table, this
should be done by clicking on the row again. Therefore, the current
selection state should be checked first. I think this is pretty
straightforward, expecially once I have rewritten the solution as a couple
of JavaScript functions in a separate .js file.
Trinidad does not use the tr element for styling, but relies on the td
elements only. If I change the style of the tr element, this cannot be
seen on the page, because the style is overridden by the style that is
defined for the td elements. If someone has a suggestion how to solve
this, please let me know. (I can think of a solution where I iterate over
all TD's in JavaScript, but this does not sound very elegant.)
If I succeed in implementing this solution, I still have the
checkboxes/radiobuttons in the first column. Neither the table cell (TD)
nor the box/button itself get a special CSS class from Trinidad, so I
cannot think of a simple way to hide this column using CSS only. Of course
I could set the "rowSelection" property of my tr:table to "none", but that
way I would lose the selection functionality, meaning that I would have to
write something myself. That's not the type of solution I am looking for,
as I want to stay with standard functionality as much as possible.
Suggestions are appreciated!
Selecting a row by clikcing on its contents is a step in the right
direction, but I'm still looking for a way to make the whole row
"clickable". Does someone have any idea on how I can add an onclick
property to either the tr element or to every td element within a row?
Adding an onclick property to the tr:column results in an onclick property
on the table header. Anyone?
That are a lot of questions in one email... I'd highly appreciate any
suggestions / idea's.
Best regards,
Bart Kummel
Shane Petroff <sh...@mayet.ca>
27-05-2008 17:04
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
MyFaces Discussion <us...@myfaces.apache.org>
cc
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Zigc Junk wrote:
If you really need that kind of richness, you
should use other technologies such as applet, etc.
Huh?! Richness is the "raison d'être" for JSF; striving for desktop
features is the goal!
I'd love to see something like this too (selection of any sort on tree
would be a step forward). I have to admit that neither my javascript nor
css is up to the task, but what about using goLinks in your nodes/column
cells, use whatever styleClass you are currently using on the outputText
components, then trigger your css changes from the link's js. You couldn't
handle clicking on the whitespace inside the table, but it should be
familiar to users at least (more so than the stinking radio buttons and
checkboxes featured by Trinidad and other frameworks) Besides, if the guys
at icefaces can do it, it ought not to be impossible in Trinidad
(naturally, icefaces doesn't have a treeTable...)
http://component-showcase.icefaces.org/component-showcase/showcase.iface
(open the "table" folder and choose "row selection")
Shane
On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> wrote:
Hi List,
I asked this question a couple of days ago, but still not have an answer
from somebody who knows about the tr:table component. Even if the answer
would be "No, that's not possible at all" I'd like to know that, because
that saves me from searching for the impossible...
Best regards,
Bart Kummel
Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
Hi Guy,
The Trinidad tr:table component (which is Trinidad's dataTable
replacement) does not have a property rowOnClick...
Best regards,
Bart Kummel
Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
Hi Bart,
I don't know about Trinidad, but for showing selected row in <t:
dataTable> I simply saved the selected row in hidden field (you can
store in the hidden field the id of the selected object or the row
index). For showing the selected row you can use css and for
clicking on the entire row you can use: rowOnClick.
Guy.
From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
Sent: Wednesday, May 21, 2008 4:01 PM
To: MyFaces Discussion
Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi List,
I'm looking for a method to select a row in a tr:table or tr:
treeTable by clicking anywhere on the row. I have a rather complex
UI and I'm looking for ways to reduce the number of controls the
user sees. One thing I came up with was removing the radio buttons
in the treeTable on my page. While the user should be able to select
a single row, I thought it would be nice if the row was selected
just by clicking anywhere on the row and selection of the row is
indicated by a different background color and/or use of a different
font (bold instead of plain).
I found a proposal for this functionality as standard feature here:
http://myfaces.markmail.org/search/?q=table%20select%20row#query:
table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
But this did not make in into the regular builds aparantly.
Does someone know a way to achieve this without adapting Trinidad
itself. I think it should be possible with a clever combination of
skinning (CSS) and JavaScript.
Best regards,
Bart Kummel
--
Shane
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Ba...@Koopmanint.com.
Hi all,
Thanks for your replies. I agree with Shane that "richness" being a core
feature of JSF. However, I find "if XYZ can do it, it ought to be possible
in Trinidad too" a somewhat tricky assumption. With the right combination
of Java, JavaScript, XML, etc, virtually everything is possible. But I'm
asking this question on a Myfaces Trinidad mailing list. The reason for
that is that I'm looking for a solution that requires the least amount of
custom code and will not interfer with standard Trinidad features.
With some additional Googling, I found some useful bits and pieces. I can
now select a row by clicking on it's contents, this can be achieved by
adding an onclick property to the tr:outputText that renders the contents
of a cell in the tr:table. Like this:
onclick="var selBox = document.getElementById ('#{tableId}:
${status.count-1}'); selBox.checked='true';
selBox.parentNode.parentNode.className='selectedRow';"
In this snippet tableId is the id I gave to my tr:table. status is the
variable name I assigned to the varStatus property of the tr:table. As you
can see, the JavaScript code also changes the className of the parent of
the parent of the selection checkbox. This is actually the table row.
Now I have selected a row in the table by clicking on its contents, I have
some additional things to do:
I have to externalize the JavaScript code in a .js file. (That's not
difficult.)
I have to add some functionality to unselect a row. In case of a single
selection table, this is done by selecting another row. This works already
for the radiobutton, but the "selectedRow" class is not yet removed from
the table row in that case. In case of a multiple selection table, this
should be done by clicking on the row again. Therefore, the current
selection state should be checked first. I think this is pretty
straightforward, expecially once I have rewritten the solution as a couple
of JavaScript functions in a separate .js file.
Trinidad does not use the tr element for styling, but relies on the td
elements only. If I change the style of the tr element, this cannot be
seen on the page, because the style is overridden by the style that is
defined for the td elements. If someone has a suggestion how to solve
this, please let me know. (I can think of a solution where I iterate over
all TD's in JavaScript, but this does not sound very elegant.)
If I succeed in implementing this solution, I still have the
checkboxes/radiobuttons in the first column. Neither the table cell (TD)
nor the box/button itself get a special CSS class from Trinidad, so I
cannot think of a simple way to hide this column using CSS only. Of course
I could set the "rowSelection" property of my tr:table to "none", but that
way I would lose the selection functionality, meaning that I would have to
write something myself. That's not the type of solution I am looking for,
as I want to stay with standard functionality as much as possible.
Suggestions are appreciated!
Selecting a row by clikcing on its contents is a step in the right
direction, but I'm still looking for a way to make the whole row
"clickable". Does someone have any idea on how I can add an onclick
property to either the tr element or to every td element within a row?
Adding an onclick property to the tr:column results in an onclick property
on the table header. Anyone?
That are a lot of questions in one email... I'd highly appreciate any
suggestions / idea's.
Best regards,
Bart Kummel
Shane Petroff <sh...@mayet.ca>
27-05-2008 17:04
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
MyFaces Discussion <us...@myfaces.apache.org>
cc
Subject
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Zigc Junk wrote:
If you really need that kind of richness, you
should use other technologies such as applet, etc.
Huh?! Richness is the "raison d'être" for JSF; striving for desktop
features is the goal!
I'd love to see something like this too (selection of any sort on tree
would be a step forward). I have to admit that neither my javascript nor
css is up to the task, but what about using goLinks in your nodes/column
cells, use whatever styleClass you are currently using on the outputText
components, then trigger your css changes from the link's js. You couldn't
handle clicking on the whitespace inside the table, but it should be
familiar to users at least (more so than the stinking radio buttons and
checkboxes featured by Trinidad and other frameworks) Besides, if the guys
at icefaces can do it, it ought not to be impossible in Trinidad
(naturally, icefaces doesn't have a treeTable...)
http://component-showcase.icefaces.org/component-showcase/showcase.iface
(open the "table" folder and choose "row selection")
Shane
On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> wrote:
Hi List,
I asked this question a couple of days ago, but still not have an answer
from somebody who knows about the tr:table component. Even if the answer
would be "No, that's not possible at all" I'd like to know that, because
that saves me from searching for the impossible...
Best regards,
Bart Kummel
Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
Hi Guy,
The Trinidad tr:table component (which is Trinidad's dataTable
replacement) does not have a property rowOnClick...
Best regards,
Bart Kummel
Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
Hi Bart,
I don't know about Trinidad, but for showing selected row in <t:
dataTable> I simply saved the selected row in hidden field (you can
store in the hidden field the id of the selected object or the row
index). For showing the selected row you can use css and for
clicking on the entire row you can use: rowOnClick.
Guy.
From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
Sent: Wednesday, May 21, 2008 4:01 PM
To: MyFaces Discussion
Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi List,
I'm looking for a method to select a row in a tr:table or tr:
treeTable by clicking anywhere on the row. I have a rather complex
UI and I'm looking for ways to reduce the number of controls the
user sees. One thing I came up with was removing the radio buttons
in the treeTable on my page. While the user should be able to select
a single row, I thought it would be nice if the row was selected
just by clicking anywhere on the row and selection of the row is
indicated by a different background color and/or use of a different
font (bold instead of plain).
I found a proposal for this functionality as standard feature here:
http://myfaces.markmail.org/search/?q=table%20select%20row#query:
table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
But this did not make in into the regular builds aparantly.
Does someone know a way to achieve this without adapting Trinidad
itself. I think it should be possible with a clever combination of
skinning (CSS) and JavaScript.
Best regards,
Bart Kummel
--
Shane
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Shane Petroff <sh...@mayet.ca>.
Zigc Junk wrote:
> If you really need that kind of richness, you
> should use other technologies such as applet, etc.
>
Huh?! Richness is the "raison d'être" for JSF; striving for desktop
features is the goal!
I'd love to see something like this too (selection of any sort on tree
would be a step forward). I have to admit that neither my javascript nor
css is up to the task, but what about using goLinks in your nodes/column
cells, use whatever styleClass you are currently using on the outputText
components, then trigger your css changes from the link's js. You
couldn't handle clicking on the whitespace inside the table, but it
should be familiar to users at least (more so than the stinking radio
buttons and checkboxes featured by Trinidad and other frameworks)
Besides, if the guys at icefaces can do it, it ought not to be
impossible in Trinidad (naturally, icefaces doesn't have a treeTable...)
http://component-showcase.icefaces.org/component-showcase/showcase.iface
(open the "table" folder and choose "row selection")
Shane
> On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> wrote:
>
>> Hi List,
>>
>> I asked this question a couple of days ago, but still not have an answer
>> from somebody who knows about the tr:table component. Even if the answer
>> would be "No, that's not possible at all" I'd like to know that, because
>> that saves me from searching for the impossible...
>>
>> Best regards,
>> Bart Kummel
>>
>> Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
>>
>>
>>> Hi Guy,
>>>
>>> The Trinidad tr:table component (which is Trinidad's dataTable
>>> replacement) does not have a property rowOnClick...
>>>
>>> Best regards,
>>> Bart Kummel
>>>
>>> Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
>>>
>>>
>>>> Hi Bart,
>>>>
>>>> I don't know about Trinidad, but for showing selected row in <t:
>>>> dataTable> I simply saved the selected row in hidden field (you can
>>>> store in the hidden field the id of the selected object or the row
>>>> index). For showing the selected row you can use css and for
>>>> clicking on the entire row you can use: rowOnClick.
>>>> Guy.
>>>>
>>>> From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
>>>> Sent: Wednesday, May 21, 2008 4:01 PM
>>>> To: MyFaces Discussion
>>>> Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
>>>>
>>>>
>>>> Hi List,
>>>>
>>>> I'm looking for a method to select a row in a tr:table or tr:
>>>> treeTable by clicking anywhere on the row. I have a rather complex
>>>> UI and I'm looking for ways to reduce the number of controls the
>>>> user sees. One thing I came up with was removing the radio buttons
>>>> in the treeTable on my page. While the user should be able to select
>>>> a single row, I thought it would be nice if the row was selected
>>>> just by clicking anywhere on the row and selection of the row is
>>>> indicated by a different background color and/or use of a different
>>>> font (bold instead of plain).
>>>>
>>>> I found a proposal for this functionality as standard feature here:
>>>> http://myfaces.markmail.org/search/?q=table%20select%20row#query:
>>>> table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
>>>> But this did not make in into the regular builds aparantly.
>>>>
>>>> Does someone know a way to achieve this without adapting Trinidad
>>>> itself. I think it should be possible with a clever combination of
>>>> skinning (CSS) and JavaScript.
>>>>
>>>> Best regards,
>>>> Bart Kummel
>>>>
>
>
--
Shane
Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Zigc Junk <zi...@gmail.com>.
I think it is possible because every thing in jsf is a component which
you can write java script to catch events like onclick, etc.
Also, I think it is practically not possible because no body will try
to follow that path. If you really need that kind of richness, you
should use other technologies such as applet, etc.
regard
Bill
On Tue, May 27, 2008 at 8:41 AM, <Ba...@koopmanint.com> wrote:
>
> Hi List,
>
> I asked this question a couple of days ago, but still not have an answer
> from somebody who knows about the tr:table component. Even if the answer
> would be "No, that's not possible at all" I'd like to know that, because
> that saves me from searching for the impossible...
>
> Best regards,
> Bart Kummel
>
> Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
>
>>
>> Hi Guy,
>>
>> The Trinidad tr:table component (which is Trinidad's dataTable
>> replacement) does not have a property rowOnClick...
>>
>> Best regards,
>> Bart Kummel
>>
>> Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
>>
>> > Hi Bart,
>> >
>> > I don't know about Trinidad, but for showing selected row in <t:
>> > dataTable> I simply saved the selected row in hidden field (you can
>> > store in the hidden field the id of the selected object or the row
>> > index). For showing the selected row you can use css and for
>> > clicking on the entire row you can use: rowOnClick.
>> > Guy.
>> >
>> > From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
>> > Sent: Wednesday, May 21, 2008 4:01 PM
>> > To: MyFaces Discussion
>> > Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
>> >
>> >
>> > Hi List,
>> >
>> > I'm looking for a method to select a row in a tr:table or tr:
>> > treeTable by clicking anywhere on the row. I have a rather complex
>> > UI and I'm looking for ways to reduce the number of controls the
>> > user sees. One thing I came up with was removing the radio buttons
>> > in the treeTable on my page. While the user should be able to select
>> > a single row, I thought it would be nice if the row was selected
>> > just by clicking anywhere on the row and selection of the row is
>> > indicated by a different background color and/or use of a different
>> > font (bold instead of plain).
>> >
>> > I found a proposal for this functionality as standard feature here:
>> > http://myfaces.markmail.org/search/?q=table%20select%20row#query:
>> > table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
>> > But this did not make in into the regular builds aparantly.
>> >
>> > Does someone know a way to achieve this without adapting Trinidad
>> > itself. I think it should be possible with a clever combination of
>> > skinning (CSS) and JavaScript.
>> >
>> > Best regards,
>> > Bart Kummel
RE: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Ba...@Koopmanint.com.
Hi List,
I asked this question a couple of days ago, but still not have an answer
from somebody who knows about the tr:table component. Even if the answer
would be "No, that's not possible at all" I'd like to know that, because
that saves me from searching for the impossible...
Best regards,
Bart Kummel
Bart.Kummel@Koopmanint.com wrote on 21-05-2008 16:11:05:
>
> Hi Guy,
>
> The Trinidad tr:table component (which is Trinidad's dataTable
> replacement) does not have a property rowOnClick...
>
> Best regards,
> Bart Kummel
>
> Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
>
> > Hi Bart,
> >
> > I don't know about Trinidad, but for showing selected row in <t:
> > dataTable> I simply saved the selected row in hidden field (you can
> > store in the hidden field the id of the selected object or the row
> > index). For showing the selected row you can use css and for
> > clicking on the entire row you can use: rowOnClick.
> > Guy.
> >
> > From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
> > Sent: Wednesday, May 21, 2008 4:01 PM
> > To: MyFaces Discussion
> > Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
> >
> >
> > Hi List,
> >
> > I'm looking for a method to select a row in a tr:table or tr:
> > treeTable by clicking anywhere on the row. I have a rather complex
> > UI and I'm looking for ways to reduce the number of controls the
> > user sees. One thing I came up with was removing the radio buttons
> > in the treeTable on my page. While the user should be able to select
> > a single row, I thought it would be nice if the row was selected
> > just by clicking anywhere on the row and selection of the row is
> > indicated by a different background color and/or use of a different
> > font (bold instead of plain).
> >
> > I found a proposal for this functionality as standard feature here:
> > http://myfaces.markmail.org/search/?q=table%20select%20row#query:
> > table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
> > But this did not make in into the regular builds aparantly.
> >
> > Does someone know a way to achieve this without adapting Trinidad
> > itself. I think it should be possible with a clever combination of
> > skinning (CSS) and JavaScript.
> >
> > Best regards,
> > Bart Kummel
RE: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Ba...@Koopmanint.com.
Hi Guy,
The Trinidad tr:table component (which is Trinidad's dataTable
replacement) does not have a property rowOnClick...
Best regards,
Bart Kummel
Guy Bashan <gu...@gmail.com> wrote on 21-05-2008 15:23:48:
> Hi Bart,
>
> I don't know about Trinidad, but for showing selected row in <t:
> dataTable> I simply saved the selected row in hidden field (you can
> store in the hidden field the id of the selected object or the row
> index). For showing the selected row you can use css and for
> clicking on the entire row you can use: rowOnClick.
> Guy.
>
> From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
> Sent: Wednesday, May 21, 2008 4:01 PM
> To: MyFaces Discussion
> Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
>
>
> Hi List,
>
> I'm looking for a method to select a row in a tr:table or tr:
> treeTable by clicking anywhere on the row. I have a rather complex
> UI and I'm looking for ways to reduce the number of controls the
> user sees. One thing I came up with was removing the radio buttons
> in the treeTable on my page. While the user should be able to select
> a single row, I thought it would be nice if the row was selected
> just by clicking anywhere on the row and selection of the row is
> indicated by a different background color and/or use of a different
> font (bold instead of plain).
>
> I found a proposal for this functionality as standard feature here:
> http://myfaces.markmail.org/search/?q=table%20select%20row#query:
> table%20select%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
> But this did not make in into the regular builds aparantly.
>
> Does someone know a way to achieve this without adapting Trinidad
> itself. I think it should be possible with a clever combination of
> skinning (CSS) and JavaScript.
>
> Best regards,
> Bart Kummel
RE: [Trinidad] Selecting a row in tr:table by clicking on the row
Posted by Guy Bashan <gu...@gmail.com>.
Hi Bart,
I don't know about Trinidad, but for showing selected row in <t:dataTable> I
simply saved the selected row in hidden field (you can store in the hidden
field the id of the selected object or the row index). For showing the
selected row you can use css and for clicking on the entire row you can use:
rowOnClick.
Guy.
From: Bart.Kummel@Koopmanint.com [mailto:Bart.Kummel@Koopmanint.com]
Sent: Wednesday, May 21, 2008 4:01 PM
To: MyFaces Discussion
Subject: [Trinidad] Selecting a row in tr:table by clicking on the row
Hi List,
I'm looking for a method to select a row in a tr:table or tr:treeTable by
clicking anywhere on the row. I have a rather complex UI and I'm looking for
ways to reduce the number of controls the user sees. One thing I came up
with was removing the radio buttons in the treeTable on my page. While the
user should be able to select a single row, I thought it would be nice if
the row was selected just by clicking anywhere on the row and selection of
the row is indicated by a different background color and/or use of a
different font (bold instead of plain).
I found a proposal for this functionality as standard feature here:
http://myfaces.markmail.org/search/?q=table%20select%20row#query:table%20sel
ect%20row+page:2+mid:dw257hvw5mgp5g5e+state:results
But this did not make in into the regular builds aparantly.
Does someone know a way to achieve this without adapting Trinidad itself. I
think it should be possible with a clever combination of skinning (CSS) and
JavaScript.
Best regards,
Bart Kummel