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>
Related
Working on an ASP.NET Core 6 MVC app. I am created a dropdown using the select asp-for tag helper. But I am not seeing a dropdown down arrow. Also I want to set the top or particular value selected by default.
Below is code and image of a dropdown
<div class="col-sm-3">
<select name="products" class="form-control "
asp-items="#(new SelectList(ViewBag.ddaircraft,"id","name"))">
</select>
</div>
Action Method code for ViewBag:
Public IActionResult Index()
{
var countries= _countries.getCountries();
//add an country item on the top of list.
countries.Insert(0, new Aircraft { Registration="0"});
//i used the country.name for value and item
var ddforAircraft = from country in countries
select new { id = country.name, name=country.name=="0"?"Item List":country.name };
// ddforAircraft.Append(new { id = "0", name = "" });
ViewBag.ddaircraft = ddforAircraft;
return View()
}
I found the answer, after Tiny Wang pointed me to the direction which really helped me to search the answer.
In order to see the dropdown down arrow I added a css class "form-select" without removing anything and I started to see the down arrow
<div class="col-sm-3">
<select name="products" class="form-control form-select-sm form-select " asp-items="#(new SelectList(ViewBag.ddaircraft,"id","name"))">
</select>
</div>
Missing dropdown arrow resulted from the class form-control, I test in my side and I found the arrow can be seen by default until I add class="form-control " to my code:
removing this 2 options then the arrow appeared again, so it proved to relate to the class, you may need to update the style:
Then I use Jquery to change the default selected option when page is loading in my code, my selector has Id Country, then change the value(ListItem.Value):
<select asp-for="Country" asp-items="#(new SelectList(Model.Countries, nameof(ListItem.Value), nameof(ListItem.Text)))">
<option>Please select one</option>
</select>
#section Scripts{
<script>
$("#Country").val('Canada')
</script>
}
I am trying to get the selected value of the dropdown on change event to be sent on reactive form submission. I have a very similar scenario working for radio based on the answer from how to get selected value of radio in reactive form
Here's the code for dropdown
<div class="row" *ngIf="question.controls.type.value === 'dropdown'">
<div class="col-md-12">
<div class="form-group__text select">
<label for="type">{{ question.controls.label.value }}</label>
<br><br>
<select name="value" formArrayName="component" (change)="updateSelection(question.controls.component.controls, $event.target)">
<option
*ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"
[ngValue]="answer?.value?.value">
{{answer?.value?.value}}
</option>
</select>
</div>
</div>
</div>
I am not able to pass the answer as formcontrol to updateSelection on change of a selected option from the dropdown. Any help is greatly appreciated.
https://stackblitz.com/edit/angular-acdcac
Very similarily like previous question, we iterate the form controls in your array, initially set all as false, and then turn the chosen choice as true. So template let's pass $event.target.value:
<select name="value" formArrayName="component"
(change)="updateSelection(question.controls.component.controls, $event.target.value)">
<option *ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"
[ngValue]="answer?.value?.value">
{{answer?.value?.value}}
</option>
</select>
And in the component we as mentioned iterate the form controls and set all as false. The value for $event.target.value will be the string value, for example Choice 1. We then search for the form control that has that value and then set the boolean for that particular formgroup:
updateSelection(formArr, answer) {
formArr.forEach(x => {
x.controls.selectedValue.setValue(false)
})
let ctrl = formArr.find(x => x.value.value === answer)
ctrl.controls.selectedValue.setValue(true)
}
Your forked StackBlitz
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 a select list. I am using jQuery to update the selected item. The displayed item in the box isn't updating when I change the selected value. In the following example option "a" is set as selected. Then I use jQuery to change the selected item to "d". It still shows "a". However if you expand the list you can see that "d" is selected or highlighted. Not sure how to fix the issue. Any help would be appreciated!
http://jsfiddle.net/9wQcs/5/
Html:
<select id="t">
<option>select one</option>
<option id="a" selected="selected">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
jQuery:
$(document).ready(function () {
$('#d').prop('selected', 'selected');
});
Thanks,
Brian
First of all, refrain from using .ready() in jQuery Mobile.
When selecting an option programmatically, you need to re-ehance selectmenu widget.
$("#id").prop("selected", true);
$("select_id").selectmenu("refresh");
Demo
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);
});
});