Rectangle 27 0

javascript How to allow html5 number input in free jqgrid?


<input type="number" name="quantity" min="0.01" max="10" lang="de">
{
    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."
    }
}

@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.

@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.

@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.

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.

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.

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.

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 ?

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

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.

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":

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.

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

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.

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.

Note
Rectangle 27 0

javascript How to allow html5 number input in free jqgrid?


<input type="number" name="quantity" min="0.01" max="10" lang="de">
{
    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."
    }
}

@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.

@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.

@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.

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.

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.

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.

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 ?

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

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.

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":

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.

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

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.

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.

Note