jQWidgets Forums

Tagged: javascript grid, jqxgrid

This topic contains 5 replies, has 3 voices, and was last updated by Peter Stoev 9 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

How to get index of a specific row in the displayrows Posts

May 30, 2013 at 7:05 am How to get index of a specific row in the displayrows #22106

cosostones

Participant

Hello,

Is there a way to get the selectedrowindex of the display rows (from the displayrows method : ‘getdisplayrows’).

Regards.

May 30, 2013 at 7:56 am How to get index of a specific row in the displayrows #22120

Peter Stoev

Keymaster

Hi,

Please, take a look at the Click event handler in the code below. It shows how to get the Display Index of the selected row.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to enable sorting and sort by a column.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
   <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/orders.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                sortcolumn: 'ShipName',
                sortdirection: 'asc'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 450,
                source: dataAdapter,
                theme: theme,
                sortable: true,
                filterable: true,
                altrows: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
                  { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
                ]
            });
            $("#button").on('click', function (event) {
                // gets the index of the selected row.
                var selectedRowIndex = $("#jqxgrid").jqxGrid('selectedrowindex');
                // gets the selected row.
                var selectedRow = $("#jqxgrid").jqxGrid('getboundrows')[selectedRowIndex];
                // gets all rows in the display order.
                var displayedRows = $("#jqxgrid").jqxGrid('getdisplayrows');
                // finds the rows display index.
                var rowVisibleIndex = -1;
                for (var i = 0; i < displayedRows.length; i++) {
                    if (displayedRows[i].uid === selectedRow.uid) {
                        rowVisibleIndex = i;
                        break;
                    }
                }
                alert(rowVisibleIndex);
            }); 
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <input id="button" type="button" value="Get Row's " />
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

May 30, 2013 at 8:32 am How to get index of a specific row in the displayrows #22132

cosostones

Participant

Hi Peter,

Thanks for your answer.

I found another way, but I don’t know if it is a good solution :

var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘selectedrowindex’);

var rowVisibleIndex = $(“#jqxgrid”).jqxGrid(‘getrowvisibleindex’, selectedrowindex);

do you think this is correct ?

May 30, 2013 at 8:38 am How to get index of a specific row in the displayrows #22135

Peter Stoev

Keymaster

Hi,

It is not good because you used Deprecated API which is not available in the Online Documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

August 17, 2015 at 7:53 pm How to get index of a specific row in the displayrows #74889

padmanaban

Participant

Hello, I’m still finding it difficult to get the row number (new row number) of a row after sorting or filtering. The present indexes just returns the row number or indexes on load and not the one after filtering or sorting. Can you help me out with this?

August 18, 2015 at 4:31 pm How to get index of a specific row in the displayrows #74931

Peter Stoev

Keymaster

Hi padmanaban,

There is example in this topic which shows how to get the index. I also suggest you to learn the Grid’s examples and read its documentation where you will find many useful methods.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.