Differentiating between programatically and mouse click change event - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkboxes, checkChange, custom, differentiating event, DropDownList, editor, event, grid, jqxDropDownList, jqxgrid, mouse, programmatically

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

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

Author

Differentiating between programatically and mouse click change event Posts

December 12, 2014 at 2:06 pm Differentiating between programatically and mouse click change event #64147

Tahir Nazir

Participant

Hello,
I have a JqxDropDownList. In my program, I am setting checkItem through “jqxDropDownList(‘checkItem’, val);”. Similarly, by I am changing the value of dropdown with mouse two.

Both trigger the “checkChange” event. How can I distinguish that which event is triggered through function and which is through mouse click? A help would be highly appreciated.

December 12, 2014 at 11:59 pm Differentiating between programatically and mouse click change event #64155

Tahir Nazir

Participant

Hello,
I have a JqxDropDownList. In my program, I am setting checkItem through “jqxDropDownList(‘checkItem’, val);”. Similarly, by I am changing the value of dropdown with mouse two.

Both trigger the “checkChange” event. How can I distinguish that which event is triggered through function and which is through mouse click? A help would be highly appreciated.

Or If you can guide me that how to prevent one element to stop trigger one event at a specific movment.

December 13, 2014 at 6:51 am Differentiating between programatically and mouse click change event #64158

Dimitar

Participant

Hello Tahir Nazir,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this demo is illustrated how to display checkboxes next to the DropDownList items.</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="../../scripts/demos.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/customers.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                var programmatically = false;

                // Create a jqxDropDownList
                $("#jqxWidget").jqxDropDownList({ checkboxes: true, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25 });

                $("#checkButton").jqxButton();
                $("#checkButton").click(function () {
                    programmatically = true;
                    $("#jqxWidget").jqxDropDownList('checkIndex', 0);
                })
                // subscribe to the checkChange event.
                $("#jqxWidget").on('checkChange', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            if (programmatically) {
                                alert("Checked " + item.label + " programmatically.");
                                programmatically = false;
                            } else {
                                alert("Checked " + item.label + " with mouse.");
                            }
                        }
                    }
                });
            });
        </script>
        <div>
            <div id='jqxWidget'>
            </div>
            <br />
            <button id="checkButton">Check First Item</button>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

December 13, 2014 at 8:32 pm Differentiating between programatically and mouse click change event #64162

Tahir Nazir

Participant

Hello Dimitar,
thanks a lot for your kind reply. Unfortunately your suggested solution is not as I have asked.
I have a grid with dropdownlist as editor. I have multiple values in one grid cell (e.g. mouse,keyboard,screen). Now my idea is that when double click the cell and it enters into editmode with jqxdropdownlist. I want that when dropdownlist will open then the items “mouse,keyboard,screen” will be by default checked. Furthermore, when I click some more item then these will be added to the Cell value.

But the problem is that by setting the default item checked at opening the dropdown triggers the “checkChange” event. So I want to stop the event when item is programatically checked.

here is my code. You can see that “checkChange” event is fired two times. One is automatically and second of course on clicking the checkbox.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />

    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.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/jqxnumberinput.js"></script>
       
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.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">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: window.innerWidth-300,
                height: window.innerHeight-200,
                editable:true,
                source: dataAdapter,
                editable: true,
                editmode: "selectedcell",
                selectionmode: 'singlecell',
                columns: [
                  {
                      text: 'First Name', datafield: 'firstname', columntype: 'dropdownlist',
                      initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
                          editor.jqxDropDownList({ source: firstNames, checkboxes:true });

                          editor.jqxDropDownList("checkItem", cellvalue);

                          editor.unbind('checkChange').on('checkChange', function (event) {
                              console.log("Fired ", event);
                          });
                      }
                  },
                  { text: 'Last Name', datafield: 'lastname'},
                  { text: 'Product', datafield: 'productname' },
                  { text: 'Quantity', datafield: 'quantity', cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>

</head>
<body>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

December 15, 2014 at 6:23 am Differentiating between programatically and mouse click change event #64169

Dimitar

Participant

Hi Tahir Nazir,

Although this scenario is different, the solution is the same. While you cannot prevent the event from firing, you can differentiate between the two different check types (programmatic and mouse) with a flag variable, e.g.:

initeditor: function(row, cellvalue, editor, celltext, pressedChar) {
    editor.jqxDropDownList({
        source: firstNames,
        checkboxes: true
    });

    var programmatically = true;

    editor.jqxDropDownList("checkItem", cellvalue);

    editor.unbind('checkChange').on('checkChange', function(event) {
        if (programmatically === false) {
            console.log("Fired ", event);
        } else {
            programmatically = false;
        }
    });
}

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.