jQuery UI Widgets Forums Navigation Expander What is the purpose of the initContent method?

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 8 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • arikbd
    Participant

    Hi,

    Can you please elaborate on the purpose of the initContent of the Expander control?

    I saw the example in your documentation:

    <div id='jqxExpander'>
        <div>Header</div>
        <div>
            <input type="button" id='jqxButton' value="Button" />
        </div>
    </div>
    
     $("#jqxExpander").jqxExpander({
           width: 200,
           height: 100,
           theme: 'energyblue'
       });
       $("#jqxExpander").jqxExpander({
           initContent: function () {
               $("#jqxButton").jqxButton({
                   width: 100,
                   height: 50,
                   theme: 'energyblue'
               });
           }
       });
    
    

    and it seems to me the button is not initialized correctly when in the initContent function, If I take the button setting out of the initContent function then the button gets the corrent settings.

    Thanks,

    Arik


    Dimitar
    Participant

    Hello Arik,

    The initContent callback function is called when the expander’s content needs to be initialized. It is useful for initializing other widgets within the content of jqxExpander.

    The fiddle about it, however, was incorrect because initContent was not set during initialization of the widget but after that. Is is now fixed. Please check it out: http://jsfiddle.net/jqwidgets/QwLqr/.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Mohindar
    Participant

    Hi,

    How can we use same with angularJS ?

    Thanks


    Dimitar
    Participant

    Hi Mohindar,

    Here is how to achieve the same functionality in an AngularJS environment:

    <!DOCTYPE html>
    <html ng-app="demoApp">
    <head>
        <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
        <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.energyblue.css" />
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
            demoApp.controller("demoController", function ($scope) {
                $scope.createButton = false;
                $scope.jqxExpanderSettings = {
                    width: 200,
                    height: 100,
                    theme: 'energyblue',
                    initContent: function () {
                        $scope.createButton = true;
                    }
                }
            });
        </script>
    </head>
    <body>
        <div ng-controller="demoController">
            <jqx-expander jqx-settings="jqxExpanderSettings" jqx-width="'200px'" jqx-height="'150px'">
                <div>Header</div>
                <div>
                    <jqx-button jqx-create="createButton" jqx-width="100" jqx-height="50" jqx-theme="energyblue">Button</jqx-button>
                </div>
            </jqx-expander>
        </div>
    </body>
    </html>

    We hope this example is helpful to you.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.