Input mask on an Ajax combobox - ajax

I'm using ASP.Net 4.0 to create a web project, and I have two Ajax ComboBoxes on one of my pages. The users have requested input masks on the two ComboBoxes. I can't use the Ajax MaskedEditExtender, since it won't work with a ComboBox. Has anyone ever implemented input masks on an Ajax ComboBox?

DevExpress editors allow you to use masks during editing. Masks are useful when a string entered by an end-user should match a specific format. For instance, you may require a text editor to only accept date/time values in a 24-hour format, only accept numeric values, or only accept numbers that are automatically inserted into the placeholders of a telephone number.
Masked input is supported by the following editor types:
Text box editors (ASPxTextBox and ASPxButtonEdit).
Text box mask settings can be accessed via the MaskSettings property. The editor’s mask can be specified via the MaskSettings.Mask property.
Date editors (ASPxDateEdit).
To enable masked input within a date editor, the UseMaskBehavior property should be set to true. The mask can be defined via the EditFormatString property if the EditFormat property is set to 'Custom'.
In this demo, see how masked input behavior is implemented by entering data into the various types of editors.
learn more here
using System;
using System.Web.UI;
public partial class Features_MaskedInput : Page {
protected void Page_Load(object sender, EventArgs e) {
txtZip.MaskSettings.PromptChar = cmbPromtChar.SelectedItem.Value.ToString()[0];
dateEdit.EditFormatString = cmbDateType.SelectedItem.Value.ToString();
dateEdit.Value = DateTime.Now;
}
}

Related

customizing sort label of responsive p:dataTable [duplicate]

How can I change the language for Sorting on PF DataTable component with reflow = "true" (so responsive Datatable)?
The problem is that on mobile screen, we can sort data from auto-generated dropdown where we have our sort options, see picture bellow. How can I change the language for this dropdown?
I'm using PF 6.0.
The intended way to do this is to define the following properties in your resource files (see Messages.properties)
primefaces.datatable.SORT_LABEL = Sort
primefaces.datatable.SORT_ASC = Ascending
primefaces.datatable.SORT_DESC = Descending
You can see this when you look at the DatatableRender of primefaces.
Notice i18n is done in different ways in primefaces. Some components like calendar or schedule must be translated via javascript. See here
I never ran into this or used it, but I know the source is open. So I went to the javascript file for the datatable. There I searched for 'Ascending' and via this.ascMessage, I ended up on line 170 where 'datatable.sort.ASC' is used as a key.
This in turn points to line 619 in core.js
getAriaLabel: function(key) {
var ariaLocaleSettings = this.getLocaleSettings()['aria'];
return (ariaLocaleSettings&&ariaLocaleSettings[key]) ? ariaLocaleSettings[key] : PrimeFaces.locales['en_US']['aria'][key];
},
Where you can see the normal PrimeFaces locale functionality is used.
So using your own locale and overriding this part in it, like in the default locale
aria: {
'paginator.PAGE': 'Page {0}',
'calendar.BUTTON': 'Show Calendar',
'datatable.sort.ASC': 'activate to sort column ascending',
'datatable.sort.DESC': 'activate to sort column descending',
'columntoggler.CLOSE': 'Close'
}
Will solve your issue I would expect

How to retrive the data displayed in Message box for Coded Ui testing

Scenario: After clicking on the submit button,a message box appears with the ticket number. I want to save the ticket number to a string parameter for future purposes. Is it possible in Coded Ui?
Use the Assertion tool to select the textbox and name it "CaptureText()" (Do this to use the tool to capture the object). Once you've done this, transfer the code from the UIMap Designer File to the Coded File. Inside your Coded UIMap File you should see something like this:
public void CaptureText()
{
HtmlCustom uIItemCustom = this.Window.Foo.Bar.UIItem;
//Comment this out
//Assert.IsNull(uIItemCustom);
//Change it to
var foo = uIItemCustom.InnerText;
}
Now the 'foo' variable contains the value of the label / textbox.

Need a non-ugly way to dynamically modify acceptFiles and allowedExtensions

I have an uploader that has two modes where it uploads different file types. Which one is active depends on what the user is doing. I am using FineUploaderBasic.
Right now to dynamically modify the allowedExtensions I do something like this:
if(type==<?=Campaign_Placement::AD_TYPE_USER_FLASH?>) // SWF
uploader._options.validation.allowedExtensions = ['swf'];
else // Static image
uploader._options.validation.allowedExtensions = ['jpeg', 'jpg', 'gif', 'png'];
uploader.reset(); // Resets with the new extensions
And to modify the acceptFiles:
if(type==<?=Campaign_Placement::AD_TYPE_USER_FLASH?>) // SWF
$('input[name="userfile"]').attr("accept", "application/x-shockwave-flash");
else // Static image
$('input[name="userfile"]').attr("accept", "image/jpeg, image/jpg, image/gif, image/png");
Both are ugly ways to do this, would appreciate a simple way to do both of these through the API, or some other elegant solution. Thanks!
You have 3 other options to solve this problem:
Don't set the allowedExtensions validation value at all. Then contribute a validate event handler that returns false if the user has submitted an invalid file, based on the value of the select you have provided.
Simply construct or re-construct the uploader instance whenever the user changes their selection.
Consider using the relatively new extraButtons feature, where you can connect additional upload buttons to a single Fine Uploader with varying validation options. For example, you can contribute some default allowed extensions (tied to the default upload button), and then provide an extraButtons button with alternate allowedExtensions. Simply display the appropriate button via JavaScript when the user changes their selection.

What shall I do to prevent a change in one element to trigger a change in other element?

In the ToolBar class of lib/tool_bar.dart
https://github.com/dzenanr/magic_boxes/blob/master/lib/tool_bar.dart
at https://github.com/dzenanr/magic_boxes there are two elements
InputElement itemNameInput;
SelectElement itemCategorySelect;
itemNameInput.onChange.listen((Event e) {
itemCategorySelect.onChange.listen((Event e) {
A change in itemCategorySelect triggers a change in itemNameInput!? This change complicates a use of the tool.
What shall I do to prevent a change in one element to trigger a change in other element?
In the tool, it happens when entering a new attribute for the selected concept:
A new attribute may be added to the selected concept by entering its name in the attribute field. Use the Enter key to see the name in the concept's attributes.
If you want to use characteristics different from those proposed,
change them first, then enter a name in the attribute field (I want to avoid this.)
Problem:
If you enter an attribute name first without using the Enter key, then change
at least one of its characteristics (e.g., attribute category), the name appears
in the concept's attributes but without a changed characteristic.
Then, you must select it (by entering again its name) in order to apply the change.
I have found a working solution:
change
itemNameInput.onChange.listen((Event e) {
to
itemNameInput.onKeyPress.listen((KeyboardEvent e) {
if (e.keyCode != 13) return; // 13 is Enter key
In this way an attribute name appears in the concept's attributes only after the Enter key is presses.
However, in the Dart API doc, I have found out that the KeyboardEvent is deprecated.
http://api.dartlang.org/docs/releases/latest/dart_html/KeyboardEvent.html
"Note: The KeyboardEvent interface is deprecated in DOM Level 3 in favor of the new TextInput interface and the corresponding textinput event, which have improved support for alternate input methods."
I have not found TextInput interface nor textinput event!?

Styling an extended TextBox control in Windows Phone 7

Totally new to custom control creation in Silverlight.
I'm wanting a custom control that inherits from a TextBox control. I've found plenty of tutorials but they all do something like watermarked text or other attached properties. My goal is only to manipulate text at time of entry using the KeyUp event, so visually my TextBox is no different from a standard TextBox.
I created a class file and inherited from TextBox, but at run-time the textbox doesn't display. From what I can gather I need a themes/generic.xaml file, but all of samples I've seen include styles for the additional properties, and in my ignorance I don't know what to change and/or remove.
I'm hoping someone can point me to a generic plain-jane TextBox style definition or a tutorial of such.
What you described should work, I just tried the following and the TextBoxEx renders just fine:
public class TextBoxEx : TextBox
{
protected override void OnKeyUp(KeyEventArgs e)
{
base.OnKeyUp(e);
}
}
You do not need to add a generic.xaml file. This file is used to provide a template which defines the look of your control. You specify the default look of your control by setting the following property:
DefaultStyleKey = typeof(MyControl);
However, as the above TextBoxEx does not set this property, it uses the value inherited from TextBox and hence it inherits the same template (i.e look).

Resources