Row Selection upon field value - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bool, checkbox, columntype, grid, jqxgrid, rowselect, selectionmode, type, unselectrow

This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 9 years, 8 months ago.

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

Author

Row Selection upon field value Posts

March 27, 2015 at 12:31 pm Row Selection upon field value #69244

omargarro

Participant

Hi, imagine a table with 3 columns: CustomerID (int), FullName (string), Active (bool)

What I want is a grid, with selectionmode=checkbox displaying records with Active=true selected (checked)

March 27, 2015 at 1:49 pm Row Selection upon field value #69256

Nadezhda

Participant

Hello omargarro,

Here is an example where you can select row(checkbox selection mode)if field value in Available column is true. I hope it would be helpful to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200, true);

            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                selectionmode:'checkbox',
                editable: true,
                columns: [
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 120 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 120 },
                  { text: 'Product', editable: false, datafield: 'productname', width: 180 },
                  { text: 'Available', datafield: 'available', threestatecheckbox: false, columntype: 'checkbox', width: 70 },
                  { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', editable: false, datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $('#jqxgrid').on('rowselect', function (event) {
                // event arguments.
                var args = event.args;
                if (args.row.available == false) {
                    $('#jqxgrid').jqxGrid('unselectrow', args.rowindex);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

Best Regards,
Nadezhda

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

April 1, 2015 at 12:24 pm Row Selection upon field value #69428

omargarro

Participant

Nadezhda, thanks for your reply.
In your example, a db field is been inserted (according(to its value checked or not)
I dont need that field being showed.
I need to show only one string field and select the row according to another bool field
is that possible ? any grid event to work with ?

April 2, 2015 at 7:09 am Row Selection upon field value #69462

Nadezhda

Participant

Hi omargarro,

In the following example grid is displayed with selected rows where the hidden bool field is true. We hope it is helpful to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(20, true);

            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },                
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },            
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 250,
                source: dataAdapter,
                selectionmode: 'checkbox',
                editable: true,
                columns: [
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 120 },            
                  { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' }           
                ]
            });
            var rows = $('#jqxgrid').jqxGrid('getrows');

            for (i = 0; i < rows.length; i++){
                var data = $('#jqxgrid').jqxGrid('getrowdata', i);
                if (data.available == true) {
                    $('#jqxgrid').jqxGrid('selectrow', i);
                }
            }
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.