jQWidgets jqxGrid getstate() Method

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 getstate() method is used to return the state of the displayed jqxGrid. It has no parameters. It returns an object. Moreover, this method is able to get various information like sort order, sort column, page number, page size, filter row values as well as applied filters, visibility as well as column widths, cells as well as rows selection, and groups.

The value returned here is a JSON object which has the following fields:

width: It is the stated Grid’s width.
height: It is the stated Grid’s height.
pagenum: It is the stated Grid’s page number.
pagesize: It is the stated Grid’s page size.
pagesizeoptions: It is the stated Grid’s page size options.
sortcolumn: It is the stated Grid’s sort column.
sortdirection: It is the stated JSON object which has two Boolean fields namely ascending and descending.
filters: It is the stated Grid’s applied filters.
groups: It is the stated Grid’s groups array that holds the data fields of the grouped columns.
columns: It is the stated array of columns. Where every column in the array has the below-stated fields:
- width: It is the width of the column.
- hidden: It is the visible state of the column.
- pinned: It is the pinned state of the column.
- groupable: It is the groupable state of the column.
- resizable: It is the resizable state of the column.
- draggable: It is the draggable state of the column.
- text: It is the text of the column.
- align: It is the alignment of the column.
- cellsalign: It is the cell’s alignment of the column.

Syntax:

var gs = $('#Selector').jqxGrid('getstate');

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>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example: The below example illustrates the jqxGrid getstate() method in jQWidgets.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="jqwidgets/styles/jqx.base.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/jqx-all.js"> 
    </script>  
</head> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
        <h3>jQWidgets jqxGrid getstate() method</h3> 
        <div id="jqxg"></div> 
        <div> 
            <input type="button" 
                   id="jqxBtn" 
                   style="margin-top: 25px"
                   value="Click here" />  
        </div> 
        <br /> 
        <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 < 5; j++) { 
                var r = {}; 
                r["subjectnames"] =  
        subjectNames[(Math.floor(Math.random() * subjectNames.length))]; 
                r["pagenumber"] =  
        pageNumber[(Math.floor(Math.random() * pageNumber.length))]; 
                d[j] = r; 
            } 
            var src = { 
                localdata: d, 
                datatype: "array", 
            }; 
            var data_Adapter = new $.jqx.dataAdapter(src); 
            $("#jqxg").jqxGrid({ 
                source: data_Adapter, 
                columns: [{ 
                    text: "Subject Name", 
                    datafield: "subjectnames", 
                    width: "100px", 
                }, { 
                    text: "Page No.", 
                    datafield: "pagenumber", 
                    width: "140px", 
                }, ], 
            }); 
            $("#jqxg").jqxGrid({ 
                height: "220px", 
                width: "230px", 
            }); 
            $("#jqxBtn").jqxButton({ 
                width: "100px", 
                height: "30px", 
            }); 
            $("#jqxBtn").on("click", function() { 
                var s = $("#jqxg").jqxGrid("getstate"); 
                $("#log").text("Width: " + s.width + 
           ", Height: " + s.height); 
            }); 
        }); 
    </script> 
</body> 
</html>