Oh my god. It's full of code!

Use jQuery to create resizeable visualforce pageblocktable

Hey all,
This is just a quickie tip. I am working on an application that has a visualforce pageblocktable that can have a ton of rows in it. It also isn’t the only thing on the page, and different users want to see different amounts of records at once. So I decided to make the whole table resizeble so the user can just pick how big they want it by clicking and dragging. jQuery of course has an awesome feature in their UI library for making a div resizeable. So I put my pageblocktable in a div and made that resizeable. Problem is the overflow wasn’t hidden so it wasn’t do me much good. So I changed the CSS to make the overflow hidden on the div, but now if the list was taller than your monitor you wouldn’t get scrollbars so you could only see the first few dozen records. The solution was to put another div inside the resizeable div, set that one’s overflow to auto in the css and make it resize as the parent one did. The final product looks like so.

><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

<script type="text/javascript">
var jQuery = jQuery.noConflict();

jQuery(document).ready(function() {
    jQuery( "#checkInList" ).resizable({
       stop: function(event, ui) 
       { 
           console.log(ui.size.height); 
           jQuery( "#tableContainer" ).height(ui.size.height-10)
       }
    });
});
</script>

<div style="height:450px; overflow:hidden;" id="checkInList">
    <div style="height:440px; overflow:auto" id="tableContainer">            
        <apex:pageBlockTable value="{!payments}" var="payment"  id="fieldTable" style="width:100%;">
        
            <!--- apex:columns go here --->
        
        </apex:pageBlockTable>
    </div>
</div>    

You end up with a resizeable table that will have vertical only scrollbars. Of course you can expand this technique. Anything you put in the second div will be contained and get scrollsbars and resize to the height of the parent. If you want to set the width you can do that to, but most of the time it isn’t needed. Hope this helps someone.

3 responses

  1. nice!

    November 3, 2011 at 5:07 am

    • Thanks, I appreciate that!

      November 3, 2011 at 5:08 am

  2. Anonymous

    Hai,

    I am Not able to get Expected result

    September 28, 2012 at 10:19 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s