Allow multiple cells selection but one row only - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Cell, grid, jqxgrid, multiple, row, select, selection

This topic contains 2 replies, has 2 voices, and was last updated by MickaGau 11 years ago.

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

Author

Allow multiple cells selection but one row only Posts

September 24, 2013 at 6:17 am Allow multiple cells selection but one row only #29446

MickaGau

Member

Hello

I have a requirement which i don’t know how to solve.

I would like to be able to select multiple cells but for only one row. So if user selects one cell in one row, he can’t select another cell from another row. He can only select cells within the selected row.
If he wants to select another cell from another row, he must first unselect the cells of the primarily cell.

Could you give some hints to achieve this goal?

Thank you
Mickael

September 24, 2013 at 7:48 am Allow multiple cells selection but one row only #29457

Dimitar

Participant

Hello

Here is how to achieve this functionality:

<!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,
                editmode: 'dblclick',
                selectionmode: 'multiplecells',
                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' }
                ]
            });
            var selectedRow;
            $("#jqxgrid").on('cellselect', function (event) {
                var datafield = event.args.datafield;
                var rowindex = event.args.rowindex;
                if (datafield == "ProductName") {
                    if (!checkFirstColumn(rowindex)) {
                        $('#jqxgrid').jqxGrid('unselectcell', rowindex, datafield);
                    } else {
                        selectedRow = rowindex;
                    };
                } else {
                    if (rowindex != selectedRow) {
                        $('#jqxgrid').jqxGrid('unselectcell', rowindex, datafield);
                    };
                };
            });
            var checkFirstColumn = function (rowindex) {
                var selectedCells = $('#jqxgrid').jqxGrid('getselectedcells');
                for (var i = 0; i < selectedCells.length; i++) {
                    if (selectedCells[i].datafield == "ProductName" && selectedCells[i].rowindex != rowindex) {
                        return false;
                    };
                };
                return true;
            };
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

The example is based on the demo Default Functionality.

Best Regards,
Dimitar

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

September 24, 2013 at 8:50 am Allow multiple cells selection but one row only #29468

MickaGau

Member

Thanj you very much.
It works fine

Author

Posts

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

You must be logged in to reply to this topic.