jQWidgets jqxGrid getselectedrowindexes() Method - GeeksforGeeks

27 Oct, 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 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 getselectedrowindexes() method is used to return the indexes of the rows chosen. Where, the mode of selection is a single row, multiple rows, or multiplerowsextended. It has no parameters. It returns an array of picked rows.
Syntax:
var rowindexes = 
    $('#Selector').jqxGrid('getselectedrowindexes');
Linked Files: Download https://www.jqwidgets.com/download/ 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>
The below example illustrates the jqxGrid getselectedrowindexes() method in jQWidgets.
Example:
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></head>  <body>    <center>        <h1 style="color: green">            GeeksforGeeks        </h1>          <h3>jQWidgets jqxGrid getselectedrowindexes()            method        </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;              }            var src = {                localdata: d,                datatype: "array",            };            var data_Adapter = new $.jqx.dataAdapter(src);            $("#jqxg").jqxGrid({                source: data_Adapter,                selectionmode: 'multiplerows',                height: "240px",                width: "300px",                columns: [                    {                        text: "Subject Name",                        datafield: "subjectnames",                        width: "160px",                    },                    {                        text: "Page No.",                        datafield: "pagenumber",                        width: "160px",                    },                ],            });              $("#jqxBtn").jqxButton({                width: "180px",                height: "30px",            });            $("#jqxg").jqxGrid('selectrow', 2);            $("#jqxg").jqxGrid('selectrow', 4);            $("#jqxBtn").on("click", function () {                var gsri = $('#jqxg').jqxGrid(                        'getselectedrowindexes');                $("#log").text("Indexes of"                  + " selected rows: " + gsri);            });        });    </script></body>  </html>
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=
jQuery-jQWidgets
jQWidgets-jqxGrid
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills