jQWidgets jqxKanban ready Property
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 jqxKanban is used for representing the kanban method for a project.
The ready property is used for setting or getting the ready function for the specified jqxKanban widget. This ready function is called when the specified jqxKanban widget is initialized and the binding is completed.
Syntax:
For setting the ready property.
$('#jqxKanban').jqxKanban({ ready: function(){ // Code section } });For getting the ready property.
var ready = $('#jqxKanban').jqxKanban('ready');
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/jqxsortable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxkanban.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
Example: The below example illustrates the jQWidgets jqxKanban ready property.
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/jqxsortable.js"> </script> <script type="text/javascript" src="jqwidgets/jqxkanban.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdata.js"> </script> <script type="text/javascript" src="jqwidgets/jqx-all.js"> </script></head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxKanban ready Property </h3> <div id="jqx_Kanban"></div> <script type="text/javascript"> $(document).ready(function () { var Data = new $.jqx.dataAdapter({ localData: [ { status: "new", Company_Name: "GeeksforGeeks", About: "It is a CS portal" } ], dataFields: [ { map: "About", name: "tags", type: "string" }, { map: "Company_Name", name: "text", type: "string" }, { name: "status", type: "string" }, ] }); var Data_Function = function () { var Data_Adapter = new $.jqx.dataAdapter({ localData: [ { name: "name" }, ], }); return Data_Adapter; } $('#jqx_Kanban').jqxKanban({ width: 300, height: 110, resources: Data_Function(), source: Data, ready: function () { }, columns: [ { text: "Company", dataField: "new" } ] }); }); </script> </center></body> </html> |
Output:
Please Login to comment...