I have a RadComboBox that triggers some Javascript which changes a MaskedTextBox's mask from a 10-digit phone number to a 30-digit free-form mask. This behaves fine when testing under desktop browsers such as Chrome, but when I test it using mobile browsers on iOS and Android devices I get strange behavior. This occurs if I select the first option:
Using Chrome under Android (on a Samsung Galaxy S5 running Android 5.1), when setting focus on the MaskedTextBox, when I start typing on it the first value is ignored and the second value is added to the input field. If I try to edit the value I entered, the cursor jumps to the right side of the object and sometimes can't delete values and seems to get stuck.
Using Safari under iOS on an iPhone, everything seems to work properly except when focusing outside of the MaskedTextBox and giving it focus again, it pads the value entered with empty spaces.
I isolated the code below. Am I doing something wrong or is this an issue with the MaskedTextBox control under mobile browsers?
I'm using UI for ASP.NET AJAX Q2 2016 for the 4.5 .NET Framework.
Thank you:
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
telerik:RadScriptBlock
runat
=
"server"
ID
=
"RSBlock"
>
<
script
type
=
"text/javascript"
>
//
<![CDATA[
function rcbType_ClientIndexChanged(sender, eventArgs) {
var selectedItem = eventArgs.get_item();
switchMask(selectedItem.get_value());
}
function switchMask(selectedValue) {
var rtxtNumber = $find("<%= rtxtNumber.ClientID%>");
var masks;
switch (selectedValue) {
case '0':
var rtxtNumberResource1Label = 'Enter Order Number';
$get(rtxtNumber._wrapperElementID).getElementsByTagName("label")[0].innerHTML = rtxtNumberResource1Label;
rtxtNumber.set_enabled(true);
rtxtNumber.enable();
masks = [
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
];
rtxtNumber._length = 0;
rtxtNumber._setMask(masks);
rtxtNumber.clear();
break;
case '1':
rtxtNumber.set_visible(true);
var rmtbNumberResource1Label = 'Enter Phone Number';
$get(rtxtNumber._wrapperElementID).getElementsByTagName("label")[0].innerHTML = rmtbNumberResource1Label;
rtxtNumber.set_enabled(true);
rtxtNumber.enable();
masks = [
new Telerik.Web.UI.RadLiteralMaskPart('('),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadLiteralMaskPart(') '),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadLiteralMaskPart('-'),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadDigitMaskPart(),
new Telerik.Web.UI.RadDigitMaskPart()
];
rtxtNumber._length = 0;
rtxtNumber._setMask(masks);
rtxtNumber.clear();
break;
default:
rtxtNumber.set_enabled(false);
rtxtNumber.disable();
break;
}
}
//]]>
</
script
>
</
telerik:RadScriptBlock
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
div
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadScriptManager1"
/>
<
telerik:RadComboBox
ID
=
"rcbType"
runat
=
"server"
Label
=
"Order Number or Phone Number?"
CausesValidation
=
"false"
Width
=
"100%"
Height
=
"200px"
EmptyMessage
=
"Select one"
AllowCustomText
=
"true"
OnClientSelectedIndexChanged
=
"rcbType_ClientIndexChanged"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"Order Number"
Value
=
"0"
/>
<
telerik:RadComboBoxItem
Text
=
"Phone Number"
Value
=
"1"
/>
</
Items
>
</
telerik:RadComboBox
>
<
br
/><
br
/>
<
telerik:RadMaskedTextBox
ID
=
"rtxtNumber"
runat
=
"server"
Label
=
"Enter Order Number"
Width
=
"100%"
Enabled
=
"False"
Mask
=
""
/>
</
div
>
</
form
>
</
body
>
</
html
>
Hi:
I use RadWizard and create 10 WizadStep, each step content 10 textbox, how can I get all of textbox value when I press finish ?
Hi,
I have implemented SessionTimeOut exactly as shown in the example http://www.telerik.com/forums/demo-for-session-timeout-is-confusing
However, I need the TimeOut notification to appear only on the home page, the default page after logging in. When the user clicks on a grid view row on the home page, which sets the sessions etc and navigates to various other pages, the timeout should not appear.
For this, I am setting the ShowInterval to Session.Timeout - 1 on page load and setting it to 0 on click of the gridview row.
However, the timeout notification is always showing after the time out ie., the timer is always ticking in the background.
Any suggestions are highly appreciated.
Thank you.
Hi
I wish my mp4 file can play on RedMediaPlayer. but, when I load mp4 file, it no response. Is my file format wrong or too big?
Hi:
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" OnLoad="RadSkinManager1_Load" OnInit="RadSkinManager1_Init" />
it will generate a RadCombox at page, the RadCombox content several skin name, but it English, I want rename these skin name in local language, hwo can I do ?
(Version 2016.3.1027)
1. I need the RadWizard show in Vertical, I try this, but not work no matter any render mode
2. Why Telerik want hide "Orientation" property ? I'm type the property directly, the code complete will not show " Orientation " property
<telerik:RadWizard ID="RadWizard1" runat="server" Orientation="Vertical">
<WizardSteps>
<telerik:RadWizardStep ID="RadWizardStep1" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep2" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep3" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep4" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep5" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep6" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep7" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep8" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep9" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep10" runat="server">
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="RadWizardStep11" runat="server">
</telerik:RadWizardStep>
</WizardSteps>
</telerik:RadWizard>
Trying to use the Bubble Type layer on a map.
Have successfully downloaded the urban-areas.json file using the WebServiceDataSourceSettings inside the RadClientDataSource and referencing the appropriate ClientDataSourceID in the MapLayer referencing the Bubble type.
I am trying to duplicate generating the GeoJason data, not from a file, but, from vb.net code behind using <WebServiceDataSourceSettings Select-DataType="JSON" Select-RequestType="POST" Select-ContentType="application/json" ServiceType="GeoJSON" Select-Url="testHeatMap.aspx/jsonsalesdata"></WebServiceDataSourceSettings>, where testHeatMap.asxp/jsonsalesdata is a public function that produces the same formatted json text.
While using the sample urban-areas.json file inside the RadClientDataSource produces the correct bubbles, not matter what I try in the code behind to produce the same json string, my Bubble layer will not render.
Any ideas or suggestions or examples?
Thanks.
Hi,
I have a RadHtmlChart with dynamic data binding and DateTime values on the x-axis.
I'd like to put a Navigator under the chart, and I know that that is possible only if property Layout = "Stock".
But when I set this value on the Layout property, the chart appears very approximate, and almost impossible to read (example images attached).
Why is this happening? Is there a way to show the chart with every value or, at least, reduce the amount of this approximation?
Thank you.