jQuery UI Widgets Forums Lists DropDownList Differentiating between programatically and mouse click change event

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

  • 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.


    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.


    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/


    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>
    

    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/

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

You must be logged in to reply to this topic.