Input edit for Number not working.

[njaParticipant]

Hi there,
For some reason the number input field for this column in my grid is not accepting the decimal point so you can not type .55 but you must type 0.55 instead. The full grid is below.

					{
					    text: 'Discount', datafield: 'discount', cellsformat: 'F4', width: 80, editable: true, filtertype: 'number', cellsalign: 'right', columntype: 'numberinput',
					    createeditor: function (row, cellvalue, editor) {
					        editor.jqxNumberInput({ inputMode: 'simple', spinButtons: false });
					    }, cellclassname: cellclass,
					},

            // build the grid
            $("#jqxgrid").jqxGrid({
                source: dataAdapter,
                width: '99%',
                height: splitterHeight,
                theme: 'classic',
                enabletooltips: true,
                filterable: true,
                showfilterrow: true,
                sortable: true,
                editable: true,
                columnsresize: true,
                selectionmode: 'multiplecellsadvanced',
                showtoolbar: true,
                toolbarheight: 40,
                showstatusbar: true,
                showaggregates: true,
                showsortmenuitems: false,
                //handlekeyboardnavigation: function (event) {
                //    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                //    if ((key == 190) || (key == 110)) {
                //        var cell = $('#jqxgrid').jqxGrid('getselectedcell');
                //        if (cell) { 
                //            alert("Row: " + cell.rowindex + ", Column: " + cell.datafield + " key: " + key);
                //        }

                //        // @param Number. The row's bound index.
                //        // @param String. The column datafield.
                //        var editable = $("#jqxgrid").jqxGrid('begincelledit', cell.rowindex, "discount");

                //        return true;
                //    }
                //},
                columns: [
                    {text: 'Line#', datafield: 'fakerowindex', width: 50, hidden: false, editable: false, filterable: false, 
                        cellsrenderer: function (row, column, value) {
                            return "<div style='margin:4px;'>" + (row + 1) + "</div>";
                        }
                    },
                    { text: 'ordering', datafield: 'ordering', width: 50, hidden: true, editable: false, },
					{ text: 'id', datafield: 'id', width: 50, hidden: true, editable: false, cellclassname: cellclass, },
                    { text: 'itemid', datafield: 'itemid', width: 50, hidden: true, editable: false, cellclassname: cellclass, },
					{
					    text: 'Qty', datafield: 'quantity', cellsformat: 'n', width: 65, cellsalign: 'center', editable: true, filterable: false, columntype: 'numberinput',
					    createeditor: function (row, cellvalue, editor) {
					        editor.jqxNumberInput({ decimalDigits: 0, digits: 4, spinButtons: false });
					    },
					    aggregates: ['sum'], cellclassname: cellclass,
					},
					{ text: 'ISBN', datafield: 'isbn', width: 130, editable: false, cellclassname: cellclass, filtertype: 'input' },
					{
					    text: 'Title', datafield: 'title', width: 250, editable: false, cellclassname: cellclass,
					    cellsrenderer: function (row, column, value) {
					        var data = $('#jqxgrid').jqxGrid('getrowdata', row);
					        return '<div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; margin-right: 2px; margin-left: 4px; margin-top: 4px; " title="Local Notes: ' + data.localsalespoint + '">' + value + '</div>';
					    }
					},
					{
					    text: 'Discount', datafield: 'discount', cellsformat: 'F4', width: 80, editable: true, filtertype: 'number', cellsalign: 'right', columntype: 'numberinput',
					    createeditor: function (row, cellvalue, editor) {
					        editor.jqxNumberInput({ inputMode: 'simple', spinButtons: false });
					    }, cellclassname: cellclass,
					},
					{ text: 'Price', datafield: 'usprice', sortable: false, cellsformat: 'F2', width: 70, cellsalign: 'right', editable: true, filtertype: 'number', cellclassname: cellclass, },
					{ text: 'Ext. Cost', datafield: 'totalretail', cellsformat: 'F2', width: 100, cellsalign: 'right', editable: false, filterable: false, aggregates: ['sum'], cellclassname: cellclass, },
					{ text: 'Status ', datafield: 'releasestatusname', width: 60, cellsalign: 'center', editable: false, filtertype: 'checkedlist', cellclassname: cellclass, },
					{ text: 'Binding', datafield: 'bindingname', cellsalign: 'center', width: 105, editable: false, filtertype: 'checkedlist', cellclassname: cellclass, },
					{ text: 'Page Nbr', datafield: 'catalogpage', sortable: false, width: 75, cellsalign: 'right', editable: false, filtertype: 'number', cellclassname: cellclass, },
					{ text: 'Catalog', datafield: 'catalog', width: 175, editable: false, filtertype: 'list', cellclassname: cellclass, },
					{ text: 'Publisher', datafield: 'publishername', width: 150, hidden: true },
					{ text: 'Subtitle', datafield: 'subtitle', width: 150, hidden: true },
					{ text: 'Author', datafield: 'author', width: 160, hidden: true },
					{ text: 'Authorcity', datafield: 'authorcity', width: 150, hidden: true },
					{ text: 'Authorstate', datafield: 'authorstate', width: 150, hidden: true },
					{ text: 'Pub Date', datafield: 'publishdate', width: 80, hidden: true },
					{ text: 'Imprint', datafield: 'imprint', width: 100, hidden: true },
					{ text: 'state', datafield: 'state', width: 150, hidden: true, hidden: true },
					{ text: 'localsalespoint', datafield: 'localsalespoint', width: 150, hidden: true, },
					{ text: 'catalogcopy', datafield: 'catalogcopy', width: 150, hidden: true },
					{
					    text: 'Detail', datafield: 'detail', columntype: 'button', width: 60, sortable: false, cellsrenderer: function () {
					        return "Detail";
					    }, rendered: function (element) {
					        $(element).jqxTooltip({ position: 'mouse', content: "Sorry, no details available for New Items" });

					    }, buttonclick: function (row) {
					        // open the popup window when the user clicks a button.
					        detailrow = row;
					        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', detailrow);
					        var gridWidth = $("#jqxgrid").jqxGrid('width');
					        var offset = $("#jqxgrid").offset();

					        // open full system window with record details
					        //var rowToEdit = '/ProjectionAdjustments/EditWithGrid/' + dataRecord.RecordId;
					        //http://www.trademains.com/index.php/items/list-items/item/549
					        //item/list-item/item/2

					        var itemDetail = "/index.php/item/list-item/item/" + dataRecord.itemid;
					        var adjustments = window.open(itemDetail, '', 'width=900,height=800,scrollbars=1,resizable=1');
					        return false;

					    }
					},
                ],
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    //var span = $("<span style='float: left; padding-right: 40px'><h4>Order Items</h4></span>");

                    //var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                    //var submitButton = $("<button style='margin: 5px;'>Search</button>");
                    toolbar.append(container);
                    //container.append(span);
                    //container.append(submitButton);

                    //container.append(input);

                    //var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    //var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
                    //var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
                    //var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");
                    //container.append(searchButton);
                    //toolbar.append(container);

                    //deleteButton.jqxButton({ width: 65, height: 20 });
                    //reloadButton.jqxButton({ width: 65, height: 20 });
                    //searchButton.jqxButton({ width: 50, height: 20 });
                    // add new row.

                    // ================= Build Discount Combo Box ================//
                    var discountsource = ["40", "43", "44", "45", "46", "47", "50", "52", "52.5", "55", "60", "100"];
                    var discountComboBox = $("<div style='float: left; margin: 5px;'><div id='jqxDiscountComboBox'></div></div>");
                    container.append(discountComboBox);

                    var changeZeroDiscountButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative; '>Set Zero Discounts</span></div>");
                    container.append(changeZeroDiscountButton);

                    var changeAllDiscountButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative; '>Set All Discounts</span></div>");
                    container.append(changeAllDiscountButton);

                    var chooselistButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative; '>Choose List</span></div>");
                    container.append(chooselistButton);

                    var saveButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative;'>Save</span></div>");
                    //var saveButton = $("<input type='button' value='Save' id='saveButton' style='float: left; margin: 5px;' />");
                    container.append(saveButton);

                    var addButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative; '>Add New Item</span></div>");
                    container.append(addButton);

                    var deleteButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative; '>Delete Item</span></div>");
                    container.append(deleteButton);

                    var clearButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative; '>Clear Sort/Filters</span></div>");
                    container.append(clearButton);

                    var printButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative; '>Print</span></div>");
                    container.append(printButton);

                    var coverSheetButton = $("<div style='float: left; margin: 5px;'><span style='margin-left: 4px; position: relative; '>Show Cover Sheet</span></div>");
                    container.append(coverSheetButton);

                    toolbar.append(container);

                    // build the widgets
                    discountComboBox.jqxComboBox({ source: discountsource, width: '120', height: '20', placeHolder: 'Set discount'});
                    changeZeroDiscountButton.jqxButton({ width: 155, height: 15, theme: 'darkblue' });
                    changeAllDiscountButton.jqxButton({ width: 110, height: 15, theme: 'darkblue' });
                    addButton.jqxButton({ width: 95, height: 15, theme: 'darkblue' });
                    chooselistButton.jqxButton({ width: 85, height: 15, theme: 'darkblue' });
                    deleteButton.jqxButton({ width: 85, height: 15, theme: 'darkblue' });

                    <?php 
                    if ($this->item->status == "Pending"){
                        // only allow eding of new - ie. pending orders - orders
                        echo "saveButton.jqxButton({ width: 60, height: 15, theme: 'darkblue', });";
                    }
                    else {

                        if ($isSailsAdmin == true) {
                            // we are an admin so we get to override the restriction 
                            echo "saveButton.jqxButton({ width: 60, height: 15, theme: 'darkblue', });";
                        }
                        else {
                            echo "saveButton.jqxButton({ width: 60, height: 15, theme: 'darkblue', disabled: true });";
                        }
                    }
                    ?>
                   
                    clearButton.jqxButton({ width: 122, height: 15, theme: 'darkblue' });
                    printButton.jqxButton({ width: 45, height: 15, theme: 'darkblue' });
                    coverSheetButton.jqxButton({ width: 130, height: 15, theme: 'classic', template: 'inverse' });

                    // toolbar events/actions 
                    changeZeroDiscountButton.click(function (event) {
                        var value = discountComboBox.jqxComboBox('val');

                        if ((value != null) && (value != "")) {
                            value = value / 100;

                            // get all the rows (this may have to be changed if we have paging 
                            var datainformations = $('#jqxgrid').jqxGrid('getdatainformation');
                            var rowscounts = datainformations.rowscount;

                            for (var i = 0; i < rowscounts; i++) {
                                var preSetDiscount = $("#jqxgrid").jqxGrid('getcellvalue', i, "discount");

                                if (preSetDiscount == .0000) {
                                    // @param row index.
                                    // @param column datafield.
                                    // @param cell value
                                    $("#jqxgrid").jqxGrid('setcellvalue', i, "discount", value);
                                }
                            }
                        }
                    });
                    changeAllDiscountButton.click(function (event) {
                        var value = discountComboBox.jqxComboBox('val');

                        if ((value != null) && (value != "")) {
                            value = value / 100;

                            // get all the rows (this may have to be changed if we have paging 
                            var datainformations = $('#jqxgrid').jqxGrid('getdatainformation');
                            var rowscounts = datainformations.rowscount;

                            for (var i = 0; i < rowscounts; i++) {
                                $("#jqxgrid").jqxGrid('endcelledit', i, "discount", false);
                                $("#jqxgrid").jqxGrid('setcellvalue', i, "discount", value);
                            }
                        }
                    });
                    addButton.click(function (event) {
                        // get grid data information (this may have to be changed if we have paging 
                        var datainformations = $('#jqxgrid').jqxGrid('getdatainformation');
                        var rowscounts = datainformations.rowscount;
                        rowscounts = 1;

                        if (rowscounts > 0) {
                            var offset = $("#jqxgrid").offset();
                            $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

                            // set up our fields
                            $("#qtyNew").val('0');
                            $("#isbnNew").val('13 digit ISBN if available');
                            $("#titleNew").val("-");
                            // LIMIT DISCOUNT 0 TO 1
                            //$("#discountNew").val("0.0000");  // jqxNumberInput intilizes to zero
                            $("#discountNew").val("0");  

                            $("#priceNew").val("0.00");   //.jqxNumberInput({ decimal: '0.00' });

                            // show the popup window.
                            $("#popupWindow").jqxWindow('open');
                        }

                    });
                    chooselistButton.click(function (event) {
                        // if it's already loaded we shouldn't need to reload it....  loadedVendorId
                        divObj = document.getElementById("loadedVendorId");
                        var loadedVendorId = divObj.textContent;

                        //var accountValue = event.args.item.value;                   
                        var vendorValue = $('#vendorInput').jqxInput('val')

                        if (loadedVendorId != vendorValue) {
                            $('#chooselisttable tbody').html('<tr><td colspan="8"><p>Please wait while choose list loads... <img src="/administrator/components/com_sails/jqwidgets/styles/images/loader-small.gif" alt="loader"></p></td></tr>');

                            // run a little json, accountdetails.php
                            var listdetailsurl = '/components/com_sails/views/order/chooselist.php';
                            $.ajax({
                                //The URL to process the request
                                'url': listdetailsurl,
                                'type': 'GET',
                                'data': {
                                    'venid': vendorValue
                                },
                                'success': function (data) {
                                    //$('#accountInfoDiv').html(data);
                                    $('#chooselisttable tbody').html(data);
                                    divObj.textContent = vendorValue;

                                }
                            });

                        }

                        // qty to chooselist
                        var offset = $("#jqxgrid").offset();
                        $("#popupChooseList").jqxWindow({ position: { x: parseInt(offset.left) + 200, y: parseInt(offset.top) - 80 } });

                        // pop up choose list
                        $('#popupChooseList').jqxWindow('open');
                        $('#filter').focus();

                    });
                    deleteButton.click(function (event) {
                        // delete last selected row
                        if (lastselectedrow != -1) {
 
                            // @param row index.
                            var data = $('#jqxgrid').jqxGrid('getrowdata', lastselectedrow);                                                 
                            lineDelete(data);

                            var value = $('#jqxgrid').jqxGrid('deleterow', lastselectedrow);
                            $('#jqxgrid').jqxGrid('render');
                            lastselectedrow = -1;

                            // set save marker
                            //isDirty = true;                           

                        }

                    });
                    saveButton.click(function (event) {

                        //close any cell open for editing
                        var cell = $('#jqxgrid').jqxGrid('getselectedcell');
                        if ((typeof(cell)!='undefined') && (cell != null)){
                            var editable = $("#jqxgrid").jqxGrid('endcelledit', cell.rowindex, cell.datafield, false);

                        }

                    <?php 
                    if ($this->item->status == "Pending"){
                        // only allow eding of new - ie. pending orders - orders
                        //echo "saveButton.jqxButton({ width: 60, height: 15, theme: 'darkblue', });";
                    ?>
                        //close any cell open for editing
                        var cell = $('#jqxgrid').jqxGrid('getselectedcell');
                        if ((typeof(cell)!='undefined') && (cell != null)){
                            var editable = $("#jqxgrid").jqxGrid('endcelledit', cell.rowindex, cell.datafield, false);

                        }

                        // open save dialog 
                        $('#myIsDirtyModal').modal({ keyboard: false });   

                        <?php

                    }
                    else {
                        // don't open the save dialog window
                        // except if we are an admin and get the override privilege 
                        if ($isSailsAdmin == true) {
                            // we are an admin so we get to override the restriction 
                            // echo "saveButton.jqxButton({ width: 60, height: 15, theme: 'darkblue', });";

                        ?>
                        var cell = $('#jqxgrid').jqxGrid('getselectedcell');
                        if ((typeof(cell)!='undefined') && (cell != null)){
                            var editable = $("#jqxgrid").jqxGrid('endcelledit', cell.rowindex, cell.datafield, false);

                        }

                        // open save dialog 
                        $('#myIsDirtyModal').modal({ keyboard: false });  
                        
                        <?php
                        }

                    }
                        ?>

               
                    });
                    clearButton.click(function (event) {
                        $("#jqxgrid").jqxGrid('removesort');
                        $('#jqxgrid').jqxGrid('clearfilters');

                    });

                    printButton.click(function (event) {

                        var orderWindowUrl = '<?php echo "/components/com_sails/views/order/printorder.php?orderid=".(int) $this->item->id; ?>';
                        // open full system window with record details
                        //var rowToEdit = '/ProjectionAdjustments/EditWithGrid/' + dataRecord.RecordId;

                        var orderwindow =  window.open(orderWindowUrl);
                        return false;                            

                    });

                    coverSheetButton.click(function (event) {
                        $('#jqxSplitter').jqxSplitter('expand');

                        return false;                            

                    });

                    //// search for a record.
                    //searchButton.click(function (event) {
                    //    var offset = $("#jqxgrid").offset();
                    //    $("#jqxwindow").jqxWindow('open');
                    //    $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
                    //});

                }
            });

[ChristopherParticipant]

Hi nja,

your code seems correct. I’m not able to recreate your problem. You might be using an older version of jqWidgets. Please download the latest and try again. If the problem persists, please provide some sample data so we can test it thoroughly.
Here is a fiddle example of a jqxGrid with a column just like the one you experience issues with:
http://jsfiddle.net/atLj2jez/1/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[njaParticipant]

Hi there,

You have recreated the problem exactly!!!!

Clearly I am not explaining myself well. Turns out the problem happens with the string fields too. It might be easier if I show that. Be sure not to “select” the cell, just highlight it.

click on the last name field and type a letter or a number => the grid instantly responses and the letter shows up in the edit box

but if click on the last name field and type a the period form the keyboard or the decimal on a number pad => the grid does not respond and the period or dot does not show up in the edit box.

So users are having to type “0.55” to put in the discount rather than just typing “.55”

BUT, if you type a period or a decimal into a jqxNumberInput field directly – for example – on the jqxNumberInput demo page it goes right in.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnumberinput/index.htm

I hope that is more clear,
nja

[ChristopherParticipant]

Hi nja,

I understand you completely now. This behavior is normal for the jqxGrid. In order to enter “0.55” in a number cell and view the changes you need to be in the cell’s edit mode. To enter Edit mode of a cell you need to either click on it twice, select it and press F2 or select it and press a keyboard button that is a letter or a number( not a symbol, for example ” . ” is invalid). What you are trying to do is change the value of the cell without being able to, because you are not in Edit mode.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[njaParticipant]

Thank you.

Quick followup question, if I wanted to capture the users input and validate it or adjust it would you suggest the cellvaluechanged or the cellendedit event?

The end-users make too many mistakes because they forget to press 0 first when editing the discount, so I thought I might just check their entry and if it is already in decimal format less than 1 I will let it go, but if it is say 5.0 then I will multiply it and divide it and set it to .50 for them.

thanks,
nja

[Author]

Posts