jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 5 months ago.

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

Author

Row unselect behavior Posts

February 1, 2014 at 1:02 pm Row unselect behavior #48767

Participant

With selectionmode: singlerow, a mouse click on a row selects it. I would expect that a second click would unselect the selected row but that is not the observed or documented behavior, as for example with the seletionmode: multiplerows behavior. Is there some obvious reason for this? More to the point, if I configure a click handler to implement my desired select/unselect toggle behavior, will I upset some other important behavior?

February 1, 2014 at 2:24 pm Row unselect behavior #48772

Peter Stoev

Keymaster

Hi davistom,

In single selection mode, clicking again on the row should not unselect it by design.

Best Regards,
Peter Stoev

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

February 1, 2014 at 2:37 pm Row unselect behavior #48773

davistom

Participant

I understand the design behavior. I just don’t understand why unselect on mouse click isn’t the design behavior. More to the point, I wonder whether I can implement unselect on click via a click handler, and whether doing so will disturb something else that I don’t yet understand.

February 3, 2014 at 8:59 pm Row unselect behavior #48876

davistom

Participant

I would sincerely appreciate a reply to my last. Thanks.

February 4, 2014 at 6:33 am Row unselect behavior #48895

Peter Stoev

Keymaster

Hi davistom,

I am sorry that the default behavior of the selection is not the one that you expect. However, you can easily achieve what you try to do:

Example:

<!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.selection.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200);

            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'id', type: 'number' },
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { 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: 670,
                height: 350,
                source: dataAdapter,
                columns: [
                  { text: 'Id', datafield: 'id', width: 50 },
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        
            $("#jqxgrid").on('rowclick', function (event) {
                var index = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var clickedIndex = event.args.rowindex;
                if (clickedIndex == index) {
                    setTimeout(function () {
                        $("#jqxgrid").jqxGrid('clearselection');
                    }, 10);
                }
            });
        
            // select the second row.
            $("#jqxgrid").jqxGrid('selectrow', 2);
        });
    </script>
</head>
<body class='default'>
   <div id="jqxgrid">
   </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 4, 2014 at 11:54 am Row unselect behavior #48932

davistom

Participant

Thank you.

Since toggle select/unselect on click is the design behavior for multiplerows selection mode, I expected the same for singlerow, and upon discovering otherwise, wondered whether altering the design behavior with a click handler would upset something else that I didn’t understand.

Thanks again.

February 4, 2014 at 1:39 pm Row unselect behavior #48934

Peter Stoev

Keymaster

Hi davistom,

The selection modes are different and should behave in a different way. Usually, the single selection mode should work the same way as let’s say in a Select tag. When you select an item in a select tag, you can’t unselect it by clicking again on it. Example: http://jsfiddle.net/jqwidgets/4Ym7d/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.