javascript jquery html jqgrid free-jqgrid

How to allow html5 number input in free-jqgrid

html5 has number input type like

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<input type="number"  />
</body>
</html>

In this case non-numeric characters are disabled on entry. Native numeric-only keypad appears automatically in touch devices.

How to force free jqgrid field edit to use this type ?

jgrid column is defined as

{"label":"Quantity","name":"Valkogus",
 "index":"Valkogus","align":"right",
 "searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},
 "editoptions":{"maxlength":7,
 "dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},
{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},
 "editable":true,"width":62,
 "classes":null,"hidden":false},

jqgrid is created from remote json data. inline and form editing and search toolbar is used. This allows to enter any characters. In touch devices full keyboard appears.

How to fix this so that in edit and toolbar search this field appears with type="number" attribute?

How to specify that input is integer only or allows decimal places? Maybe html5 validation attributes and also added to created input element for this.

Answer in How to use native date picker in both form and row editing in free jqgrid describes html5 native datepicker usage. Maybe this can used got number input also

Update

I created customer formatter using sample from

Add multiple input elements in a custom edit type field

Colmodel:

{"edittype":"custom",
"name":"Kogus",
"align":"right",
"searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},
"editoptions":{"custom_element":function(value, options) {
return numeric_element(value, options,'58','Kogus','RidG','ArtKogus')}
,
"custom_value":combobox_value,
"maxlength":12,

"style":"text-align:right",
"readonly":null,
"disabled":null
 },
"editable":true,
"width":58,
"classes":null,
"hidden":false
},

javascript

function numeric_element(value, options, width, colName, entity, andmetp) {
    var elemStr, newel;
    elemStr = '';
    if (options.id === options.name) {
        elemStr += '<input type="number" class="FormElement" size="' +
                options.size + '"' + ' id="' + options.id + '"';
    }
    else {
        elemStr += '<input type="number" ' +
           ' style="text-align: right; width: 100%; box-sizing: border-box;"     ' +
           ' id="' + options.id + '" maxlength="'+ options.maxlength+'"  name="'+options.name+'"';

    }
    elemStr += ' value="' + value + '"/>';
    newel = $(elemStr); 
    return newel;
}



function combobox_value(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).find("input").val();
    } else if (operation === 'set') {
        $('input', elem).val(value);
    }
}

If inline edititing is started, number disappears in cell. After pressing inline save button, error function 'custom_value' undefined appears.

How to fix those issues ?

Solution

Of cause one can implement support of type="number" attribute and other HTML5 type attributes in free jqGrid. I will consider to do this in the future. Today I see the missing locale support as the large disadvantage of HTML5 type. It's design error in my opinion. I recommend you to look at the answer or the article or this one from W3. You can try for example to modify the standrad demo from the article to use

<input type="number" name="quantity" min="0.01" max="10" lang="de">

You will see that Google Chrome v.46 ignores lang attribute and uses the locale of the web browser. In other words the current state of HTML5 type attributes is not eterprise ready for multi-language support.

You can use pattern attribute for better validation (see the ansewr), but it still don't help to force the usage of , instead of . in the web browser which have English locale.

If you do need to use type="number" attribute now, you can use edittype: "custom". You can find the demo with an example in the answer for example.

Finally I want to mention, that I see last time many questions on the stackoverflow, which looks like feature requests or an ask to implement some parts, which one want to use in his commertial products. I develop free jqGrid in my free time. I provide the results of the work for free. I just ask to contribute the development by donating via PayPal (see the readme). On the other side I get very few donations and the most developer to prefer just to use the results of the development. It's a pity. One could at least to share his reauslt (in form of code fragments) with other. Stackoverflow and GiHub is not the place where sombody makes your job for free. One can gives you some tips, but you still have to make the most of the work yourself.

UPDATED: One can use editoptions to set custom properties on <input> element, but as I wrote before it will work not in all cases.

The demo http://jsfiddle.net/OlegKi/kvtrtzc5/2/ works good for example in my Google Chrome, but it could work incorrectly for other input data or other locale of Chrome browser. Thus I don't see the demo as the solution, it could be still helpful in some environment. I used in the demo the following definition of the column "amount":

{
    name: "amount",
    width: 62,
    template: "number",
    editoptions: {
        type: "number", 
        step: "0.01",
        min: "0.00",
        max: "1000",
        pattern: "[0-9]+([\.|,][0-9]+)?",
        title: "This should be a number with up to 2 decimal places."
    }
}

UPDATED 2: One more demo http://jsfiddle.net/OlegKi/kvtrtzc5/3/ uses German locale to display the data. If you have German GUI language in Google Chrome (one have to restart Google Chrome process, better logoff and login from the system) then the user will see , as the decimal separator.

One have still no flexibility in the web application for choosing the locale of input element. The results depends only from the web browser settings and can't be specified in JavaScript application.