so when my form group get loaded my drop down looks like this
my ng select code is
<ng-select
placeholder="select By Device"
appendTo="ng-select"
[clearable]="true"
[searchable]="true"
formControlName="byDevice">
<ng-option [value]="1">Desktop</ng-option>
<ng-option [value]="2">Laptop</ng-option>
<ng-option [value]="3">Tablet</ng-option>
<ng-option [value]="4">Mobile</ng-option>
</ng-select>
I want clearable option true because its filter
and when i click on close icon (clearable icon) i see placeholder like this
basically it should look like this when it gets loaded instead of empty option
so how do i do this
please help !!
Ok so I resolved issue you just have to assign null value to form control name
this.myForm = new FormGroup({
'byDevice':new FormControl(null)
});
like this
Thanks !!
Related
Can someone help me to write a method, that lets me remove entire b-card after clicking the icon with #click ?
b-card
b-col.message.d-flex.justify-content-between.p-0(lg="12")
b-col.d-flex.align-items-center(lg="11")
b-icon.mr-2.msg(icon="exclamation-circle" variant="success")
p.font-weight-bold.m-0.mr-2 Message
p.mb-0.msginfo - Update your measurements.
b-col.d-flex.align-items-center(lg="1")
p.mb-0.msginfo.font-weight-bold 11:20
b-icon.ml-2(icon="x-circle" variant="danger" #click="removeNotification")
```
You could create a new variable like showCard initially set to true and in
removeNotification() { this.showCard = false }
and in your template b-card(v-show="showCard"). This will remove the card when showCard is false.
I have problem with selecting value from combobox in Cypress.
It allways writes me that:
CypressError: cy.select() can only be called on a <select>. Your subject is a: <span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="fabric_listbox">...</span>
Types text into numeric inputs
My code looks like this:
describe('KendoUI', () => {
it('types text into numeric inputs', () => {
cy.visit('https://demos.telerik.com/kendo-ui/combobox/index');
cy.get(':nth-child(4) > .k-dropdown-wrap > .k-select').select('Polyester')
})
})
Can you please give me some help?
You could try it on this page: https://demos.telerik.com/kendo-ui/combobox/index
Thank you.
I resolved it.
Make cy.click() on the element
Found with cy.contains() text what is in the box and then click on it (cy.contains('text').click)
cy.select() will only work for native HTML <select> elements. In your case you should simply cy.click() on the element you want to select. This is the way for all custom plugins which mimic select behaviour.
cy.get('kendo-popup').contains('Foobar').click({force:true})
You might need to force click as the element might not be visible
cy.get('combobox').contains('value').click()
I found that Cypress scrolling the viewport to the chosen option caused the dropdown to close. This command tells Cypress to wait for the dropdown to become non-disabled, scroll to the dropdown, click on the dropdown, wait for the dropdown to finish animating, then click on the item without further scrolling.
Tested with Kendo UI v2016.1.226
Declaration in commands.js:
Cypress.Commands.add('selectKendoDropdownItem', (dropdownName, item) => {
cy.get(`span[aria-disabled="false"][aria-owns="${dropdownName}_listbox"]`)
.click()
.get(`div#${dropdownName}-list li.k-item`)
.contains(item)
.click({ waitForAnimations: true, scrollBehavior: false, force: true });
});
Use in a spec:
cy.selectKendoDropdownItem('dropdownElementId', 'Text of option to select');
I have created a page with lightening components as shown the below image, I want to change my pick-List field into radio button next to picklist option to choose the appropriate selection, can someone please help to create radio buttons instead of pickList filed
in the component I have used below code
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputSelect label="Race Type"
aura:id="Type"
class="slds-select"
labelClass="slds-form-element__label"
value="{!v.newRace.Race_Type__c}" />
</div>
Maybe something in line with this: (replace v.Name with attribute that contains the name of the race):
<aura:component>
<lightning:radioGroup name="radioGroup"
label="slds-form-element__label"
options="{! v.newRace.Race_Type__c }"
value="{! v.Name}"
type="radio"/>
</aura:component>
I have a problem here which i am working quite a while but do not have any ideas left for a solution. I will try to make it short:
I use the eColumns extension for the admin and the view module in yii. I added a combobox to select views which are saved in the database so that users can build their own selection of select columns for each table, however:
In eColumns i added a button to delete an already created selection and an input field to give the selection a name
CHtml::button('', array('type' => 'submit','name' => 'btn_delete','value' => 'Ansicht löschen', 'onclick' => '$("#'.$this->getId().'").dialog("close");', 'style' => 'align: left', 'confirm'=>'Sind sie sicher das sie diese Ansicht löschen möchten?'));
CHtml::textField('input_name', substr($this->selectedView,strpos($this->selectedView,"##")+2), array('size'=>30,'maxlength'=>200));
If i click the button in the view-module everything works as expected. $_POST is filled with "input_name" and "btn_delete". However if i this same code included in the admin-module only input_name is filled - btn_delete is simply not set if i click the button.
Anybody can i give me any hint what i can check?
Thanks in advance! :)
If you are using jQuery serialize() to collect form elements in your admin-module, jQuery serialize() will not serialize any submit button value.
See also serialize example, hope this will help. :)
=== links to jsfiddle must be accompanied by code.. ===
html
<form>
<input type="text" name="text" value="text-value">
<input type="submit" name="submit-btn" value="button-value">
</form>
<span name="result-serialize"></span>
jQuery
var serializeString = $("form").serialize();
$("span[name=result-serialize]").text(serializeString);
I want to show a popup dialog containing a dijit.ComboBox with data populated using ajax request or data store.
The problem I am facing is that the combobox is always disabled.
My selected code is:
<div dojoType="dojo.data.ItemFileReadStore" id="osTypeStore" data-dojo-id="osTypeStore" url="/AjaxPopulateOS.json">
</div>
<select id="osType" data-dojo-type="dijit.form.ComboBox"
data-dojo-props="
id:'osType',
store: osTypeStore,
placeHolder: 'Select a schdule type'" >
</select>
Any ideas
I believe it is because there are no items in it? Is it grayed out totally - and have the Disabled class parameter set?
Check that dijit.byId('osTypeStore') returns a store and that it has items in it.
If this is the case, change your code to
store: 'osTypeStore'
Note the quotes. This forces parser to evaluate the string into a dijit - and the store might not have been initialized correctly as a true variable at the point it is read. In other words, in combobox constructor - the javascript variable is undefined.
If this does not help, try forcing to set store after onShow has run for your dialog.
dialog.onShow = function() {
dijit.byId('osType').set('store', dijit.byId('osTypeStore'));
}
Try forcing it to enabled using the property of the combo
enabled: true,
Other than that, check it using Firebug or debug bar or something similar :)