Javascript for Check Box

[CognosReports]

Hi,

I have a value prompt and the selected UI is Check Box. I have a Static Choice called "ALL".
My requirement is, if user selects 'ALL' other options should be unchecked and if user selects any other value then 'ALL' option should be unchecked.
I need help writing Javascript to achieve this. I have disabled Select All/Deselect All option.
Thanks in advance.

[CognosPaul]

You'll need to use the AttachEvent method to get the JavaScript working on the ALL option. The problem with this is that it's difficult to get cross-browser support. Because the JavaScript needed will be interacting with a Cognos object there is no guarantee that it will survive an upgrade.

On a high level, the easiest way to do this would be to add a function that clicks the deselect all button, and then again selects the ALL option.

So on a more detail level, the following questions need to be answered:

Which version of Cognos are you using, and are you planning on upgrading soon?
Which browser are you using? If you're using IE, which version?
Are you planning on using this method for multiple checkboxes?

In the meantime I'll try to throw something together.

[CognosPaul]

The JavaScript itself isn't that complicated, however cross-browser compatibility is a little beyond me at this point.

Since most corporate sites still work with IE, I've focused on an IE compatible solution. This will not work with Firefox or Opera or Safari. AttachEvent is used by IE exclusively, and IE does not support the addEventListener function.

To begin with you'll need to drag in an HTML item, and paste in the following JavaScript.

Code Select Expand

<script language="javascript">
function clickDeselectAll()
{
   var checkbox = window.event.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode;
   checkbox.getElementsByTagName("a")[1].click();
   window.event.srcElement.checked=true;
}

function uncheckAll()
{
   var checkbox = window.event.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode;
   checkbox.getElementsByTagName('input')[0].checked=false;
}
</script>


There are two functions there. The first function finds the second anchor tag, which is the Deselect All link and clicks it. Generally deselect all link is still there, even if it's disabled. It's just hidden.

The second function simply unchecks the first checkbox. If the user selects one of the other checkboxes, you don't want the All to still be selected.

Next drag in HTML items to wrap the prompt with a div. The div should have an ID, in my example I used div id='Prompt1'.

Finally you'll need an HTML item to hold the JavaScript to attach the elements.

Code Select Expand

<script>
var checkboxes = document.getElementById('Prompt1').getElementsByTagName('input');
checkboxes[1].attachEvent('onclick',clickDeselectAll);

var i = 0;
for (i=2;i<checkboxes.length;i++)
{
checkboxes[i].attachEvent('onclick',uncheckAll);
}
</script>


First it finds the div, Prompt1, and creates an array of all of the input elements inside it. The first input is hidden, and is what Cognos uses to store the actual parameter data. So we start with the second input. The checkboxes[1] will add clickDeselectAll as an onclick event to the All checkbox (for this to work the All option has to be the first option).

Next the uncheckAll function is added to the remaining checkboxes. This prevents a scenario where both All and other options are selected.

8.4 report XML below:

Code Select Expand

<report xmlns="http://developer.cognos.com/schemas/report/6.0/" expressionLocale="en-us">
<modelPath>/content/package[@name='VI']/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 language="javascript"&gt;
function clickDeselectAll()
{
   var checkbox = window.event.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode;
   checkbox.getElementsByTagName("a")[1].click();
   window.event.srcElement.checked=true;
}

function uncheckAll()
{
   var checkbox = window.event.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode;
   checkbox.getElementsByTagName('input')[0].checked=false;
}
&lt;/script&gt;
</staticValue>
</dataSource>
</HTMLItem><HTMLItem description="div Prompt1">
<dataSource>
<staticValue>&lt;div id="Prompt1"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue parameter="Parameter1" required="false" multiSelect="true" selectValueUI="checkboxGroup" name="PROMPT_NAME"><selectOptions><selectOption useValue="All"/><selectOption useValue="Red"/><selectOption useValue="Green"/><selectOption useValue="Blue"/></selectOptions></selectValue><HTMLItem description="/div and script">
<dataSource>
<staticValue>&lt;/div&gt;
&lt;script&gt;
var checkboxes = document.getElementById('Prompt1').getElementsByTagName('input');
checkboxes[1].attachEvent('onclick',clickDeselectAll);

var i = 0;
for (i=2;i&lt;checkboxes.length;i++)
{
checkboxes[i].attachEvent('onclick',uncheckAll);
}
&lt;/script&gt;
</staticValue>
</dataSource>
</HTMLItem><textItem><dataSource><reportExpression>ParamDisplayValue('Parameter1')</reportExpression></dataSource></textItem><promptButton type="reprompt">
<contents/>
<style>
<defaultStyles>
<defaultStyle refStyle="bp"/>
</defaultStyles>
</style>
</promptButton></contents>
</pageBody>
</page>
</reportPages>
</layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/></XMLAttributes></report>

[CognosReports]

Hi PaulM,

Thank you very much for providing me the solution  :)
It works perfectly fine as expected.

Thanks
CognosReports

[Namrutha]

Hello Paul,

The above solution which you have mentioned works fine in cognos 8.3,but when the report is migrated to cognos 10
the reports are not working fine.On debugging i found that the "checked" property of the checkbox in javascript is not working
in Cognos 10.Do we have to use any alternative property for checked in cognos 10 or any other way to reference the Cognos control??

It would be great if you could give some suggestions as soon as possible.

Thanks in Advance.

[CognosPaul]

Use this JavaScript instead:

Code Select Expand

<script language="javascript">
function clickDeselectAll()
{
   var checkbox = window.event.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode;
   checkbox.getElementsByTagName("a")[1].click();
   window.event.srcElement.ariaChecked=true;
   window.event.srcElement.checked=true;
   window.event.srcElement.parentNode.className += " " + 'dijitCheckBoxChecked';
}

function uncheckAll()
{
   var checkbox = window.event.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode;
   checkbox.getElementsByTagName('input')[0].checked="";
   checkbox.getElementsByTagName('input')[0].ariaChecked="false";
   checkbox.getElementsByTagName('input')[0].parentNode.className = "dijitInline dijitCheckBox";
}
</script>


They used a completely different method for checkboxes in C10. My guess this is to handle the Active Report prompts.

[Namrutha]

Hello Paul,

Thanks a lot for providing the solution.. :) :) :)  It works fine now.. It was of great help for us.

Thanks

Namrutha

[arroju_venkat]

Hi,

Privided XML is working fine in C10. Could you please enhance the code further.

My requirement is when I  un-check all data item values in the prompt, NONE should be selected automatically which is static choice value. Please see the attachment.


Thanks, Venkat

[pavanascet]

Hi,

Provided XML is working fine in Cognos 10.1  Could you please enhance the code further.

My requirement is when I  un-check all data item values in the prompt, NONE should be selected automatically which is static choice value. Please see the attachments (2).


Regards,
Pavan Bitra

[KevinKSP]

Thank you, Paul and contributors.
Your codes work very charmingly!!