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
Related
I want to limit kendo multiselect to 2 items selection. I see maxSelectedItems option can help me but not sure where to add this in the tag below. Any help would be appreciated.
<select class="k-widget multiselect" data-role="multiselect" id="CompSelect"
data-placeholder=""
data-value-primitive="true"
data-text-field="CompNameId"
data-value-field="CompId"
data-bind="value: SelectedComps,
source: CompaniesList,
events: {
change: onChange,
}">
</select>
You can set that easily like this:
$("#CompSelect").data("kendoMultiSelect").options.maxSelectedItems = 2;
The above code can be placed in a function for the dataBound event. That way, as soon as the data is bound to the MultiSelect it will set the maxSelectedItems.
Also, check this link.
<select id="multiselect" multiple="multiple">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option>Item4</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
maxSelectedItems: 3 //only three or less items could be selected
});
</script>
I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
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
The existing solution for dropdownlist:
<input id="countryid" name="countryid"
data-role="dropdownlist"
data-text-field="text"
data-value-field="value"
data-bind="value: countryid"
data-source="CountryidNameList"
data-auto-bind="true"
data-bound="updateModel"
data-value-primitive="true"/>
function updateModel(e) {
var widget = e.sender;
setTimeout(function() {
widget.trigger("change");
});
};
when we migrate to new version of Kendo UI 2015 (commercial version), the above solution does not work any more:
for form, the dropdownlist does not set the first value of the dropdownlist any more;
for kendo-grid (change the input, but still use the updateModel function), in edit mode: the dropdownlist is showing a loading icon (there is no error and the value is loaded in the dropdownlist while click)
anyone can help?
Well you can modify your kendo element a bit as:
<input id="countryid"
name="countryid"
data-text-field="text"
data-value-field="value"
data-option-label="Select Country..."
data-bind="source: CountryidNameList,value:countryid" data-role="dropdownlist"
></input>
and do the source binding from javascript. Have done a JSBin for your issue here. Hope you find it useful!
I have two kendo date picker in input boxes and one checkbox I want to show the kendo datepickers all the time with current date . but they become enable /selectable /editable ONLY when user has checked the checkbox.
Checkbox
<input type="checkbox" id="RequredFilter" />
2 kendo Datepickers.
<input type="text" id="DateFrom" />
<input type="text" id="DateTo" />
I have tried various things like disabling text-boxes etc but datepickers just keep working/showing..
There is special method for enabling/disabling the DatePicker called enable - check this demo.
$('#RequredFilter').click(function(e){
if($(this).is(':checked')){
$('#DateFrom').data('kendoDatePicker').enable(true);
$('#DateTo').data('kendoDatePicker').enable(true);
}
else{
$('#DateFrom').data('kendoDatePicker').enable(false);
$('#DateTo').data('kendoDatePicker').enable(false);
}
})
Here's a slightly different approach:
$(document).ready(function() {
$("#RequredFilter").change(function() {
$('#DateFrom').data('kendoDatePicker').enable(this.checked);
$('#DateTo').data('kendoDatePicker').enable(this.checked);
});
});