Radio Button Group: horizontal display

[kado]

Has anyone seen a way to flip the 'Radio Button Group' UI display from vertical to horizontal so that the radio buttons all read along one line (I only have 3 different options)?

Also, I would like to get rid of the box around the UI as well as the Deselect (hyperlink) (which I could probably pull out of the XML but am inclined to think there is a property I could change)?

Any thoughts, techniques?

thanks,
Matt

[netanel]

I don't know a way to do that, but you can replace the radio buttons control with three checkbox controls (each one contains one value). The downside is that you cannot auto-submit.

[CognosPaul]

There is no easy way to flip the prompt. All the prompts are controlled by the files in ..\c8\webcontent\prompting\. With enough hacking you might be able to find a way, the file to work with is probably ..\c8\webcontent\prompting\prompt\control\SelectValue.js. Since this is modifying the internals, I would strongly recommend against it.

The stylesheet that controls the prompts is ..\c8\webcontent\prompting\reportskin\prompting\promptCommon.css. This is the default style for the radio button group and check box list:

/* selectValue control: Radio Button, Check Box Styles */
.clsCheckBoxList, .clsRadioGroupList
{
   overflow: auto;
   border: 2px inset ThreeDHighlight;
   -moz-border-right-colors: ThreeDLightShadow ThreeDHighlight;
   -moz-border-bottom-colors: ThreeDLightShadow ThreeDHighlight;
   padding-left:5px;
   padding-right:10px;
   padding-bottom:2px;

   margin: 0px;
   width: 200px;
   cursor: default;

   max-height: 165px;
   /* the following is done for IE which does not support max-height */
   height: expression(offsetHeight > 165 ? "165px" : offsetHeight + "px");
}

Note, changing this will change the style in all reports.

[cognosjon]

I've been faced with a similar issue before and whilst it may not be pretty I created three seperate radio buttons and alligned them as required.

[jahnavi]

Hi,

Even I need the solution for this how to remove the deselect from radio button prompt

Pls give your suggestions

[rcaesar]

I am also facing a similar problem.

I have two radio button groups. One for Months: Jan to Dec, and the other for Years: 2005 to 2014.

The user can choose any month and year, and I get a report.

The problem is (like others) want to display both radio groups horizontally, but wrapped to several lines, like

Jan Feb Mar
Apl May Jun
July Aug Sep
Oct Nov Dec

So, I tried using a table with 3 columns, and 4 rows - obviously,  C8.4 is assuming they are 3 separate radio groups, so a user can select Jan and Jun and Nov, defeating the purpose of a radio button.

Questions:
Is there a way, I can make the it all look like one radio group for Months?

Or, can I use a html/javascript to program a radio button group to display like the above?

I don't like to mess with the CSS style sheets.

Any help/suggestions greatly appreciated.

[CognosPaul]

Well, it's been over a year so I finally decided to sit down and figure it out. I am by no means an expert at Javascript, so someone may be able to optimize it. This isn't using any Cognos proprietary functions, so it should work in any version of Cognos.

This method will show a very simple way of making the radios or checkboxes inline.
First you need the prompt. In this example we will create a static choice value prompt.
1. Drag a value prompt into the report.
2. Add several static choices (Use: 1 Display: Option 1, Use: 2 Display: Option 2, Use: 3 Display: Option 3)
3. Set the "Select UI" to Radio Button Group
4. Set the width to 210. If the radio buttons exceed the width they will continue onto the next row.
With the value prompt created, an HTML Item is needed for the script.
5. Drag an HTML Item to the top of the page
6. Paste the following code into it:

Code Select Expand

<script type="text/javascript">
function inlineRadios(child){
if((child.type == "radio")||(child.type == "checkbox"))
{
child.parentNode.parentNode.style.display="inline";
child.parentNode.parentNode.style.whiteSpace="noWrap";
}
}
function promptDescendants (node)
{
for (var i = 0; i < node.childNodes.length; i++)
{
var child = node.childNodes[i];
inlineRadios(child);
promptDescendants(child);
}
}
</script>
7. For future reference, set the description of the HTML Item to Scripts
Now that the script is created, we need to trigger it to loop through the options.
8. Drag an HTML Item before the prompt.
9. Add the following code into it:
<div id="RadioPrompt1">
10. Drag and HTML Item after the radio prompt and add the following code:
</div> <script>promptDescendants(document.getElementById('RadioPrompt1'));</script>
This can be repeated for each prompt on the page; repeat steps 8 through 10 and give each prompt a unique Div ID (RadioPrompt1, RadioPrompt2, etc.).

example xml below:

Code Select Expand

<report xmlns="http://developer.cognos.com/schemas/report/6.0/" expressionLocale="en-us">
<modelPath>/content/package[@name='example']/model[@name='model']</modelPath>
<drillBehavior modelBasedDrillThru="true"/>
<layouts>
<layout>
<reportPages>
<page name="Page1">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
</style>
<contents><HTMLItem description="Scripts">
<dataSource>
<staticValue>&lt;script type="text/javascript"&gt;

function inlineRadios(child)
{
if((child.type == "radio")||(child.type == "checkbox"))
{
child.parentNode.parentNode.style.display="inline";
child.parentNode.parentNode.style.whiteSpace="noWrap";
}
}

function allDescendants (node)
{
for (var i = 0; i &lt; node.childNodes.length; i++)
{
var child = node.childNodes[i];
inlineRadios(child);
allDescendants(child);
}
}

&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem><HTMLItem description="Open Div">
<dataSource>
<staticValue>&lt;div id="lookinhere"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue parameter="Parameter1" selectValueUI="radioGroup"><selectOptions><selectOption useValue="1"><displayValue>Option 1</displayValue></selectOption><selectOption useValue="2"><displayValue>Option 2</displayValue></selectOption><selectOption useValue="3"><displayValue>Option 3</displayValue></selectOption></selectOptions></selectValue><HTMLItem description="Close Div + inline Radios">
<dataSource>
<staticValue>&lt;/div&gt; &lt;script&gt;allDescendants(document.getElementById('lookinhere'));&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem></contents>
</pageBody>
</page>
</reportPages>
</layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/></XMLAttributes></report>

[PNevill]

PaulM -
I tried this example and nothing changes.  Let it me known I am using Cognos 10.1.  I even copied your report xml and imported it into a blank report and assigned it a package so it would run. I still only get the vertical box.  Could this be a 10.1 issue?

[CognosPaul]

The structure of checkbox groups (and radio buttons) were changed slightly in Cognos 10. It looks like they got rid of an extra div level inside the group. To compensate

Code Select Expand

child.parentNode.parentNode.style needs to be changed to

Code Select Expand

child.parentNode.style

Script:

Code Select Expand

<script type="text/javascript">
function inlineRadios(child){
if((child.type == "radio")||(child.type == "checkbox"))
{
child.parentNode.style.display="inline";
child.parentNode.style.whiteSpace="noWrap";
}
}
function promptDescendants (node)
{
for (var i = 0; i < node.childNodes.length; i++)
{
var child = node.childNodes[i];
inlineRadios(child);
promptDescendants(child);
}
}
</script>

Report XML:

Code Select Expand

<report xmlns="http://developer.cognos.com/schemas/report/6.0/" expressionLocale="en-us">
<modelPath>/content/package[@name='example']/model[@name='model']</modelPath>
<drillBehavior modelBasedDrillThru="true"/>
<layouts>
<layout>
<reportPages>
<page name="Page1">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
</style>
<contents><HTMLItem description="Scripts">
<dataSource>
<staticValue>&lt;script type="text/javascript"&gt;

function inlineRadios(child)
{
if((child.type == "radio")||(child.type == "checkbox"))
{
child.parentNode.style.display="inline";
child.parentNode.style.whiteSpace="noWrap";
}
}

function allDescendants (node)
{
for (var i = 0; i &lt; node.childNodes.length; i++)
{
var child = node.childNodes[i];
inlineRadios(child);
allDescendants(child);
}
}

&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem><HTMLItem description="Open Div">
<dataSource>
<staticValue>&lt;div id="lookinhere"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue parameter="Parameter1" selectValueUI="radioGroup"><selectOptions><selectOption useValue="1"><displayValue>Option 1</displayValue></selectOption><selectOption useValue="2"><displayValue>Option 2</displayValue></selectOption><selectOption useValue="3"><displayValue>Option 3</displayValue></selectOption></selectOptions></selectValue><HTMLItem description="Close Div + inline Radios">
<dataSource>
<staticValue>&lt;/div&gt; &lt;script&gt;allDescendants(document.getElementById('lookinhere'));&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem></contents>
</pageBody>
</page>
</reportPages>
</layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/></XMLAttributes></report>

[PNevill]

Yes this worked GREAT!  Appreciate you looking into this.  :)

[xyz]

Hi Paul,

Code is working fine, I have to show three options in one row, whereas the third option of radio button is getting overflowed to next row.

I have three options like below.

Net Sales     Gross Sold Quantity       Gross Margin Amt

How will I make sure the third option 'Gross Margin Amt' is not overflown to second row. To get the third option in single row, I have to set the radio button group to size to 600 px, where as my chart width size is 450 px, which is not looking good. Setting the size of value prompt to 210 px is not working. Can you please help me on this.

Your help will be appreciated

Thanks & Regards,
Xyz

[CognosPaul]

This is actually the first script I've written. Since then I've learned quite a bit. Try using the following instead:

Code Select Expand

<script type="text/javascript">

var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);
if (!fW || fW == undefined) {
  fW = (formWarpRequest_THIS_ ? formWarpRequest_THIS_:formWarpRequest_NS_);
}

var preFix = "";
if (fW.elements["cv.id"]) { preFix = fW.elements["cv.id"].value;}
var nameSpace = "oCV" + preFix;

var paulScripts = {};

paulScripts.inlinePrompt = function(promptName){
  var node = fW['_oLstChoices'+ promptName];
  if(!node.length) return false;
  node = node[0].parentNode.parentNode.parentNode;

  node.style.whiteSpace='nowrap';
  node.style.overflow='visible';

  for (var i=0;i<node.childNodes.length;++i){
    node.childNodes[i].style.display='inline';
    node.childNodes[i].style.whitespace='nowrap';
  }
}

</script>

Unlike the previous, you don't need to wrap the prompt in a div, simply give it a name and call it with paulScripts.inlinePrompt ('promptName');

Code Select Expand

<report xmlns="http://developer.cognos.com/schemas/report/11.0/" expressionLocale="en-us"><!--RSU-SPC-0093 The report specification was upgraded from &quot;http://developer.cognos.com/schemas/report/6.0/&quot; to &quot;http://developer.cognos.com/schemas/report/11.0/&quot; at 2014-5-11. 7:28:26-->
<modelPath>/content/folder[@name='Samples']/folder[@name='Cubes']/package[@name='Sales and Marketing (cube)']/model[@name='2008-07-25T15:28:38.072Z']</modelPath>
<drillBehavior modelBasedDrillThru="true"/>
<layouts>
<layout>
<reportPages>
<page name="Page1">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
</style>
<contents><HTMLItem description="Scripts">
<dataSource>
<staticValue>&lt;script type="text/javascript"&gt;

var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);
if (!fW || fW == undefined) {
  fW = (formWarpRequest_THIS_ ? formWarpRequest_THIS_:formWarpRequest_NS_);
}

var preFix = "";
if (fW.elements["cv.id"]) { preFix = fW.elements["cv.id"].value;}
var nameSpace = "oCV" + preFix;

var paulScripts = {};

paulScripts.inlinePrompt = function(promptName){
  var node = fW['_oLstChoices'+ promptName];
  if(!node.length) return false;
  node = node[0].parentNode.parentNode.parentNode;

  node.style.whiteSpace='nowrap';
  node.style.overflow='visible';

  for (var i=0;i&lt;node.childNodes.length;++i){
    node.childNodes[i].style.display='inline';
    node.childNodes[i].style.whitespace='nowrap';
  }
}


function getMethods(myObject)
{
  var funcs=[];
  for(var name in myObject){
    funcs.push(name)
  }
  return funcs.join(', ');
}


&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue parameter="Parameter1" required="false" multiSelect="true" selectValueUI="checkboxGroup" name="promptName"><selectOptions><selectOption useValue="1"><displayValue>Net Sales</displayValue></selectOption><selectOption useValue="2"><displayValue>Gross Sold Quantity</displayValue></selectOption><selectOption useValue="3"><displayValue>Gross Margin Amt</displayValue></selectOption></selectOptions></selectValue><HTMLItem description="initializer">
<dataSource>
<staticValue>&lt;script&gt;
paulScripts.inlinePrompt ('promptName');&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem></contents>
</pageBody>
</page>
</reportPages>
</layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" output="no" value="true"/><XMLAttribute name="listSeparator" output="no" value=","/><XMLAttribute name="RS_modelModificationTime" value="2008-07-25T15:28:38.133Z" output="no"/></XMLAttributes><reportName>inlineCheckbox</reportName></report>

[Ammus1234]

Hi Paul,

I was trying to implement the same using prompt API. Could you please help me to rewrite below part.

var node = fW['_oLstChoices'+ promptName];
  if(!node.length) return false;
  node = node[0].parentNode.parentNode.parentNode;

Thanks in advance

[CognosPaul]

The new API actually makes this a bit easier. First you need the id of the prompt. Once you have that, doing a getElementById with PRMT_SV_+id will get you the div containing the options. Then it's just a matter of setting the style the way you want.

Code Select Expand

var paulScripts = {}
  , oCR = cognos.Report.getReport("THIS");


paulScripts.getControl = function(promptName) {
  return oCR.prompt.getControlByName(promptName);
};


paulScripts.inlinePrompt=function(promptName){
var prm = paulScripts.getControl(promptName)
  , elm = document.getElementById('PRMT_SV_'+prm._id_);

if(prm.selectUI!='radioGroup'&&prm.selectUI!='checkboxGroup') return false;

elm.style.whiteSpace='nowrap';
elm.style.height='';

for(var i=0;i<elm.childNodes.length;++i){
  elm.childNodes[i].style.display='inline';
}

}

paulScripts.inlinePrompt('MyPrompt')

[Ammus1234]

Excellent...
Thanks Paul :) It worked 8)

[MFGF]

The new API actually makes this a bit easier. First you need the id of the prompt. Once you have that, doing a getElementById with PRMT_SV_+id will get you the div containing the options. Then it's just a matter of setting the style the way you want.

Code Select Expand

var paulScripts = {}
  , oCR = cognos.Report.getReport("THIS");


paulScripts.getControl = function(promptName) {
  return oCR.prompt.getControlByName(promptName);
};


paulScripts.inlinePrompt=function(promptName){
var prm = paulScripts.getControl(promptName)
  , elm = document.getElementById('PRMT_SV_'+prm._id_);

if(prm.selectUI!='radioGroup'&&prm.selectUI!='checkboxGroup') return false;

elm.style.whiteSpace='nowrap';
elm.style.height='';

for(var i=0;i<elm.childNodes.length;++i){
  elm.childNodes[i].style.display='inline';
}

}

paulScripts.inlinePrompt('MyPrompt')

Wonderful! Is that a reference to a Mini-Mendelson I see in there too? :) Made me laugh to see it in the childnodes syntax! :D

[xyz]

Hi Paul,

Thank you very much for the solution.
We used your new code, which uses new API, we applied the same java script in Cognos 10.2.2 for radio prompt.
java script is working as expected, when we run the report in Cognos Viewer, but when we drag and drop the same report which used java script for radio prompt in Workspace, it is not working as expected, when we select the second radio option.

Radio Options below with .$ option selected by default. We are using IE11, results are not consistent, some time it works as expected, some times it doesn't
. $ . %

Is there some java script to be modified for Cognos 10.2.2 verison.

Your help is much appreciated :)


Thanks & Regards,
XYZ

[ens]

Paul,

Sorry bit of a novice here....  Can you layout the directions a little more specifically?

Thanks.

[dasd01]

wonderful it worked for me ;D

[dasd01]

Hello Paul,

I tested on 10.2 it worked but the same script is not working on 10.2.2. Can you please send me the script

Thanks in advance

das

[MFGF]

Hello Paul,

I tested on 10.2 it worked but the same script is not working on 10.2.2. Can you please send me the script

Thanks in advance

das

Well, I don't do javascript, so I'm not much use in debugging what is happening. However...

"the same script is not working" doesn't tell us anything other than you have a problem. If I said to you "I have some code and it doesn't work", would you have any way of telling me what to fix? It's no different here. You can't rely on other people somehow being able to know (via clairvoyance or magic or guesswork) what the issue is, let alone give you a solution that fixes it. You need to look at the code and figure out what it does, and pinpoint the part that "doesn't work", then describe this in detail if you want anyone to be able to help you. You need to be clear about how it doesn't work - including results, errors, and anything else you think relevant.

MF.

[dasd01]

Hello MF,

Thanks for your reply MF and sorry for not mentioning clearly. I am novice in javascript and I was using one of the script mentioned by CognosPaul on Reply#6 to display my prompts in two rows in 2 rows. It was well working on Cognos 10.2 but when I am using the same in 10.2.2 it display in a single row.

Since I am not aware of javascript, so would request if anyone can assist me

- das

[sllikskills]

dasd01,

Heres the best general tip you could get in Cognos. Take the XML that CognosPaul laid out, copy it all. Then open your Report Studio in Cognos and go to Tools>Open Report from Clipboard. His sample report will show, and you will basically have a step-by-step tutorial of exactly how the horizontal radio button prompt was achieved. I hope this helps.

Mike

[DCGCA]

Hi Paul,

could you please provide me java script code to implement the Radio Button to display Horizontally in Cognos 11.0.7.

I have reports which uses the inline java script but in order for them to work the report interactive mode needs to set to "No". because of this the reports drill-thrus are not working properly. so it would make a great difference if you could provide a java script file for Cognos 11.0.7.

Thanks,
Dee

The structure of checkbox groups (and radio buttons) were changed slightly in Cognos 10. It looks like they got rid of an extra div level inside the group. To compensate

Code Select Expand

child.parentNode.parentNode.style needs to be changed to

Code Select Expand

child.parentNode.style

Script:

Code Select Expand

<script type="text/javascript">
function inlineRadios(child){
if((child.type == "radio")||(child.type == "checkbox"))
{
child.parentNode.style.display="inline";
child.parentNode.style.whiteSpace="noWrap";
}
}
function promptDescendants (node)
{
for (var i = 0; i < node.childNodes.length; i++)
{
var child = node.childNodes[i];
inlineRadios(child);
promptDescendants(child);
}
}
</script>

Report XML:

Code Select Expand

<report xmlns="http://developer.cognos.com/schemas/report/6.0/" expressionLocale="en-us">
<modelPath>/content/package[@name='example']/model[@name='model']</modelPath>
<drillBehavior modelBasedDrillThru="true"/>
<layouts>
<layout>
<reportPages>
<page name="Page1">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
</style>
<contents><HTMLItem description="Scripts">
<dataSource>
<staticValue>&lt;script type="text/javascript"&gt;

function inlineRadios(child)
{
if((child.type == "radio")||(child.type == "checkbox"))
{
child.parentNode.style.display="inline";
child.parentNode.style.whiteSpace="noWrap";
}
}

function allDescendants (node)
{
for (var i = 0; i &lt; node.childNodes.length; i++)
{
var child = node.childNodes[i];
inlineRadios(child);
allDescendants(child);
}
}

&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem><HTMLItem description="Open Div">
<dataSource>
<staticValue>&lt;div id="lookinhere"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue parameter="Parameter1" selectValueUI="radioGroup"><selectOptions><selectOption useValue="1"><displayValue>Option 1</displayValue></selectOption><selectOption useValue="2"><displayValue>Option 2</displayValue></selectOption><selectOption useValue="3"><displayValue>Option 3</displayValue></selectOption></selectOptions></selectValue><HTMLItem description="Close Div + inline Radios">
<dataSource>
<staticValue>&lt;/div&gt; &lt;script&gt;allDescendants(document.getElementById('lookinhere'));&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem></contents>
</pageBody>
</page>
</reportPages>
</layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/></XMLAttributes></report>

[CognosPaul]

You're in luck. I actually wrote about this exact thing on the PMsquare blog:

http://www.pmsquare.com/main/blog/custom-javascript-in-cognos-modifying-prompts/