I'm trying to format a textbox control in kendoui as phone number, using data- attributes
The backend field is string.
I made it as:
<asp:TextBox runat="server" CssClass="k-textbox"
data-role="numerictextbox"
data-spinner="false"
data-format="(###) ###.####"/>
and
<asp:TextBox runat="server" CssClass="k-textbox" data-format="(###) ###.####"/>
but none works.
First one does not display any intermediary formatting characters or spaces: ( ) -
Second does not enforce digits, as well as not display any intermediary formatting characters.
Any suggestions?
EDIT
I just find out jquery.inputmask, and tried to use it. I included the script jquery.inputmask, and added the data-inputmask attribute as below
<script src="/scripts/jquery.inputmask/jquery.inputmask-2.4.20.js"></script>
....
<input type="text" class="k-textbox" data-inputmask="'mask': '(999) 999.9999'"/>
but nothing happened.
How should I trigger mask enforcement?
I don't want to use jquery call for each control like
$("#myctrl").inputmask({"mask": "(999) 999.9999"})
but instead use data-attributes
Thanks
You should use the HTML5 phone number input type.
html5 input types
As far as I am aware KendoUI does not have a widget or control to format input field such as phone numbers. It is planed to be incorporated soon this year, I think it has not been release yet:
http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2404523-just-a-mask-edit
In the meantime I would recommend you using one of the JQuery options available, like these 2 examples:
https://github.com/RobinHerbots/jquery.inputmask
http://digitalbush.com/projects/masked-input-plugin/
Here is a link to a working fiddle using the data-inputmask attributes that you would like to use.
You had assigned the mask in the attribute correctly..
<input type="text" class="k-textbox" data-inputmask="'mask': '(999) 999.9999'"/>
Your problem is that you never selected the elements and then applied the inputmask. The data-inputmask is just an attribute that will store the mask definition, it doesn't run automatically.
You need to add this.
$(document).ready(function()
{
$('[data-inputmask]').inputmask();
});
Related
Site will exclusively be used on mobile devices. So for fields requiring only numeric input, I want to bring up the numeric keypad. I can successfully do this by using an html input element with the type set to tel. I want to add an asp:RequiredFieldValidator to this field and based on MSDN.
I need to set the input to runat="server". When I do this, I get this error;
tel is not a valid type for an input tag.
If I remove the runat="server", I get
Unable to find control id Contract referenced by the ControlToValidate property of ''
Here is my code:
<input type="tel" runat="server" id="Contract"></input>
<asp:RequiredFieldValidator runat="server" ControlToValidate="Contract"
ValidationGroup="IfOnRent" Text="*"
ErrorMessage="Contract Required">
</asp:RequiredFieldValidator>
Am I just out of luck and have to code my own validations?
You may want to leave "type" undeclared in your code "front". You can set this in the code behind (maybe in the Page_Init or Page_Load):
this.Contract.Attributes.Add("type", "tel");
If you have Microsoft .NET Framework 4 Reliability Update 1 (KB2533523) installed, than TextBox accepts new html5 input types (you would need it for UpdatePanel to recognize them on postback too).
Or you can just inherit HtmlInputText in your own control (any .net version - any input type):
[ToolboxData("<{0}:Input runat='server' />"), Themeable(true)]
public sealed class Input: HtmlInputText { }
If you are using C#
Contract.Attributes["type"]="tel"
Writing inline types for html inputs may produce parse error in .net. So add the above line of code in your PageLoad()
you can use
Make sure that the submit button has the same validationgroup property value as the requiredfieldvalidator
Given a textbox:
<asp:Textbox runat="server" id="txtAddress1" />
This renders as something similar to:
<input name="ctl00$mainContent$txtAddress1" type="text" id="ctl00_mainContent_txtAddress1" />
I don't think browsers autocomplete features recognise this name/ID as a field they can autofill, they are not standard recognised names.
Is there any way to overide the client ID's so that autocomplete has a better chance of recognising them?
2 Points with this.
1) The "Override the Name" feature was introduced in ASP.Net 4.0, where for any property you can choose a hardcoded name instead of the dynamic name. You need to be careful on this as you don't want 2 objects sharing a name.
2) ASP.Net 2.0 and above (may have been in v1.0) has a property on the control called "AutoCompleteType" which provides a hint to the browser on what sort of information is required in the box.
Assuming you're using Asp.net 4.0, and you're aware of the points mentioned by DJIDave, you can use the ClientIDMode property on a control, and set it to 'Static'. Then, what ever you specify in the Id field in Asp.Net will be brought through to your final markup, and will not be 'mangled' (for want of a better word) by Asp.Net.
Using jQuery I want to be able to click an element which will also checks it's related radio button. I had this working fine until we had to add runat="server" to the radio buttons.
When I apply this it prevents my jQuery function from working and I cant figure out how to get round it, heres a simplified version of the code:
HTML
<input type="radio" runat="server" id="sector1Radio" name="SectorGroup" title="Sector1" />
jQuery
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
I've found out that when its converted to a .net control instead of checked="checked" (as it would be usually) it is just Checked, so I changed that but on inspecting the DOM in multiple browsers, none of my radio buttons are being checked :-(
Are there any other ways I can use jQuery to check a radio button that has runat="server"?
Cheers!
I think that Your problem is that the id of the input is no longer sector1Radio but rather ctl00_sector1Radio or something similar. This happens if Your input control is inside e.g. a ContentPlaceHolder control (when using master pages).
Can You check the generated HTML code (in the browser) to verify if this is the case? What is the id of the input control?
If this is the case, You need to generate Your js jQuery code
$('#SomethingElse').click(function() {
$('input[title=Sector1]').attr('checked','checked');
});
from codebehind so that SomeThingElse is replaced with the ClientID of the control.
.is(':checked') works on ASP.NET radiobuttons and checkboxes
$('#SomethingElse').click(function() {
$('input[title=Sector1]').is(':checked');
});
try using
$('input[title=Sector1]').attr('checked',true);
and
$('input[title=Sector1]').attr('checked',false);
or maybe
$('#SomethingElse').click(function () {
$('input[title=Sector1]').attr('checked',!$('input[title=Sector1]').attr('checked'));
});
As suggested by others, ASP.net will not generate the html with the same ID you specified.
Quick solutions:
You can keep using the id but asks jquery to check the end of the id instead, example:
$("input[id$='sector1Radio']").is(":checked");
Or check against the title and name as Nico suggested
Use the class element which is not effected by ASP.net, example
<input type="radio" runat="server" id="sector1Radio" class="sector1Radio" name="SectorGroup" title="Sector1" />
$("input.sector1Radio").is(":checked");
Best thing is to view the generated html code and see what id is giving you, then you can use the appropriate jquery selector, because the generated id could have different extensions depends whether you use master pages, etc.
If you are using a MasterPage or are creating the controls dynamically then it is probable that the control ID's are being renamed #SomethingElse becomes #MainContent_SomethingElse.
The easiest way to check this is to use the WebDeveloper plugin for Firefox or Chrome.
Go to Information -> Display Element Information and then select the object in question. It will give you it's ID, class, as well as ancestor and children information.
Check to see if the ID is being changed dynamically by the .NET.
If that's the case:
To prevent this, in the server side code you can use the following attribute to create static ID's
SomethingElse.ClientIDMode = ClientIDMode.Static;
You can then reference in you jQuery
$('#SomethingElse').click(function() {
if ($('input[title=Sector1]').attr('checked')) {
//execute event
});
I think what happens is that in ASP NET Checkboxes and Radio Buttons generates an "input" and a "span" after the input. So you need to select the input only.
You can try:
$('.classname input[type=checkbox]').each(function() {
this.checked = true;
});
Two things here: finding the control and executing the check. In ASP.NET, your control's actual ID and name will end up getting changed based on the runat="server" containers in which it appears, even if those containers have no Ids.
Rendered ASP.NET controls always end with the same name as you started with, so a tag like:
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
might end up being rendered as
<input type="radio" runat="server" id="ctl0$ctl0$sector1Radio" name="ctl0_ctl0_SectorGroup" title="Sector1" />
You can find this element, even after it is rendered if you use the "contains" selection syntax in JQuery. So to find this element, once rendered, you could use:
$("input[type='radio'][id*='$sector1Radio']")
This syntax will find any radio button whose id contains "$sector1Radio"
Once you have the element, you can check or uncheck it using the following code, which you'd call from the click event of your other element.
// check the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', true);
// uncheck the radio button
$("input[type='radio'][id*='$sector1Radio']").attr('checked', false);
One last thing... if you just want a block of text to click the button when pressed (wrap it in an tag and set the AssociatedControlId property to the control name of your radio button, like this...
<input type="radio" runat="server" id="sector1Radio" title="Sector1" />
<asp:label runat="server" id="lblsector1Radio" associatedControlID="sector1Radio">clicking here clicks and unclicks the radio button</asp:label>
I had the same problem. To use the jQuery UI to make your radiobuttons nice one has to write:
<div id="radio">
<input type="radio" id="radio1" runat="server" />
<label for="radio1">The label of the radio button</label>
...
</div>
<script type="text/javascript">
$('#radio').buttonset();
</script>
The id of the input tag must be correctly referenced by the label's for attribute. If the webpage is inside a master page then the id of the input tag will be modified to something like ctl00_Something_radio1, and suddenly the label's for attribute no longer references the input tag. Beware of this in ASP.NET!
As I understand it, the <input type=email> element in HTML5 will render as a simple text field in browsers that do not support the tag. On other browsers it will render properly, like on the iPhone it will bring up the e-mail keyboard layout.
I’d like to use this in a project but my input fields are <asp:TextBox> controls. How can I use the HTML5 element but still access its data server-side like the rest of my fields?
There is an update for .NET framework 4 which allows you to specify the type attribute
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a
TextBox control that is HTML5
compatible. For example, the following
code defines a TextBox control that is
HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />
you can try adding the attributes manually, like:
TextBox1.Attributes["type"] = "email";
TextBox1.Attributes["type"] = "url";
TextBox1.Attributes["type"] = "number";
Sorry I'm a bit late to the party, though I think that others can benefit from what I did. I have a page which is HTML 5 though we still have .NET 3.5. We wanted to keep the .NET element, though have the type change to email. I've tried several methods (including Milox above) to no avail, though the one which worked for me was the following: I added a JavaScript property to the element itself inline (when I put it in a script tag it wouldn't pick up for some reason...)
Here is what your tag would look like if you use my changes:
<asp:TextBox runat="server" type="email" onfocus="this.type='email'"/>
Eli
Whether or not it is accessible as a server control, you should be able to access the HttpRequest.Form collection and retrieve the value. No matter what the browser does with the tag, it has to submit a string to the server.
in your .aspx file add
<input type="text" required autofocus placeholder="Email Address"
class="txt-input txt-input-username" ID="myTextBox" runat="server"/>
in your Code Behind .cs
myTextBox.Attributes["type"] = "email";
This Worked For Me
You need to create your own custom control and override the Render routines. Feel free to use either the source code or DLLs
What Literal control is used for in asp.net? and What is the difference between them and Label control?
The major difference is that the Label Control adds the span tag to the text (property) you set, allowing to apply a style to it:
<span>My Label text</span>
The Literal Control allows you to render any kind of content. You can use it to render scripts, hmtl and any other type of document content. It doesn't change the string you provide in the Text property.
Note: the Label control allows you to render straight HTML too, but it puts all your text in span tags as mentioned. So, for rendering large HTML portions a Literal control is the way to go.
P.S.: In HTML there is a <label> tag. If you use the AssociatedControlId property of the Label control, it will render as HTML <label> (thanks to Ray for pointing that out.)
For example:
<asp:Label runat="server" id="FirstNameLabel" AssociatedControlId="FirstNameTextBox">
Input First Name:
</asp:Label>
<asp:Textbox runat="server" id="FirstNameTextBox" />
Will render as:
<label for="FirstNameTextbox" id="FirstNameLabel">Input first name:</label>
<input type="text" id="FirstNameTextbox" name="FirstNameTextBox" />
See also here on W3 Schools.
One thing also to note is if you are justing using it to display something and have no need for formatting the text use a Literal control. The ViewState is not as heavy with a Literal vs a Label control and when you have many of these on a page using ViewState it can really bloat your page size.
I always ask myself, do I need to apply a custom style or formatting? Yes, use a Label. No, use a Literal.
It is used to display text on the page, the text that is displayed can be set at runtime via server side code.
The label control also has the AssociatedControlId property that associates the label with another control. An example of where this is useful is with a textbox control. Once these are associated, screen readers are more able to give better results.
Another example is a radio button with a label allows you to click on the label and the radiobutton will select if the AssociatedControlId property is set.
MSDN on AssoicatedControlId
As splattne mentions, the label encloses its text in a span, whereas the literal is simply a placeholder. However, be careful in making assumptions about how ASP.Net controls are going to render. It can depend on the user agent that you are using. For instance, the panel control renders as a div in IE, but renders as a table with Firefox.
It will place LITERALLY whatever text you place in it on the page. You can use it to write html, JavaScript or just plain text.
We can use literal control in the title tag whereas label cannot be used in the title tag
Label can be used to set focus on other controls like Textbox.
Whereas Literal simply rander the static text on the web page