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!
Related
I'm having trouble adding a formatter to a checkbox in my grid. I'm currently using one of the latest versions of free-jqgrid.
My column is defined as such:
name: 'tested', width: 95, template: "booleanCheckboxFa", editable: true, formatter: function (cellValue, option) {
return '<input type="checkbox" name="checkbox" id="txt_' + option.rowId + '" onclick="alert(\'hi\')" />';
}
},
I just have an alert on the onclick event just to prove I got that far, ultimately this function will control the state of other checkboxes in the same row.
the rendered html i get back is:
<input type="checkbox" value="<input type="checkbox" name="checkbox" id="txt_jqg2" onclick="alert('hi')">" id="jqg2_tested" name="tested" role="checkbox" aria-checked="false" class="editable">
it seems to be adding the rendered html and adding it into the chekbox html, instead of just replacing it. No errors appear in my developer tools console.
I also tried
$("input[type=checkbox]").click(function() {
with an alert in that function, but it never fires.
If there's a BETTER way to bind a function to the click event of a checkbox, I'm all for it. Any help is greatly appreciated!
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>
im using dropdownlists in my kendogrid popup forms. im using them in template like
<label for="primaryClient" style="text-align:left">Primary Account*</label>
<div class="k-edit-field"><input name="primaryClient" data-bind="value:primaryClient" data-value-field="value" data-text-field="text" data-source="dsDocClientGroup" data-role="dropdownlist" required validationMessage="Required" /></div>
However when i check whats actually being posted. its posting an array:
primaryClient['label'],
primaryClient['value']
any ideas while this would be happening
How do i data-bind the MVVM value to my dropdownlist? The input element below works well
<input class="k-textbox" placeholder="hotel business registration" required data-bind="value: dataItem.HotelStatusId"/>
I doesn't when i try to use KendoUI dropdownlist instead
#Html.Kendo().DropDownList().BindTo(new SelectList(ViewBag.HotelStatuses, "Id", "Name")).Value("#=dataItem.HotelStatusId#").Name("ddl-hotel-status");
this does not work either
#Html.Kendo().DropDownList().BindTo(new SelectList(ViewBag.HotelStatuses, "Id", "Name")).Value("dataItem.HotelStatusId").Name("ddl-hotel-status");
Found the solution, here's the working code.
#Html.Kendo().DropDownList().BindTo(new SelectList(ViewBag.HotelStatuses, "Id", "Name")).Name("ddl-hotel-status").HtmlAttributes(new Dictionary<string, object>{{"data-bind", "value: dataItem.HotelStatusId"}})
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);
});
});