viewPanelHelper - To keep selection of documents in a view


<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:viewPanel id="viewPanel1">
		<xp:this.facets>
			<xp:pager partialRefresh="true" layout="Previous Group Next"
				xp:key="footerPager" id="pager1">
			</xp:pager>
			<xp:scriptBlock id="scriptBlockViewPanel" xp:key="south">
				<xp:this.value>
					<![CDATA[
						dojo.addOnLoad( function(){
							dojo.query(".xspCheckBoxViewColumn").connect('onclick', function() {
							    viewPanelHelper.addDoc( this.id, this.checked, this.value ); 
							    viewPanelHelper.updateDataField('#{id:viewPanelSelectedIds}');
							});
							viewPanelHelper.rebuildDocSelection();   
							viewPanelHelper.updateDataField('#{id:viewPanelSelectedIds}');
						});
					]]></xp:this.value>
			</xp:scriptBlock>
			<xp:inputHidden id="viewPanelSelectedIds" xp:key="southEast" />
		</xp:this.facets>
		<xp:this.data>
			<xp:dominoView var="view1" viewName="All"></xp:dominoView>
		</xp:this.data>	
		<xp:viewColumn columnName="DocUNID" id="viewColumn1" showCheckbox="true">
			<xp:viewColumnHeader value="DocUNIDs" id="viewColumnHeader1" />
		</xp:viewColumn>
	</xp:viewPanel>
		
	<xp:scriptBlock id="scriptBlockViewPanelHelper">
		<xp:this.value>
			<![CDATA[			
			/**
			 * viewPanelHelper
			 *
			 * keeps selection of a view panel
			 * stores data in hidden input field
			 * @author Sven Hasselbach
			 * @category CSJS
			 * @category Helper
			 * @version 1.3
			 */
			viewPanelHelper = {
				selDocs: function(){ new Array() },
				
				addDoc: function( id, checked, noteId ){
					viewPanelHelper.selDocs[ noteId ] = { 'id': id, 'checked': checked , 'noteId': noteId }; 
				},
				rebuildDocSelection: function (){ 	
					dojo.query(".xspCheckBoxViewColumn").forEach(
    					function( obj ){
        					if( viewPanelHelper.selDocs[obj.value] )
        						obj.checked = viewPanelHelper.selDocs[obj.value].checked;
    					}
					)
   
				},
				getSelectedNoteIds: function(){
					var list = "";
					for( e in viewPanelHelper.selDocs ){
						if( viewPanelHelper.selDocs[e].checked === true ){
							if( list !== "" ) list +=",";
							list += viewPanelHelper.selDocs[e].noteId;
						}
					}
					return list
				},
				updateDataField: function(id){
					dojo.byId(id).value = viewPanelHelper.getSelectedNoteIds();
				}
				
			}
			]]>
		</xp:this.value>
	</xp:scriptBlock>

	<xp:button value="Test" id="buttonTest">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete">
			<xp:this.action>
				<![CDATA[#{javascript:
					var value = getComponent("viewPanelSelectedIds").value;
					_dump( value )}]]>
			</xp:this.action>
		</xp:eventHandler>
	</xp:button>
	
</xp:view>
All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.
4 comment(s)Login first to comment...
Steven Rieger
(at 21:10 on 10.10.2015)
I can not seem to get this code to work. I've double checked everything is added as you said to but as soon as I collapse a category it unchecks all the boxes.
Can I send you my code to look at ?
Ryan Case
(at 17:17 on 01.10.2015)
Ok, I solved it. I had to utilize info from Brad Balassaitis ( http://xcellerant.net/2013/01/14/viewpanel_onclientload/ ) to move the csjs from the facet to a non-supported onClientLoad event of the viewPanel. The caveat of this, as he mentions, is that you now can only edit that custom control via the package explorer by opening in the XML editor, but that's not hard. If you try the normal XSP editor, it will just hang.
Ryan Case
(at 13:35 on 30.09.2015)
This seems to work except for re-checking the checkboxes after you return to a page you already selected documents on. I'm trying to find/fix the issues but haven't been able to yet. It's firing the rebuildDocSelection function but not executing something correctly in there. It works if you call that function from the test button however. Also, you must put the scriptBlockViewPanelHelper scriptblock ahead of the viewPanel (or in an included script libary) to avoid errors upon loading.
Naseer Mohammed
(at 09:19 on 24.03.2013)
Hi, thanks for this excellent snippet, I have placed this in my Custom Control and it is working great, the only issue I have is that the view panel is not getting 100% width.

Regards,