jQWidgets Forums

Tagged: grid, jqxGrid ;, page, paging, row, select, select row by value, value, virtual, virtual mode, virtualmode

This topic contains 11 replies, has 6 voices, and was last updated by mr_kirkwood 1 day, 19 hours ago.

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

Author

Select a row with value instead of index Posts

October 24, 2013 at 8:40 am Select a row with value instead of index #31290

nacis

Participant

Hello;

I have a string value returned from a query. From the grid, I want to select the row which includes this value. I know the column name for the value, I don’t need to search all the cells inside the row.

However selectrow method supports only index value such as:

$(‘#jqxGrid’).jqxGrid(‘selectrow’, 10);

is there a method like

$(‘#jqxGrid’).jqxGrid(‘selectrow’, COLUMN_NAME, VALUE);

thanks.

October 24, 2013 at 10:47 am Select a row with value instead of index #31295

Dimitar

Participant

Hello nacis,

There is no such method, because there can be more than one row with a given value. However, if you are sure that a row’s value is unique, you may find the following workaround useful:

<!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.10.2.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/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="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'singlerow',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
            $("#selectRowByValue").click(function () {
                var rows = $('#jqxgrid').jqxGrid('getrows');
                var rowsCount = rows.length;
                for (var i = 0; i < rowsCount; i++) {
                    var value = $('#jqxgrid').jqxGrid('getcellvalue', i, "ProductName");
                    if (value == "Ikura") {
                        $('#jqxgrid').jqxGrid('selectrow', i);
                        break;
                    };
                };
            });
        });
    </script>
</head>
<body class='default'>
    <button id="selectRowByValue">
        Select row with value Ikura</button>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

If you remove the break statement and set the grid’s selectionmode to “multiplerows”, all rows with the given value will be selected.

Best Regards,
Dimitar

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

October 24, 2013 at 5:07 pm Select a row with value instead of index #31308

nacis

Participant

Great, thank you;

Very useful comment. Implemented easily.

February 21, 2014 at 2:10 pm Select a row with value instead of index #49880

jean-frederic

Participant

Thanks, Very useful to me also.

Jean-Frederic

November 19, 2014 at 2:19 pm Select a row with value instead of index #63020

fdski

Participant

Dimitar, follow up question
what if there is pagination on final grid and record is on page other then page one ?

I tried getboundrows instrad of getrows but i got some weird behaviour. Any ideas ?

November 20, 2014 at 7:00 am Select a row with value instead of index #63051

Dimitar

Participant

Hello B,

The same example works in this case, too. Here is how to select a row from the last page by value:

<!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/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="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'singlerow',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
            $("#selectRowByValue").click(function () {
                var rows = $('#jqxgrid').jqxGrid('getrows');
                var rowsCount = rows.length;
                for (var i = 0; i < rowsCount; i++) {
                    var value = $('#jqxgrid').jqxGrid('getcellvalue', i, "ProductName");
                    if (value == "Flotemysost") {
                        $('#jqxgrid').jqxGrid('selectrow', i);
                        break;
                    };
                };
            });
        });
    </script>
</head>
<body class='default'>
    <button id="selectRowByValue">
        Select row with value Flotemysost (on the last page)</button>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 20, 2014 at 9:49 am Select a row with value instead of index #63064

fdski

Participant

One thing I forgot, we have virtual mode on Will that work ?

November 20, 2014 at 10:04 am Select a row with value instead of index #63065

fdski

Participant

Let me clarify:

We have a grid set up for virtual mode. It calls webservice and gets records pack matching a pagination set.

Customer wants to have ability to go to particular row ( based on different grid record… ).
We managed to rig it by making sequance of WS calls – first refresh grid, then find what page it is on, go to that page, then iterate. But go to makes second WS call, and we’d like to lower the DB load.

Is there another way to rig it ?

November 20, 2014 at 10:15 am Select a row with value instead of index #63069

Dimitar

Participant

Hi B,

There is no other way because in virtual mode the only loaded rows are that on the current page. You cannot iterate rows which are not loaded.

Best Regards,
Dimitar

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

April 21, 2025 at 5:30 pm Select a row with value instead of index #135776

mr_kirkwood

Participant

How would you select multiple rows? I have an array of data that i select from a map (Several different OBJECTIDS). I would like to be able to select the rows in the grid that have the same OBJECTIDS.

Here is what i have so far:

` $ (“#selectRowByValue”).on (‘click’, function ()
{
var rows = $ (‘#roomUseTable’).jqxGrid (‘getrows’);
var rowsCount = rows.length;
console.log (rowsCount)
myroomEditData = [];
for (var i = 0; i < rowsCount; i++) {
valueObjectID = $ (‘#roomUseTable’).jqxGrid (‘getcellvalue’, i, “OBJECTID”);
console.log (“roomsAssignedData Data from the map”)
console.log (roomsAssignedData)

myroomEditData.push (
valueObjectID
);
console.log (“myroomEditData”)
console.log (myroomEditData)
//comparing the data from the map to the data in the grid
const intersection = myroomEditData.filter(element => roomsAssignedData.includes(element));
console.log(intersection)

};
});

I can filter out the data from the table but how would then select the data in the table that matches? Thanks for any help!

April 22, 2025 at 8:52 am Select a row with value instead of index #135780

admin

Keymaster

Hi,

In order to select a row, you need to use the selectrow method like this https://jsfiddle.net/jqwidgets/FQxrf/. The method uses a data bound index. The selection is not by value, but by index.

Regards,
Peter

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

April 29, 2025 at 2:38 pm Select a row with value instead of index #135799

mr_kirkwood

Participant

Here is some code that works well
`
$(“#selectRowByValue”).on(“click”, function () {
// get all rows
var rows = $(“#roomUseTable”).jqxGrid(“getrows”);

for (var i = 0; i < rows.length; i++) {
// if value of field ‘OBJECTID’ is in roomsAssignedData array
if (roomsAssignedData.includes(rows[i].OBJECTID)) {
// add row to selection
$(‘#roomUseTable’).jqxGrid(‘selectrow’, i);
}
}
});
”’

Author

Posts

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

You must be logged in to reply to this topic.