1

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 ?

1 Answer 1

3

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.

enter image description here

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.

13
  • I appreciate your huge work. Html page does not have lang attribute. Chrome accepts both , and . as decimal separator so this is not issue. Browsers treat unknown input types like input type=text. I expected the same behaviour. This small change would enable html5 support in jqgrid. I tried to create custom formatter but failed. I updated question with formatter tried.
    – Andrus
    Nov 21, 2015 at 17:14
  • @Andrus: I posted UPDATED part in my answer with the demo, which works at me, but it could not work correctly in other environment. Probably it's what you want to implement.
    – Oleg
    Nov 21, 2015 at 17:43
  • In input data comma is used as decimal separator. In edit mode empty cell appears in this case. jsfiddle.net/3pca1mmx/3 reproduces the issue. How to fix this ? Is it possible to replace , with . before edit starts or is there better way ?
    – Andrus
    Nov 21, 2015 at 18:52
  • @Andrus: I think that you still don't understand my main statement. I don't recommend you to use <input type="number".../> because of the problems with specifying localization. You can have a little better results as on your demo, see jsfiddle.net/OlegKi/kvtrtzc5/3 for example, but you will have to test the solution very carefully. You can still have some problems if the user changes the locale of web browser of OS GUI.
    – Oleg
    Nov 21, 2015 at 20:19
  • @Andrus: The answer, which I referenced in my answer, is started with the statement: "The HTML5 input type=number is inadequate from the localization point of view, due to both the definition and the implementations". I have the same opinion. I still included the demo in UPDATED part of my answer to show some attempt of solution, which looks good at the first glance, but which can't be converted to the perfect solution. The usage of <input type="date".../> have the same problems, but it seems work OK in your environment.
    – Oleg
    Nov 21, 2015 at 20:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.