jQWidgets Forums

Forum Replies Created

Viewing 6 posts - 16 through 21 (of 21 total)

← 1 2

Author

Posts

December 22, 2014 at 1:29 pm in reply to: beginupdate and endupdate beginupdate and endupdate #64561

Tahir Nazir

Participant

Hello Dimitar,
I have tried with true parameter too. but still Grid get rendered two times.

December 22, 2014 at 12:58 pm in reply to: beginupdate and endupdate beginupdate and endupdate #64558

Tahir Nazir

Participant

Hello Dimitar,
I have already read thoroughly documentation and every stuff. But, I didn’t find the way that how to enable the Grid to render only one time in context of above given code. As above given code render the Grid two times…

December 13, 2014 at 8:32 pm in reply to: Differentiating between programatically and mouse click change event 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 12, 2014 at 11:59 pm in reply to: Differentiating between programatically and mouse click change event 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 11, 2014 at 7:47 am in reply to: Setting Initial (default) State of Dropdown Setting Initial (default) State of Dropdown #64086

Tahir Nazir

Participant

Hello Dimitar
thanks for your reply. I have already done like this. But I thought may be you have some method to set dropdown list back to initial state.

Anyhow. Thanks a lot.

December 11, 2014 at 7:47 am in reply to: Setting Initial (default) State of Dropdown Setting Initial (default) State of Dropdown #64085

Tahir Nazir

Participant

Hello Dimitar
thanks for your reply. I have done like this. But I thought may be you have some method to set dropdown list back to initial state.

Anyhow. Thanks a lot.

Author

Posts

Viewing 6 posts - 16 through 21 (of 21 total)

← 1 2