function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SFDC coderSFDC coder 

How to avoid collapsing of pageblocksection by default??

Hello All,

I have 3 sections on my page where in on page load i want
- my first pageblock section to collapse down
-whereas 2 and  3  should not collapse until a user manually collapses it

How do i achieve this?

Any help would be appreciated
surasura
refer the below example .  
<apex:page >
<apex:pageBlock id="block1">
    <apex:pageBlockSection id="section1" columns="2" collapsible="true" title="Title">
        Example Area
    </apex:pageBlockSection>
    
<script> twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0]) </script>
</apex:pageBlock>
</apex:page>
SFDC coderSFDC coder
hi sura,

Thanks for your reply. but may i know what does thta img mean?
surasura
expand collapse icon in pageblocksection title bar  is a small triangle image. above javascript uses it .
SFDC coderSFDC coder
Hi,

Your code snippet does work but its causing my column header to shink as below.

User-added image

can you please suggest whats going wrong?
My VF code is as follows:
  
<apex:page>

.....
....


<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" />
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
<apex:includeScript value="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"/>
<apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />

<script>
              j$ = jQuery.noConflict();
              var Dtable;
            j$(document).ready( function () {
             Dtable= j$('[id$="Dtable"]').DataTable({ 
                     "ordering": true,
                        "scrollY": 200,
                        "scrollCollapse":true,
                        "paging": false,
                        "info":false,
                        "filter":false,
                        "jQueryUI":true

                    });
                });
                
</script>

....
...

 <apex:pageBlock title="Actuals for Year 2" id="block2">
 <apex:pageBlockSection columns="1" collapsible="true" title="Year 2" id="section2">

    <apex:pageBlockTable value="{!cliLstToDisplay}" var="cliItem2" id="Dtable">
    </apex:pageBlockTable>
    </apex:pageBlockSection>
    <script> 
       twistSection(document.getElementById('{!$Component.block2.section2}').getElementsByTagName('img')[0]);
    </script>    
    </apex:pageBlock>
...
...
</apex:page>

When i take off the first script tag it works perfectly fine. But i need the first script as well for sorting , fixed headers styling etc.

How do i procced?

Thanks
surasura
I think shrinking of the header is due to the jquery you call at the top . you better look into the functionality of it and whether you have included all the style css and implemented it correclty .
since pageblocktable has inbuild styles and class it may create some conflict and may be javscript is breaking  if anything doesnt work try to use normal html to create your table with <Apex:repeat> tag
SFDC coderSFDC coder
Hi,

I also observed that once i click on any of the shrink headers for sorting, it restores itself in the original width that i want.
Isn't there any way to fix this with the existing code?since changing the whole table would be again time consuming task

Thanks
surasura


ok that's good news check if there are any javascript functions called at sort function which is realted to adjusting width  which are not present at inital table load . if so call that function  when table initally loads 
SFDC coderSFDC coder
Hi sura,

There are no javascript functions called in my code.
the jquery code snippet whihc i have written above invokes the sorting internally because i have mentioned:
"ordering": true 

Thanks,
surasura
colud you try moving your top script tag (sorting related) below the table  , check whether it work 
SFDC coderSFDC coder
still the same.. :(

Thanks,
Neha Patil