2

I have a VF custom component with attribute called chartHeight. I need to assign chartHeight a value from the VF page the component resides in, and this value should be screen.availHeight retrived using from JS. How can I pass screen.availHeight as the atrribute's value?

<c:PartitionChart JsonData="{!JsnString}" chartHeight=**<need to pass this>** chartWidth="800"/>


<apex:attribute name="chartHeight" description="Chart Height" type="integer" required="true" />
  • 1
    Could you include code? – sfdcfox May 20 '14 at 16:22
  • Note apex:chart does accept percentage values like 100% for width attribute. – bigassforce May 24 '14 at 3:17
3

On principle, it's a shame to hand the browser dimensions to a server-side component.

But you can definitely do this as a multi stage process if you really have to:

  1. render your empty page, first determining the viewport size using JavaScript,
  2. populate some hidden form field with that height and invoke an actionFunction,
  3. use the actionFunction rerender to draw your chart component using the newly persisted height.

image-size

The general idea is to grab the window size of the browser, transmit it to the server in a form submission and then draw the chart using a {!Height} controller property, like this:

<apex:page controller="ChartHeightController">
    <apex:form>

        <apex:inputHidden id="Field" value="{!Height}" />
        <apex:actionFunction name="doResize" rerender="chart" />
        <c:PartitionChart id="chart" JsonData="{!JsnString}" chartHeight="{!Height}" chartWidth="800" />

        <script>
            var windowOnload = window.onload;
            window.onload = function() {
                if (windowOnload) windowOnload(); //be nice, don't trash existing onload
                document.getElementById('{!$Component.Field}').value = window.innerHeight;
                doResize();
            }
        </script>

    </apex:form>
</apex:page>

The controller just provides a dumb target for the height to hang around in the viewstate.

public class ChartHeightController {

    public Integer Height {get; set;}

}
  • Thanks, but I don't want to pass the value to the controller, I want to pass it to a VF custom component via its attribute. Checkout the code sample I gave – Dedo May 20 '14 at 21:16
  • 1
    @Dedo this example is hand crafted to do exactly that. Please review the answer carefully. – bigassforce May 20 '14 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.