Select a row with value instead of index - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

This topic contains 8 replies, has 4 voices, and was last updated by Dimitar 10 years ago.

Viewing 9 posts - 1 through 9 (of 9 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/

Author

Posts

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

You must be logged in to reply to this topic.