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>
I will really appreciate some help on this.
Regards
Varun
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
>
</
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
>
<
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
>
</
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: {
dataType: "jsonp"
},
update: {
dataType: "jsonp"
},
destroy: {
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