Open In App

jQWidgets jqxKanban ready Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxkanban/jquery-kanban-api.htm?search=



Last Updated : 15 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads