I am trying to change the default promptChar for a Kendo MaskedTextBox. I tried with code:
<div class="box-col" style="width: 300px">
<h4>Enter a number</h4>
<input data-role="maskedtextbox"
data-mask="(999) 000-0000"
data-promptChar="#"
data-bind="visible: isVisible,
enabled: isEnabled,
value: phoneNumber,
events: { change: onChange }"
style="width: 200px">
</div>
However, the textbox still has '_' as the prompt character. Any idea why this is happening? How do I fix this?
Thanks in advance.
Change data-promptChar="#" to data-prompt-char="#"
See working sample http://jsbin.com/xivede/1/edit?html,js,output
Related
i've been struggling with this a couple of hours, but i don't find any way to make it work.
the thing is that the dropdownlist doesn't work if you put it inside a window. here you have an example.
https://plnkr.co/edit/eBpc4kEcHr7uSq6Zdq6h?p=preview
<kendo-window :width="'300px'" :title="'Window title'" :visible="visible" style="display:none">
<kendo-datasource ref="datasource" :type="'odata'" :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
</kendo-datasource>
<kendo-dropdownlist :data-source-ref="'datasource'" :data-text-field="'ProductName'" :data-value-field="'ProductID'" :placeholder="'Select product'">
</kendo-dropdownlist>
https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
is there a workaround for this?
regards.
I can't see anything wrong with what you are trying, but it works with an internal slot datasource:
<kendo-window
:width="'300px'"
:title="'Window title'"
:visible="visible"
style="display:none">
<kendo-dropdownlist
:data-text-field="'ProductName'"
:data-value-field="'ProductID'"
:option-label="'Select product'">
<kendo-datasource
slot="kendo-datasource"
:type="'odata'"
:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
</kendo-datasource>
</kendo-dropdownlist>
</kendo-window>
It looks like a bug - I have logged it here. You can use temporary use the internal slot (as suggested by rareclass) as here
<kendo-window :width="'300px'"
:title="'Window title'"
:visible="visible"
style="display:none">
<h4>Window content</h4>
<kendo-dropdownlist style="width: 100%" :data-text-field="'ContactName'" >
<kendo-datasource slot="kendo-datasource"
:type="'odata'"
:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
:group-field="'Country'">
</kendo-datasource>
</kendo-dropdownlist>
</kendo-window>
I have a simple material style textarea that I prepopulate with data. However, the textarea will show the placeholder superscript as if there is text the text doesnt show until you start to type. Example:
<md-form-field>
<textarea
formControlName="description"
mdInput
mdTextareaAutosize
minRows="5"
maxRows="10"
placeholder="Write a comment...">
</textarea>
</md-form-field>
My textareas before you start to type:
My textareas after you type:
I tried to replicate this in a plunker but I couldnt. What could cause this issue?
I had the same problem. Material textarea is not pupulated. The solution for me was to not use the mdTextareaAutosize directive. Intsead I used the basic html one. So my code is the following:
<md-input-container style="width: 100%">
<textarea
rows="4"
cols="50"
mdInput
placeholder="Comment"
[formControl]="contentControl"
[(ngModel)]="commentDTO.content">
</textarea>
</md-input-container>
Like this the text area is pre populated and works as expected. Hope it helps!
Can anyone help me with kendo ui masked textbox.
How can I give a multi line option to a kendo ui masked textbox.
How about this using a text area ?
<textarea data-role="maskedtextbox"
data-mask="(999) 000-0000-00000-aaa (234580)"
rows="4"
data-bind="visible: isVisible,
enabled: isEnabled,
value: phoneNumber,
events: { change: onChange }"
style="width: 200px"></textarea>
Please take a look at this kendo dojo
I have the following code and would like to hide the label:
<div>
<input type="checkbox" data-filter-value="17_72" class="attrib filterselector unav_option" name="filter[17]" id="filter_17_72" value="72" disabled="">
<label class="optionvalue" for="filter_17_72"> Some Text</label> </div>
There are several of these in my code and I'd like to have all the labels hidden where their input has the state disabled=""
Any help would be fantastic.
You can use jQuery to achieve this. So it can be something like this
$(function () {
if ($('input[type=checkbox]').prop('disabled')) {
var hide = $('label').hide();
}
});
Jsfiddle
I didn't get managed via JS so I tried via CSS and it works:
#filterForm input.unav_option + label {display:none !important;}
What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?
I don't get the expected results when using the following:
HTML
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items"
data-template="itemsTemplate">
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<li>
#=Name#
</li>
</script>
<input type="text" data-bind="value: newValue" />
<button data-role="button" data-bind="click: update">update</button>
</div>
JavaScript
var vm = kendo.observable({
items: [{
Name: "Item1"}],
newValue: '',
update: function(e) {
var item = this.get("items")[0];
item.set("Name", this.get("newValue"));
//adding the follwoing line makes it work as expected
kendo.bind($('#itemsView'), vm);
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});
I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.
Here is the jsfiddle:
http://jsfiddle.net/5aCYp/2/
Not sure if I understand your question properly: but this is how I did something similar with Kendo Web UI, I expect mobile is not so different from Web UI from API perspective.
$element.kendoListView({
dataSource: list,
template: idt,
editTemplate: iet,
autoBind: true
});
The way I bind the listview is different, but I guess you can get similar results with your method as well.
I pass two templates to the list view, one for displaying and one for editing.
Display template contains a button (or any element) with css class k-edit to which kendo will automatically bind the listview edit action.
display template:
<div class="item">
# if (city) { #
#: city #<br />
# } #
# if (postCode) { #
#: postCode #<br />
# } #
<div class="btn">
<span class="k-icon k-edit"></span>Edit
<span class="k-icon k-delete"></span>Delete
</div>
</div>
Edit template
<div class="item editable">
<div>City</div>
<div>
<input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" />
<span data-for="city" class="k-invalid-msg"></span>
</div>
<div>Post Code</div>
<div>
<input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" />
<span data-for="postCode" class="k-invalid-msg"></span>
</div>
<div class="btn">
<span class="k-icon k-update"></span>Save
<span class="k-icon k-cancel"></span>Cancel
</div>
</div>
Clicking that element will put the current element on edit mode using the editTemplate.
Then on the editTemplate there is another button with k-update class, again to which kendo will automatically bind and call the save method on the data source.
Hopefully this will give you more ideas on how to solve your issue.
The problem was caused by the <li> in the template. The widget already supplies the <li> so the additional <li> messes up the rendering. This question was answered by Petyo in the kendo ui forums