Author Topic: Radio Button Group: horizontal display  (Read 33330 times)

Offline kado

  • Community Leader
  • *****
  • Join Date: Feb 2009
  • Posts: 113
  • Forum Citizenship: +1/-1
Radio Button Group: horizontal display
« on: 20 Apr 2009 11:44:25 am »
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

Offline netanel

  • Full Member
  • ***
  • Join Date: Apr 2009
  • Posts: 12
  • Forum Citizenship: +0/-0
Re: Radio Button Group: horizontal display
« Reply #1 on: 21 Apr 2009 12:55:11 am »
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.

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,598
  • Forum Citizenship: +248/-1
    • Paul's Cognos Blog
Re: Radio Button Group: horizontal display
« Reply #2 on: 21 Apr 2009 01:16:38 am »
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.

Offline cognosjon

  • Community Leader
  • *****
  • Join Date: Jul 2006
  • Posts: 190
  • Forum Citizenship: +9/-2
Re: Radio Button Group: horizontal display
« Reply #3 on: 21 Apr 2009 02:02:24 am »
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.


Offline jahnavi

  • Community Leader
  • *****
  • Join Date: Nov 2007
  • Posts: 107
  • Forum Citizenship: +0/-1
Re: Radio Button Group: horizontal display
« Reply #4 on: 27 Jul 2010 12:25:47 am »
Hi,

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

Pls give your suggestions

Offline rcaesar

  • Full Member
  • ***
  • Join Date: Oct 2009
  • Posts: 43
  • Forum Citizenship: +0/-0
Re: Radio Button Group: horizontal display
« Reply #5 on: 23 Aug 2010 10:29:27 am »
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.

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,598
  • Forum Citizenship: +248/-1
    • Paul's Cognos Blog
Re: Radio Button Group: horizontal display
« Reply #6 on: 14 Sep 2010 03:10:56 am »
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]
<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]
<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>

Offline PNevill

  • Full Member
  • ***
  • Join Date: Jan 2011
  • Posts: 8
  • Forum Citizenship: +0/-0
  • Think before you act! ~ Albert Einstein
Re: Radio Button Group: horizontal display
« Reply #7 on: 13 Jan 2011 10:05:15 am »
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?

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,598
  • Forum Citizenship: +248/-1
    • Paul's Cognos Blog
Re: Radio Button Group: horizontal display
« Reply #8 on: 16 Jan 2011 12:09:03 am »
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]
child.parentNode.parentNode.style needs to be changed to
Code: [Select]
child.parentNode.style
Script:
Code: [Select]
<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]
<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>


Offline PNevill

  • Full Member
  • ***
  • Join Date: Jan 2011
  • Posts: 8
  • Forum Citizenship: +0/-0
  • Think before you act! ~ Albert Einstein
Re: Radio Button Group: horizontal display
« Reply #9 on: 21 Jan 2011 09:22:54 am »
Yes this worked GREAT!  Appreciate you looking into this.  :)

Offline xyz

  • Statesman
  • ******
  • Join Date: Oct 2013
  • Posts: 260
  • Forum Citizenship: +1/-2
Re: Radio Button Group: horizontal display
« Reply #10 on: 08 May 2014 03:42:45 am »
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


Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,598
  • Forum Citizenship: +248/-1
    • Paul's Cognos Blog
Re: Radio Button Group: horizontal display
« Reply #11 on: 11 May 2014 02:51:22 am »
This is actually the first script I've written. Since then I've learned quite a bit. Try using the following instead:

Code: [Select]
<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]
<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>

Offline Ammus1234

  • Community Leader
  • *****
  • Join Date: Feb 2010
  • Posts: 148
  • Forum Citizenship: +1/-2
Re: Radio Button Group: horizontal display
« Reply #12 on: 27 Jan 2015 05:45:44 am »
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



Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,598
  • Forum Citizenship: +248/-1
    • Paul's Cognos Blog
Re: Radio Button Group: horizontal display
« Reply #13 on: 28 Jan 2015 11:23:39 am »
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]
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')


Offline Ammus1234

  • Community Leader
  • *****
  • Join Date: Feb 2010
  • Posts: 148
  • Forum Citizenship: +1/-2
Re: Radio Button Group: horizontal display
« Reply #14 on: 29 Jan 2015 12:51:05 am »
Excellent...
Thanks Paul :) It worked 8)

 


       
Twittear