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, <[EMAIL PROTECTED]> 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 > > > > [EMAIL PROTECTED] > > 28-05-2008 12:52 > > Please respond to > "MyFaces Discussion" <[email protected]> > To > "MyFaces Discussion" <[email protected]> > cc > MyFaces Discussion <[email protected]> > 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 <[EMAIL PROTECTED]> > > 27-05-2008 17:04 > > Please respond to > "MyFaces Discussion" <[email protected]> > > To > MyFaces Discussion <[email protected]> > 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, <[EMAIL PROTECTED]> 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 > > [EMAIL PROTECTED] 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 <[EMAIL PROTECTED]> 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: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > 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 >
