Change the <input type...> on a TextBox

[michaeldarby]

Does anyone know if there is a way to change the <input html code for a TextBox control to <input type="number"?

I am trying to force the iPad keyboard to display the correct keyboard layout for the field type, but I can't seem to figure it out.

Thanks

[Keith Hubert]

Re: Change the &lt;input type...&gt; on a TextBox

Hi Michael,

See attached screen shot, hope this helps.

Check Client Side formatting. Then from Format type select Custom. Next select Format Definition. Click on that to open the dialog and select Number from the radio button. Finally, edit the Parse out with the format at the bottom of the dialog.

[michaeldarby]

Re: Change the &lt;input type...&gt; on a TextBox

Hi Kieth

I did as you said, but when I look at the page source it still only reads:
<input id="GRID1.V.R1....
instead of
<input type="number" id="GRID1...

therefore the iPad still only displays the normal keyboard, not the numeric keyboard. Any other ideas? Thank you

[michaeldarby]

Re: Change the &lt;input type...&gt; on a TextBox

Anyone else have any ideas?

[Jim Coltz]

Re: Change the &lt;input type...&gt; on a TextBox

You can set your control type to "custom" and write your own html for the control to get you this. The code below is pulled from a grid using Firebug with Firefox to show the input type change.

<input id="GRID1.V.R10.CUSTOMERID" class="GrTanEdit" type="number" size="5" maxlength="5" name="V.R10.CUSTOMERID" value=" 57">

Not the easiest thing, but it does look doable.

[michaeldarby]

Re: Change the &lt;input type...&gt; on a TextBox

Jim - thanks. I had managed to add a field set to "custom" to a grid, and display the required data, but I couldn't get Alpha to let me submit the changed data back to the database. Also, I am using a Dialog2 which doesn't have the "custom" type.

[LukeS]

Re: Change the &lt;input type...&gt; on a TextBox

michaeldarby, did you figure out how to get this to work? I am trying to force the numeric keyboard on android phones and I am also trying to set the input type to <input type="number"

[LukeS]

Re: Change the &lt;input type...&gt; on a TextBox

I got it sorta working with a custom control type. It works in the working preview, internet explorer, and firefox but does not work in the chrome web browser. This must be something to do with HTML5 as IE does not support it yet and firefox does not support the input type yet. In chrome the text box is properly displayed but when a value is entered it does not submit it.

Here is what I did... I copied the HTML code A5 generates when it creates a textbox for the desired field then I changed the field to a custom field and wrote xBasic which substitutes the data to replicate what A5 generates.

Order_qty_c_render = <<%html%
<input id="!CNAME!.V.R!ROWNUM!.ORDER_QTY_C"  style=" " size="3" maxlength="3"  class="MobBlueEdit" type="number" name="V.R!ROWNUM!.ORDER_QTY_C" value="!VALUE!" />
%html%

Order_qty_c_render = STRITRAN(Order_qty_c_render,"!VALUE!", convert_type(data.ORDER_QTY_C,"C") )
Order_qty_c_render = STRITRAN(Order_qty_c_render,"!ROWNUM!", convert_type(args.RowNumber,"C") )
Order_qty_c_render = STRITRAN(Order_qty_c_render,"!CNAME!", args.GridDefinition.ComponentName )


HTML it Generates:
<td id="OGG.TD.R5.ORDER_QTY_C" class="MobBlueGridData"  ><input id="OGG.V.R5.ORDER_QTY_C"  style=" " size="3" maxlength="3"  class="MobBlueEdit" type="number" name="V.R5.ORDER_QTY_C" value="0" /></td>

HTML of another textbox which is very similar to compare the generated code to:
<td id="OGG.TD.R5.ORDER_QTY_B" class="MobBlueGridData"  ><input     id="OGG.V.R5.ORDER_QTY_B"  style=" " size="3" maxlength="3"  class="MobBlueEdit" type="text" name="V.R5.ORDER_QTY_B" value="0" /></td>

[michaeldarby]

Re: Change the &lt;input type...&gt; on a TextBox

Hi Luke, I did ask Selwyn about it a while back and he said to use the OnGridPartRender server side event to replace part of the generated html for the relevant fields (By replacing values in e.html). It nearly worked in that the keyboard behaved properly on the iPad and Android phone, but every time I tried to submit the data, the data would get lost. The HTML looked perfect so I was a bit confused, but didn't have the time to keep trying.

It would be great to find a way that works ...

[LukeS]

Re: Change the &lt;input type...&gt; on a TextBox

Michael, Thanks for the reply. That is an interesting way to handle it with the OnGridPartRender event. I am seeing the same result, nothing happens when I submit the data (it is not saved) on a HTML5 browser. It works in bowers that do not support HTML5 and the <input type="number...> is a HTML5 syntax. So this means the HTML is not botched up as the data can still be submitted and properly updated. It is just HTML5 (webkit) browsers are not submitting the updated data for some reason when the type is of number.

To see this turn on Grid --> Update Settings --> Debugging --> Show Update Commands then make a change to a type "number" input textbox field and hit submit, a server side update is not fired. If you change any other field and hit submit you will see the server side code displayed for an update. So not sure what how to resolve this but it would be interesting to find out. It is a real pain constantly changing over the the numeric keyboard to enter data on mobile devices.

[LukeS]

Re: Change the &lt;input type...&gt; on a TextBox

After talking with alpha they added the HTML5 type to the latest build, modified the javascript to accept the changes, and it works great now! I am thrilled about this addition and wanted to give you guys a heads up on the new feature.

HTML5_type.PNG

[michaeldarby]

Re: Change the &lt;input type...&gt; on a TextBox

That is great news - thanks for passing it on.