jQWidgets jqxGrid source Property

Last Updated : 29 Mar, 2023

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 jqxGrid is used to illustrate a jQuery widget that shows data in tabular form. Moreover, it renders full support for connecting with data, as well as paging, grouping, sorting, filtering, and editing.

The source property is used to define the source of the displayed jqxGrid. It is of object type and its default value is {}.

Some of the key/value pairs represented by the source object are as follows:

url: It is the stated URL that is contained by a string where the request is sent to this URL.
data: It is the stated data that is to be sent in the direction of the server.
localdata: It is the stated data array or data string that is used to point towards a source of local data.
datatype: It is the stated type of data where the available values are 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array', and 'observablearray'.
type: It is the stated type of request which is to be made where the possible values are "POST" or "GET" and the default value is "GET".
id: It is the stated id data field which is of type string.
root: It is the stated root that describes from where the data starts as well as all the different loops that start from this element. It is of type string.
record: It is the stated record that describes the information for a specific record. It is of type string.

Syntax:

Set the source property.

$('Selector').jqxGrid({ source: {} });

Return the source property.

var source = $('selector').jqxGrid('source');

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-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>

Example 1: The below example illustrates the setting of jqxGrid's source property in jQWidgets.

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-1.11.1.min.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxmenu.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxgrid.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxgrid.selection.js">
    </script>
      <script type="text/javascript" 
            src="jqwidgets/jqxgrid.columnsresize.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color:green"> GeeksforGeeks </h1>
        <h3>
            jQWidgets jqxGrid source property
        </h3><br />
        <div id="jqxg"></div>
    </center>

    <script type="text/javascript">
    
        $(document).ready(function () {
            var d = new Array();
            var subjectNames =
                ["C++", "Scala", "Java", "C", "R", "JavaScript"];

            var pageNumber =
                ["7", "8", "12", "11", "10", "19"];

            for (var j = 0; j < 50; j++) 
            {
                var r = {};
                r["subjectnames"] = subjectNames[
                    Math.floor(Math.random() * subjectNames.length)
                ];

                r["pagenumber"] =
                    pageNumber[(Math.floor(Math.random() * pageNumber.length))
                    ];
                d[j] = r;
            }
            $("#jqxg").jqxGrid({
                source: {
                    localdata: d,
                    datatype: "observablearray",
                    id: "1",
                    type: "POST",
                },
                theme: 'energyblue',
                sortable: true,
                height: "240px",
                width: "240px",
                columns: [
                    {
                        text: "Subject Name",
                        datafield: "subjectnames",
                        width: "120px",
                    },
                    {
                        text: "Page No.",
                        datafield: "pagenumber",
                        width: "120px",
                    },
                ],
            });
        });
    </script>
</body>
</html>

Output:

Example 2: Below is another example that illustrates the jqxGrid source property in jQWidgets.

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-1.11.1.min.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxmenu.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxgrid.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxgrid.selection.js">
    </script>
      <script type="text/javascript" 
            src="jqwidgets/jqxgrid.columnsresize.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>        
        <h3>
              jQWidgets jqxGrid source property
        </h3><br />        
        <div id="jqxg"></div>        
        <div>
            <input type="button" id="jqxBtn" style="margin-top:25px"
                   value="Click here" />
        </div>        
        <div id="log"></div>       
    </center>

    <script type="text/javascript">
        $(document).ready(function () {
            var d = new Array();
            var subjectNames =
                ["C++", "Scala", "Java", "C", "R", "JavaScript"];

            var pageNumber =
                ["7", "8", "12", "11", "10", "19"];

            for (var j = 0; j < 50; j++) {
                var r = {};
                r["subjectnames"] =
                    subjectNames[(Math.floor(Math.random() * subjectNames.length))
                    ];

                r["pagenumber"] =
                    pageNumber[(Math.floor(Math.random() * pageNumber.length))
                    ];
                d[j] = r;

            }
            $("#jqxg").jqxGrid({
                source: null,
                theme: 'energyblue',
                sortable: true,
                height: "240px",
                width: "240px",
                columns: [
                    {
                        text: "Subject Name",
                        datafield: "subjectnames",
                        width: "120px",
                    },
                    {
                        text: "Page No.",
                        datafield: "pagenumber",
                        width: "120px",
                    },
                ],
            });

            $("#jqxBtn").jqxButton({
                width: "180px",
                height: "30px",
            });
            $("#jqxBtn").on("click", function () {
                var s = $('#jqxg').jqxGrid('source');
                if (s === null) {
                    $('#log').text(s);
                }
                else {
                    $('#log').text("Not null!");
                }
            });
        });
    </script>
</body>
</html>