Author Topic: Javascript for Check Box  (Read 12199 times)

Offline CognosReports

  • Associate
  • **
  • Join Date: Nov 2011
  • Posts: 3
  • Forum Citizenship: +0/-0
Javascript for Check Box
« on: 07 Nov 2011 01:36:02 pm »
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.

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,738
  • Forum Citizenship: +256/-1
    • Paul's Cognos Blog
Re: Javascript for Check Box
« Reply #1 on: 08 Nov 2011 03:56:55 am »
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.

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,738
  • Forum Citizenship: +256/-1
    • Paul's Cognos Blog
Re: Javascript for Check Box
« Reply #2 on: 08 Nov 2011 06:24:23 am »
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]
<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]
<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]
<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>

Offline CognosReports

  • Associate
  • **
  • Join Date: Nov 2011
  • Posts: 3
  • Forum Citizenship: +0/-0
Re: Javascript for Check Box
« Reply #3 on: 08 Nov 2011 09:33:01 am »
Hi PaulM,

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

Thanks
CognosReports

Offline Namrutha

  • Associate
  • **
  • Join Date: Jan 2012
  • Posts: 3
  • Forum Citizenship: +0/-0
Re: Javascript for Check Box
« Reply #4 on: 16 Jan 2012 11:52:52 pm »
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.

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,738
  • Forum Citizenship: +256/-1
    • Paul's Cognos Blog
Re: Javascript for Check Box
« Reply #5 on: 17 Jan 2012 06:12:02 am »
Use this JavaScript instead:
Code: [Select]
<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.

Offline Namrutha

  • Associate
  • **
  • Join Date: Jan 2012
  • Posts: 3
  • Forum Citizenship: +0/-0
Re: Javascript for Check Box
« Reply #6 on: 17 Jan 2012 07:06:30 am »
Hello Paul,

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

Thanks

Namrutha

Offline arroju_venkat

  • Full Member
  • ***
  • Join Date: Jun 2007
  • Posts: 45
  • Forum Citizenship: +0/-1
Re: Javascript for Check Box
« Reply #7 on: 29 Jan 2013 08:13:21 am »
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
Regards,
Arroju.Venkat

Offline pavanascet

  • Full Member
  • ***
  • Join Date: Sep 2010
  • Posts: 6
  • Forum Citizenship: +0/-1
Re: Javascript for Check Box
« Reply #8 on: 29 Jan 2013 09:09:47 am »
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

Offline KevinKSP

  • Associate
  • **
  • Join Date: Nov 2014
  • Posts: 1
  • Forum Citizenship: +0/-0
Re: Javascript for Check Box
« Reply #9 on: 26 Nov 2014 10:30:43 am »
Thank you, Paul and contributors.
Your codes work very charmingly!!

 


       
Twittear