jQuery UI Widgets › Forums › Grid › jqxMaskedInput Editor??

Tagged: , , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    jqxMaskedInput Editor?? Posts
  • August 28, 2012 at 5:38 am jqxMaskedInput Editor?? #7180

    fgaonet
    Member

    I am trying to edit a column in a Grid, which is must be “Number Only”. It seems I can’t use jqxMaskedInput as editor. Is there any way to let the editor only accept number (just ignore other key value)?

    Thanks,

    p.s.
    If I use arrow keys moving to a cell and hit a number key on the “number pad” (number keys on the right side of key board), the cell can’t be editable. If I hit any other keys, it make the cell editable immediately. Is it a bug?

    August 28, 2012 at 6:00 am jqxMaskedInput Editor?? #7184

    Dimitar
    Participant

    Hello fgaonet,

    JqxMaskedInput cannot be used to edit a cell in jqxGrid. However, you can use jqxNumberInput for ths purpose. Please, check out the demo jqxGrid – Editing:

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellediting.htm?classic

    In the demo, the columns Quantity and Price have number-only input.

    Best Regards,
    Dimitar

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

    August 28, 2012 at 3:52 pm jqxMaskedInput Editor?? #7218

    fgaonet
    Member

    Hi, Dimitar:

    Thank you for your reply! It works almost as my expected. Only one thing needs to be modified.

    When I start editing, it shows “NaN”. If I leave without any input, it shows “0”. How can I keep it as blank if nothing entered?

    Thanks again!

    August 29, 2012 at 7:07 am jqxMaskedInput Editor?? #7231

    Dimitar
    Participant

    Hi fgaonet,

    Here is how to show an empty string instead of a NaN value using cellsrenderer:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>Grid populated from JSON.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../scripts/jquery-1.7.2.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/jqxscrollbar.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.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "beverages.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'name' },
                        { name: 'type' },
                        { name: 'calories' },
                        { name: 'totalfat' },
                        { name: 'protein' },
                    ],
                    id: 'id',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                // if a cell value is NaN, the customCellsrenderer shows it as an empty string
                var customCellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                    if (isNaN(value)) {
                        return '';
                    };
                };
                $("#jqxgrid").jqxGrid(
                {
                    width: 920,
                    autoheight: true,
                    source: dataAdapter,
                    selectionmode: 'singlecell',
                    editable: true,
                    editmode: 'click',
                    columns: [
                      { text: 'Name', datafield: 'name', width: 250 },
                      { text: 'Beverage Type', datafield: 'type', width: 250 },
                      { text: 'Calories', datafield: 'calories', width: 180, columntype: 'numberinput', cellsrenderer: customCellsrenderer },
                      { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                      { text: 'Protein', datafield: 'protein', width: 120 }
                  ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    And here is the JSON date in beverages.txt:

    [{
     "id": "1",
     "name": "Hot Chocolate",
     "type": "Chocolate Beverage",
     "calories": "370",
     "totalfat": "16g",
     "protein": "14g"
     }, {
     "id": 2,
     "name": "Peppermint Hot Chocolate",
     "type": "Chocolate Beverage",
     "calories": "NaN",
     "totalfat": "16g",
     "protein": "13g"
    }, {
     "id": "3",
     "name": "Salted Caramel Hot Chocolate",
     "type": "Chocolate Beverage",
     "calories": "450",
     "totalfat": "16g",
     "protein": "13g"
    }]

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.