jQWidgets jqxLayout render() Method - GeeksforGeeks

10 Dec, 2021
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxLayout is used for representing a jQuery widget that is used for the creation of complex layouts with nested, resized, pinned, unpinned, and closed panels.
The render() method is used for rendering the specified jqxLayout widget.
Syntax:
$('#jqxLayout').jqxLayout('render');
Parameters: This method does not accept any parameters.
Return Values: This method does not return any values.
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” /><script type=”text/javascript” src=”scripts/jquery.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/jqxribbon.js”></script><script type=”text/javascript” src=”jqwidgets/jqxlayout.js”></script><script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
Example: The below example illustrates the jQWidgets jqxLayout render() method.
HTML
<!DOCTYPE html><html lang="en">  <head>    <link rel="stylesheet"           href="jqwidgets/styles/jqx.base.css"           type="text/css"/>    <script type="text/javascript"             src="scripts/jquery.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/jqxribbon.js">    </script>    <script type="text/javascript"             src="jqwidgets/jqxlayout.js">    </script>    <script type="text/javascript"             src="jqwidgets/jqx-all.js">    </script></head>  <body>    <center>        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h3>            jQWidgets jqxLayout render() Method        </h3>        <div id="jqx_Layout">            <div data-container="A1">                <li>It is a computer science portal.</li>            </div>            <div data-container="A2">                <li>It is a eCommerce platform.</li>            </div>            <div data-container="A3">                <li>It is a service based company.</li>            </div>        </div>        <input type="button" style="margin: 5px;"                id="button_for_render"                value="Render the above widget"/>        <div id="log"></div>        <script type="text/javascript">            $(document).ready(function () {                var jqx_Layout = [{                    items: [{                        items: [{                            items: [{                                contentContainer: 'A1',                                type: 'documentPanel',                                title: 'GeeksforGeeks',                            }, {                                contentContainer: 'A2',                                type: 'documentPanel',                                title: 'Amazon',                            }, {                                contentContainer: 'A3',                                type: 'documentPanel',                                title: 'Capgemini',                            }],                            type: 'documentGroup',                            height: 100,                        },],                        type: 'layoutGroup',                        height: 100,                    }],                    orientation: 'vertical',                    type: 'layoutGroup'                }];                $('#jqx_Layout').jqxLayout({                    width: 370,                    height: 100,                    layout: jqx_Layout                });                $("#button_for_render").jqxButton({                    width: 300                });                $('#button_for_render').jqxButton().                    click(function () {                     $('#jqx_Layout').jqxLayout('render');                    })            });        </script>    </center></body></html>
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlayout/jquery-layout-api.htm?search=
jQuery-jQWidgets
jQWidgets-jqxLayout
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to Become a Full Stack Web Developer in 2021?
jQuery getJSON() Method
jQuery | focus() with Examples
jQuery | removeAttr() with Examples
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript