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 ?

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 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 '15 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 '15 at 17:43
  • In input data comma is used as decimal separator. In edit mode empty cell appears in this case. http://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 '15 at 18:52
  • @Andrus: I think that you still don't understand my main statement. **I don't recommend you to use `` because of the problems with specifying localization**. You can have a little better results as on your demo, see http://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 '15 at 20:19
  • @Andrus: [The answer](http://stackoverflow.com/a/13416324/315935), 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 `` have *the same problems*, but it seems work OK in your environment. – Oleg Nov 21 '15 at 20:20
  • Input data has comma as decimal separator in data. Your demos use point as decimal separator so they do not resolve issue if comma is used as decimal separator in input data. Number type activates native numeric only keypad in touch devices. Other solutions activate alphapetic keypad so they cannot used. How to activate numeric keypad for numeric fields in touch devices? Your referenced answer is 3 years old maybe number input entry is improved. Only issue seems to convert point to comma before input type=number is activated. Should this done using `edittype: 'custom'` or is there better way ? – Andrus Nov 21 '15 at 20:46
  • @Andrus: I don't know how to explain you clear enough. **I don't see any way to use `` with correct support of localization.** [The last demo](http://jsfiddle.net/OlegKi/kvtrtzc5/3/), which I posted, uses dot at decimal separator and it uses formatter *to display* the data. The `` still display dot in the input, but the same problem exist in the standard edit control of jqGrid. I posted the answer where I described **my opinion**. You can still try to write some implementation *yourself*. – Oleg Nov 21 '15 at 20:57
  • In your demo `mydata` variable is initialized using strings which contain points like `amount: "300.00", tax: "20.00"` . In my application data contains commas like `amount: "300,00", tax: "20,00"` If points are changed to commands in your demo it shows empty cell on edit. How to fix?. This is question about using specific input data which comes from server with commas always. This is not localization issue. Problably custom edittype or custom jsonformatter can solve it. – Andrus Nov 21 '15 at 21:17
  • @Andrus: The data *should* have format `amount: "300.00", tax: "20.00"` or better `amount: 300.00, tax: 20.00` (JSON format for numbers) instead of `amount: "300,00", tax: "20,00"`. One should either fix the format on the server side or to use `beforeProcessing` callback to fix the data on the client side. It's strictly recommended to use language independent format for transferring the data between computers: date in ISO format `2015-11-21`, numbers in native JavaScript format `12345.67` and not as `"12,345.67"` or `"12.345,67"`. One should not use any localization in the transferred data. – Oleg Nov 21 '15 at 21:31
  • @Andrus: If I change the display language (GUI language) of Google Chrome to German and restart the process (better to make logout and login) then the demo http://jsfiddle.net/OlegKi/kvtrtzc5/3/ will displays `,` as separator in the `` filed for `"amount"` column. Thus I can imagine that you could get acceptable results on mobile devices. You will still have very restricted implementation possibilities and can't specify locale, which you want to use. – Oleg Nov 21 '15 at 21:52
  • I havent found a way to use points in input data for jqgrid. I posted this as http://stackoverflow.com/questions/33849225/how-to-convert-point-to-comma-for-any-number-of-decimal-places – Andrus Nov 21 '15 at 22:21
  • `beforeProcessing` changes comma to point for whole jqgrid column. Column should show comma as in data from server. Data shown in columns should be exactly as readed from server. How to change only data which is passed as input to `input type=number` element if editing starts ? – Andrus Nov 21 '15 at 22:45
  • This does not restrict maximim value on manual data entry as described in http://stackoverflow.com/questions/33853914/how-to-restrict-max-value-on-html5-number-input-on-manual-entry . how to fix ? – Andrus Nov 22 '15 at 10:53