Questions on Kendo UI for jQuery Forum

4 answers

321 views

Masked TextBox inside listview | regular expression not working

Hi friends

I am new to Kendo controls. I have a specific situation in which the regular expression for phone number is not working.
I am using Masking for Phone number textbox. I have this kind of text box for phone number in multiple pages but somehow its not working in listview(edit).
Please have a look at the below code and if i have missed anything, please let me know. I have used the code of existing Kendo Listview MVVM sample and made changes for Product Name. when 'edit' is clicked it will change the product name to masked text box. I have given regular expression for Phone number masked text box to accommodate 10 digits phone number, but somehow its not working here. Please see this part of the code.
<dd>
<input title="Phone Number"
name="PhoneNumber"
type="text"
class="k-textbox k-invalid"
required=""
data-bind="value: PhoneNumber"
data-mask="(000) 000-0000"
data-role="maskedtextbox"
data-value-update="keyup"
placeholder="Phone Number"
pattern="^$([0-9]{3})$ {1}([0-9]{3})-{1}([0-9]{4})$" />
</dd>

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/listview/mvvm">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">

<script src="../content/shared/js/console.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-header">

<div class="box-col" style="width: 420px;">

<h4>Update a record</h4>

<div data-role="listview"

data-edit-template="edit-template"

data-template="template"

data-bind="source: products,

visible: isVisible,

events: {

save: onSave

}"

style="width: 420px; height: 200px; overflow: auto"></div>

</div>

<div class="box-col console-section">

<h4>Console</h4>

<div class="console"></div>

</div>

<script type="text/x-kendo-tmpl" id="template">

<div class="product-view k-widget">

<div class="edit-buttons">

<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>

<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>

</div>

<dl>

<dt>Product Name</dt>

<dd>#:ProductName#</dd>

<dt>Unit Price</dt>

<dd>#:kendo.toString(UnitPrice, "c")#</dd>

<dt>Units In Stock</dt>

<dd>#:UnitsInStock#</dd>

<dt>Discontinued</dt>

<dd>#:Discontinued#</dd>

</dl>

</div>

</script>

<script type="text/x-kendo-tmpl" id="edit-template">

<div class="product-view k-widget">

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

</div>

<dl>

<dt>Product Name</dt>

<dd>

<input title="Phone Number"

name="PhoneNumber"

type="text"

class="k-textbox k-invalid"

required=""

data-bind="value: PhoneNumber"

data-mask="(000) 000-0000"

data-role="maskedtextbox"

data-value-update="keyup"

placeholder="Phone Number"

pattern="^$([0-9]{3})$ {1}([0-9]{3})-{1}([0-9]{4})$" />

</dd>

<dt>Unit Price</dt>

<dd>

<input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" />

<span data-for="UnitPrice" class="k-invalid-msg"></span>

</dd>

<dt>Units In Stock</dt>

<dd>

<input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" />

<span data-for="UnitsInStock" class="k-invalid-msg"></span>

</dd>

<dt>Discontinued</dt>

<dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd>

</dl>

</div>

</script>

<div class="box">

<div class="box-col" style="width: 420px;">

<h4>Configuration</h4>

<div>

<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>

</div>

<div class="box-col">

<h4>Information</h4>

Kendo UI ListView supports the

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.

</div>

<script>

var viewModel = kendo.observable({

isVisible: true,

onSave: function(e) {

kendoConsole.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")");

},

products: new kendo.data.DataSource({

schema: {

model: {

id: "ProductID"

}

},

batch: true,

transport: {

read: {

url: "http://demos.telerik.com/kendo-ui/service/products",

dataType: "jsonp"

},

update: {

url: "http://demos.telerik.com/kendo-ui/service/products/update",

dataType: "jsonp"

},

destroy: {

url: "http://demos.telerik.com/kendo-ui/service/products/create",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

})

});

kendo.bind($("#example"), viewModel);

</script>

<style scoped>

.product-view

{

float: left;

position: relative;

width: 400px;

margin: -1px -1px 0 0;

}

.product-view dl

{

margin: 10px 0;

padding: 0;

min-width: 0;

}

.product-view dt, dd

{

float: left;

margin: 0;

padding: 3px;

height: 32px;

width: 180px;

line-height: 32px;

overflow: hidden;

}

.product-view dt

{

clear: left;

padding: 3px 5px 3px 0;

text-align: right;

opacity: 0.6;

width: 100px;

}

.product-view .k-textbox {

width: auto;

}

.edit-buttons

{

position: absolute;

top: 0;

right: 0;

width: 26px;

height: 160px;

padding: 2px 2px 0 3px;

background-color: rgba(0,0,0,0.1);

}

.edit-buttons .k-button

{

width: 26px;

margin-bottom: 1px;

}

.k-pager-wrap

{

border-top: 0;

}

span.k-invalid-msg

{

position: absolute;

margin-left: 6px;

}

</style>

</div>

</body>

</html>

I will really appreciate some help on this.

Regards
Varun

MaskedTextBox

answered on 30 Dec 2014

3 answers

101 views

FIXED 0's inside mask

I'd like to have a kind of mask '___.___.___/0001-__', there is some escape caracter to consider 0 as fixed and not numeric.

Thanks

MaskedTextBox

answered on 17 Sep 2014

1 answer

72 views

Set only digits in the data-mask attribute — widget doesn't work.

Hello!
If set only digits in the data-mask attribute (for example data-mask="00000"), widget doesnt work. You can check it by link — http://dojo.telerik.com/uFEb/2
How it can be fixed? Thank you!

Best regards,
Kirill.

MaskedTextBox

answered on 01 Sep 2014

1 answer

268 views

Masked textbox formatting for a readonly grid column

Hi,

There is already a post explaining how to use the new masked textbox control for inline editing, however our needs are a little bit different.

Is there a way to use the masked textbox for formatting a phone number in a readonly grid? Kendo custom formats don't support phone formatting.

For the example below, (which also supports reordering the grid rows), we'd like to have the same appearance as in the attached image.
http://jsbin.com/teqidida/7/edit

Please note one constrain, I'd like to avoid using a Template function for defining the format, as suggested in http://www.telerik.com/forums/kendo-tostring-not-working-as-expected

Thanks, I'll appreciate if you can point me to the right direction.

-Felipe.

MaskedTextBox

answered on 25 Aug 2014

2 answers

210 views

Empty value and moving dash

Hi,

I have two issues with the masked textbox:

1) I want to set the value to empty/null/"" when the page is shown. But the masked textbox does not accept that. If I enter any string, the value is set correctly, but I was not able to set an empty value.

2) The format I use is "AAA-AAA". When I enter characters, the "-" in the middle is moving aroung depending on the width of the characters being used. Is there a way to use a fixed width for each character here?

Thanks in advance, best regards,
Volker

MaskedTextBox

answered on 01 Aug 2014

2 answers

111 views

MVVM bind property for changing the mask

Is there any way to bind my ViewModel and change the mask according to my ViewModel Property?

MaskedTextBox

answered on 18 Jul 2014

4 answers

1.2K+ views

Masked Input for inline grid editing

I am looking for some guidance for this application of the Masked Input Box. Simply stated I want to use it in conjunction with the Kendo grid. The research I have done reveals that row templates are not supported for grids with inline editing, and that eliminates one possible straightforward approach. I would be interested if anyone has made this scenario work.

Cheers

MaskedTextBox

answered on 14 Jul 2014

3 answers

437 views

Zip Code patterns Masking

Hi,

I am looking for array of Zip code masking like ['99999-9999', '99999'] to allow either 5 or 9 digits.

Something similar to
http://jsfiddle.net/8WvHE/

Thanks,
Chatrapathi chennam

MaskedTextBox

answered on 19 Jun 2014

1 answer

2.4K+ views

Any way to right-align value in field for input?

Hi there,

I'm using a masked text box as an incell editor for a grid. I want to right-align the value in the editor field. Please see the attached PNG file for how it looks currently. I tried adding a class to the input field that right-aligned the value, but this right aligned the value+spaces to the right. I'd like the last digit in the value to be over to the right edge of the input.

Pertinent code is:

columns: [

{

field: "accounting_category",

title: "CATEGORY"

},

{

field: "gl_code",

title: "GL CODE",

editor: glCodeMaskedTextEditor

}

]

and

function glCodeMaskedTextEditor(container, options) {

$(

'<input class="gl-code-edit" data-text-field="gl_code" 

               data-value-field="gl_code_id" data-bind="value:'

+ options.field + '"/>')

.appendTo(container)

.kendoMaskedTextBox({

mask: "99999999999999999999",

promptChar: " "

});

}

Any way to do this? Thanks! :)

MaskedTextBox

answered on 12 Jun 2014

1 answer

233 views

MaskedTextBox caret not properly set with fixed text

I have a MaskedTextBox with a prefix. I want the caret to be placed on the part after the prefix.

E.g. OH00________
^
\ -- Caret Here

But the caret actually appears here:

E.g. OH00________
^
\ -- Caret Here

How can I make the MaskedTextBox behave this way?

<li><label>State ID: <input class="k-textbox" name="state-id" maxlength="50" type="text" data-bind="value: stateId" pattern="OH00[0-9]{8}" validationMessage="Please enter a state ID in the form of OH0012345678"/></label> <span class="k-invalid-msg" data-for="state-id"></span></li>

$("input[name='state-id']").kendoMaskedTextBox({

mask: "OH0099999999"

});

MaskedTextBox