[prev in list] [next in list] [prev in thread] [next in thread] 

List:       myfaces-user
Subject:    Re: [Trinidad] Selecting a row in tr:table by clicking on the row
From:       "Zigc Junk" <zigcjunk () gmail ! com>
Date:       2008-05-29 14:58:02
Message-ID: f9615440805290758r42146449ycb829ea11d2df2af () mail ! gmail ! com
[Download RAW message or body]

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,  <Bart.Kummel@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" <users@myfaces.apache.org>
> To
> "MyFaces Discussion" <users@myfaces.apache.org>
> cc
> MyFaces Discussion <users@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 <shane@mayet.ca>
>
> 27-05-2008 17:04
>
> Please respond to
> "MyFaces Discussion" <users@myfaces.apache.org>
>
> To
> MyFaces Discussion <users@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,  <Bart.Kummel@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 <guy.bashan@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
>

[prev in list] [next in list] [prev in thread] [next in thread]