myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Bart.Kum...@Koopmanint.com
Subject Re: [Trinidad] Selecting a row in tr:table by clicking on the row
Date Thu, 29 May 2008 13:22:34 GMT
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 

Mime
View raw message