This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



~Vanessa Quetfanakonyoni
Sep 24, 2012, 12:07 PM
10 Posts
topic has been resolvedResolved

How can i change the color on selected row in view Panel

  • Category: Styles and Themes
  • Platform: Other
  • Release: 8.5.3
  • Role: Developer
  • Tags:
  • Replies: 12
 How can i change the background color of a selected row in viewPanel?
 
Best Regards 
~Cheryl Elhipigenlen
Sep 24, 2012, 2:23 PM
366 Posts
Re: How can i change the color on selected row in view Panel
 Here is the link to a blog post I wrote on xpages.info that details how to do that.
 
http://xpages.info/XPagesHome.nsf/Entry.xsp?documentId=D5DB068DE57E40C8852578CB006682FE 
~Vanessa Quetfanakonyoni
Sep 24, 2012, 3:05 PM
10 Posts
Re: How can i change the color on selected row in view Panel
Thank you,
 
but how can i change  the color based on who row i select and not based on field value.
~Cheryl Elhipigenlen
Sep 24, 2012, 10:10 PM
366 Posts
Re: How can i change the color on selected row in view Panel
 Rows in a viewPanel are not "selectable".
 
You would have to use either the dojo or jquery data grid for that. 
 
Perhaps if you can explain what you are trying to do. 
 
I'm not understanding the use case for changing the color of the "selected" row. 
~Vanessa Quetfanakonyoni
Sep 25, 2012, 6:03 AM
10 Posts
Re: How can i change the color on selected row in view Panel
 I have a view panel and a column as a link. When i select the link, shows(right side of xpage) the rest details of the selected document.(all in the same xpage).
 
The issue was if it is possible to change the background color, to the selected document(row) in the view panel. So it will be easier to understand which document show at the right side.
 
Best Regards
~Dean Quettootexflar
Sep 25, 2012, 10:59 AM
22 Posts
Re: How can i change the color on selected row in view Panel
use the rowClasses attribute of your datatable
 
xp:dataTable id="data_bookmark" rows="15" var="row"
            indexVar="rowIndex" styleClass="coisDataTable" rowClasses="oddrow, evenrow"
            value="#{javascript:bookmarks.getBookmarks()}"
 
 
and the css looks like this
 
.coisDataTable  .oddrow {
    background-color: rgb(248, 248, 248);
}

.coisDataTable .evenrow {
    
}

.coisDataTable .evenrow:Hover,.coisDataTable .oddrow:Hover {
    background-color: rgb(288, 250, 221);
}
~Vanessa Quetfanakonyoni
Sep 25, 2012, 1:28 PM
10 Posts
Re: How can i change the color on selected row in view Panel
 I have already use odd,even(Hover) in the rowClasses.
 
The issue is when i select a document(from a view panel by clicking on the column link) and appears the document in the right side of xpage, i want the selection(the row) i have made to colorize in a different color.
Not just change color when i hover on the documents but also when i select one.
 
 i don't know if this can be done!
 
Thank you
 
Best Regards 
~Cheryl Elhipigenlen
Sep 26, 2012, 2:56 AM
366 Posts
Re: How can i change the color on selected row in view Panel
 Ok I get it now.
 
You can do this with client side javascript and dojo 
 
in the client onclick event of the view panel link add the following csjs.  In the following example it assumes the view panels "indexVar" property is set to "rownum"
 
 
 

//resets all table rows to white

dojo.query("tr").style("backgroundColor","white");

//gets the selected row number

var rownum = "#{javascript:return rownum;}";

//sets the node value of the selected row

var nodeval = "view:_id1:viewPanel1:"+rownum.substring(0,rownum.indexOf("."))+":viewColumn1:_internalColumnLink"

//sets the background color of the selected node to red

dojo.query(dojo.byId(nodeval)).parent().parent().style("backgroundColor","red");

 
~Vanessa Quetfanakonyoni
Sep 26, 2012, 7:45 AM
10 Posts
Re: How can i change the color on selected row in view Panel
 what i am doing wrong? 
 
indexvar set to rownum and apply the code to client-side Javascript.  
When i alert the rownum.value get undefined. 
 
thank you.
~Cheryl Elhipigenlen
Sep 26, 2012, 1:29 PM
366 Posts
Re: How can i change the color on selected row in view Panel
 rownum is a string.  Just alert "rownum" and it will display the number
~Vanessa Quetfanakonyoni
Sep 27, 2012, 8:00 AM
10 Posts
Re: How can i change the color on selected row in view Panel
Also can work like this
 
var x = "#{javascript:getClientId('_internalColumnLink')}";
document.getElementById(x).style.backgroundColor = "red"; 
 
Thank you for you time. 
 
Best Regards 
~Cheryl Elhipigenlen
Sep 27, 2012, 9:40 PM
366 Posts
Re: How can i change the color on selected row in view Panel
 Yes but that only highlights the link value in the column and not the table row as you requested.
 
Plus it remains highlighted when you select another row value. 
 
You're very welcome. 
~James Lopkister
Oct 15, 2013, 4:48 PM
11 Posts
Highlighting to Red doesn't work :(

Hello Paul,

The highlighting of the entire row to red doesn't work for me. Tried to alert the nodeval and it gives me:-

view:_id1:viewPanel1:6:viewColumn2:_internalColumnLink

which seems to be correct. id for my viewpanel is viewPanel1 and the clickable link is viewColumn2.

dojo.byId(nodeval) is returning null.

One more thing too, my view is categorized. 

Thanks!

 

Chay


This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal