jQuery UI Widgets › Forums › Navigation › Expander › What is the purpose of the initContent method?
Tagged: Angular expander, angularjs, expander, initContent, initialization, initialize, jqx-create, jqxExpander, Widget
This topic contains 3 replies, has 3 voices, and was last updated by Dimitar 8 years, 1 month ago.
-
Author
-
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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
How can we use same with angularJS ?
Thanks
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.