Open In App

jQWidgets jqxGrid getrowboundindexbyid() Method

Last Updated : 30 Mar, 2023
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 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 getrowboundindexbyid() method is used to return the index of a specified row in the array that is rendered by the getboundrows method. It has a parameter named rowID, which is of type string. It returns a number i.e. the bound index of the specified row. 

Syntax:

var data = $('#Selector').jqxGrid('getrowboundindexbyid', rowid);

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 getrowboundindexbyid() 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 getrowboundindexbyid() 
            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 < 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 gri = $("#jqxg").jqxGrid("getrowid", 1);
                var grbibi = $("#jqxg").jqxGrid("getrowboundindexbyid", gri);
                $("#log").text("Row index: " + grbibi);
            });
        });
    </script>
</body>
  
</html>


Output:

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



Similar Reads

jQWidgets jqxGrid setcolumnproperty() Method
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, gro
4 min read
jQWidgets jqxGrid getrows() Method
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, gro
2 min read
jQWidgets jqxGrid getdatainformation() Method
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, gro
3 min read
jQWidgets jqxGrid getsortinformation() Method
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, gro
2 min read
jQWidgets jqxGrid getdisplayrows() Method
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, gro
3 min read
jQWidgets jqxGrid getrowboundindex() Method
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, gro
2 min read
jQWidgets jqxGrid getboundrows() Method
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, gro
3 min read
jQWidgets jqxGrid showrowdetails() Method
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, gro
2 min read
jQWidgets jqxGrid updating() Method
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, gro
2 min read
jQWidgets jqxGrid refresh() Method
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, gro
2 min read