dev@jsftemplating.java.net

Re: JSFTemplating: Highlight table row with onClick/onMouseOver

From: Anissa Lam <Anissa.Lam_at_Sun.COM>
Date: Wed, 21 Mar 2007 11:57:37 -0800

Hi Karam,

In Admin Console, there are many tables that has buttons and dropdown,
which needs to be enabled/disabled depending on row selection. If no
row is selected, the buttons etc will be disabled.
I have attached a JS file that does that, and 2 jsf that has shows the
table that uses those functions.
There are 2 images attached also which uese those JS functions.

Hope this help.
Anissa


Also a screen image that shows the
Karam Singh Badesha wrote:
> Hi,
> I am using woodstock table component with jsftemplating and want to have
> the highlight feature for table row. Does anyone know how to take care
> of this? If I try to use selected option for tableRowGroup, it
> highlights all the rows.
>
> thanks,
>


$page{tableId}); /> $attribute{listOfRows}); /> $page{topActionGroup}); /> $attribute{tableRowGroup}); getSelectedSingleMapRows(TableRowGroup="$attribute{tableRowGroup}" selectedRows=>$attribute{selectedRows}); setAttribute(key="click" value="$this{component}"); setAttribute(key="actionValue" value="#{click.selected}") if( ${actionValue}=enable){ changeTargetStatus(selectedRows="${selectedRows}" appName="#{name}" appType="#{appType}" enabled="#{true}" LB="$boolean{false}") } if( ${actionValue}=disable){ changeTargetStatus(selectedRows="${selectedRows}" appName="#{name}" appType="#{appType}" enabled="#{false}" LB="$boolean{false}") } if( ${actionValue}=lb-enable){ changeTargetStatus(selectedRows="${selectedRows}" appName="#{name}" appType="#{appType}" enabled="#{true}" LB="$boolean{true}") } if( ${actionValue}=lb-disable){ changeTargetStatus(selectedRows="${selectedRows}" appName="#{name}" appType="#{appType}" enabled="#{false}" LB="$boolean{true}") } setAttribute(key="appName" value="#{name}"); navigate(page="/applications/#{targetPage}"); /> $page{targetTableRowGroupId}); /> $page{tableId}); /> $page{topActionGroup}); /> $attribute{tableRowGroup}); getSelectedSingleMapRows(TableRowGroup="$attribute{tableRowGroup}" selectedRows=>$attribute{selectedRows}); undeploy(selectedRows="${selectedRows}" appType="#{appType}"); navigate(page="#{listPageLink}"); /> $attribute{tableRowGroup}); getSelectedSingleMapRows(TableRowGroup="$attribute{tableRowGroup}" selectedRows=>$attribute{selectedRows}); changeAppStatus(selectedRows="${selectedRows}" appType="#{appType}" enabled="#{true}") navigate(page="#{listPageLink}"); /> $attribute{tableRowGroup}); getSelectedSingleMapRows(TableRowGroup="$attribute{tableRowGroup}" selectedRows=>$attribute{selectedRows}); changeAppStatus(selectedRows="${selectedRows}" appType="#{appType}" enabled="#{false}") navigate(page="#{listPageLink}"); /> $page{tableRowGroupId}); /> $page{listOfTargets}); /> "


  # When editing this file, make sure that there is backslash escape is at the END of the line

 " <script type="text/javascript">

  " function changeButtonAndDropDown(){ \
     var components = new Array(); \
     var gp = "$pageSession{topActionGroup}"; \
     components[0] = gp.concat(":button1"); \
     components[1] = gp.concat(":dropdown1"); \
     changeButtons(components,"$pageSession{tableId}"); \
       \
  }

" function changeOneDropdown(){ \
     var components = new Array(); \
     var gp = "$pageSession{topActionGroup}"; \
     components[1] = gp.concat(":dropdown1_list"); \
     changeButtons(components,"$pageSession{tableId}"); \
       \
  }
  
  " function changeOneTableButton3(){ \
     var buttons = new Array(); \
     var gp = "$pageSession{topActionGroup}"; \
     buttons[0] = gp.concat(":button1"); \
     changeButtons(buttons,"$pageSession{tableId3}"); \
       \
  }
  
  " function changeOneTableButton(){ \
     var buttons = new Array(); \
     var gp = "$pageSession{topActionGroup}"; \
     buttons[0] = gp.concat(":button1"); \
     changeButtons(buttons,"$pageSession{tableId}"); \
       \
  }
  
  " function changeTwoTableButtons(){ \
     var buttons = new Array(); \
     var gp = "$pageSession{topActionGroup}"; \
     buttons[0] = gp.concat(":button1"); \
     buttons[1] = gp.concat(":button2"); \
     changeButtons(buttons,"$pageSession{tableId}"); \
       \
  }
    
  " function changeThreeTableButtons(){ \
     var buttons = new Array(); \
     var gp = "$pageSession{topActionGroup}"; \
     buttons[0] = gp.concat(":button1"); \
     buttons[1] = gp.concat(":button2"); \
     buttons[2] = gp.concat(":button3"); \
     changeButtons(buttons,"$pageSession{tableId}"); \
  }

  " function changeThreeTableButtons2(){ \
     var buttons = new Array(); \
     var gp = "$pageSession{topActionGroup2}"; \
     buttons[0] = gp.concat(":button1"); \
     buttons[1] = gp.concat(":button2"); \
     buttons[2] = gp.concat(":button3"); \
     changeButtons(buttons,"$pageSession{tableId2}"); \
  }

  " function changeButtons(buttons,tableId){ \
    var table = document.getElementById(tableId); \
    var selections = table.getAllSelectedRowsCount(); \
    var disabled = (selections > 0) ? false : true; \
    for (count=0; count < buttons.length; count++) { \
       var element = document.getElementById(buttons[count]); \
       if (element) { \
         if (element.setDisabled) { \
           element.setDisabled(disabled); \
         } \
         else { \
           element.disabled = disabled; \
         } \
       } \
     } \
  }

  " function initAllRows() { \
    var table = document.getElementById("$pageSession{tableId}"); \
    table.initAllRows(); \
  }

  " function initAllRows2() { \
    var table = document.getElementById("$pageSession{tableId2}"); \
    table.initAllRows(); \
  }

  " function initAllRows3() { \
    var table = document.getElementById("$pageSession{tableId3}"); \
    table.initAllRows(); \
  }

  " function initAllRows4() { \
    var table = document.getElementById("$pageSession{tableId4}"); \
    table.initAllRows(); \
  }

 " </script>




buttonAndDropdown.jpg
(image/jpeg attachment: buttonAndDropdown.jpg)

3buttons.jpg
(image/jpeg attachment: 3buttons.jpg)