Angular Kendo Dropdownlist automatically adds blank option - javascript

I am using angular kendo and having a strange issue with kendo's dropdownlist control that the field bound with the first dropdown control on the form has by default ? undefined:undefined ? in it. Although the generated html has selected="selected" in first option. When I explicitly select a value in dropdown the model is updated properly.
The dropdown is filled with an array in root scope.
Also noticed that if I enable chrome's extension AngularJS Batarang then it works as well.
I did debugging of angular-kendo and found out that kendo is automatically adding blank option which has value of ? undefined:undefined ?.
<select class="s-select" kendo-drop-down-list k-data-source="lookupCache.getLookupValues('gender')" k-data-text-field="'DisplayName'" k-data-value-field="'Id'" k-value="'M'" ng-model="Model.Gender" />
where Model is {} by default

For dynamic data source you can use data-option-label, like follows:
<select name="packageName" id="packageName"
kendo-drop-down-list
k-options="dropDownListOptions"
k-ng-model="packageSelected"
ng-model="packageTypeId"
data-option-label="{value:'Select...',name:''}"/>

Its a strange issue in the Kendo UI.
My workaround :
Dont give the kendo-drop-down-list tag in the select list. Rather make it kendo by JS function.
HTML :
<select id="searchisActive" ng-model="ngsearchisActive" ng-change="applyFilter()">
<option value="-1">All</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
JS :
$(function () {
$("#searchisActive").kendoDropDownList();
});

Related

Rails with MaterializeCSS generates "input" in addition to "select", makes dynamic loading impossible

I'm using Rails 5.2.0 with Slim-lang and MaterializeCSS
I'm using javascript to dynamically populate a select dropdown, as shown here.
The code works in the sense that the select element gets populated properly. However, the combo list displayed on screen is not populated! When inspecting the html output in Chrome browser, I found that the "select" is actually comprised of:
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a">
<ul id="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a" class="dropdown-content select-dropdown" tabindex="0" style="">
</ul>
<select id="crit_type" name="crit_type" onchange="loadCritValues(this.value)" tabindex="-1"><option value="Select Criteria">Select Criteria</option>
<option value="age_group">age_group</option>
<option value="gender">gender</option>
<option value="current_country">current_country</option>
<option value="home_country">home_country</option>
<option value="first_language">first_language</option>
</select>
As you can see, the select options are properly populated. But it turns out that the "input" and "ul" elements dictate what gets displayed on screen. And the "ul" is naturally empty.
Is there any way to solve this issue, other than having to also modify the "ul" content?
It turns out that the issue I'm facing with select is linked to MaterializeCSS. The HTML it generates is structured in the format I mentioned as per:
https://materializecss.com/select.html
I can just override that behaviour by assigning 'browser-default' class to the select tag:
select id="crit_type" name="crit_type" onchange="loadCritValues()" class="browser-default" =options_for_select(#crit_types)
This will provide the select tag only without the additional html elements, and allows me to manipulate the select with javascript.

Default "placeholder" of Select-box in Angular?

I'm developing a web application (front-end size) using Angular 6.
I have a question: I'm creating a component that contains different select-box, like this:
How can I create a reset() method that changes all the select-box with the placeholder value (without canceling or modifying the options associated with him in any way)?
Is there any way that allows this by modifying the html template programmatically?
Thanks!
you can use ngModel
<select class="custom-select" [(ngModel)]="model.select" name="select" id="combo">
<option value=""></option>
<option *ngFor="let item of list" [ngValue]="item">{{ item}}</option>
</select>
component:
reset(){
model.selct='';
}

HTML select using ng-options with multiple "default" options

I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown
Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.

How do I 'select' multiple values in a multiple select using angular.js

I have the following code:
<select ng-model="myData.states" multiple="multiple" ng-options="option.value as option.name for option in myStates">
</select>
I populate these options in a controller using ajax.
In some cases, I want to load the page with some options 'selected'. How do I achieve this if I have the state name? i.e. (CA, TX). I do not have the value since angular increments the value on its own.

Select options not recognised after adding with Mustache

I have a select list in a page that is initially as follows:
<select id="select-company-type" name="company_type">
<option value="">Company Type</option>
</select>
The options are then repopulated via a Mustache template when another select is changed
<script id="companyTypeOptionsTpl" type="text/template">
<option value="">Company Type</option>
{{#companies}}
<option value="{{title}}">{{title}}</option>
{{/companies}}
</script>
This works fine and the new option items appear in the drop down.
However, if I then try and select one of the options programatically with something like:
$('#select-company-type').val(selectedOption);
where selectedOption contains a string that matches one of the options - it doesn't work.
Also, even if I select an option manually, its value is not passed via GET or POST when the form is submitted.
It's as though the new options are not being recognised although they are visible.
Am I missing a trick here?
Thanks

Categories

Resources