In Angular JS Kendo Drop down not setting the model value - kendo-ui

HI I have following Kendo Dropdown, even though I have a value in ng-model, the dropdown is not selecting the default values.
<select name="myDropDown"
id="myDropDown"
class="width-90"
kendo-drop-down-list k-data-text-field="'key'"
k-data-value-field="'value'"
k-data-source="myDataSource"
ng-model="model.selectedProperty"></select>
model.selectedProperty does have the value . However the UI does't select the options.
DataSource Values:
[{"key":"Critical","value":0},{"key":"High","value":1},{"key":"Medium","value":2},{"key":"Low","value":3}]
model.selectedProperty = 1
The above one should have selected the second option, but the dropdown selects none

Well I have to make the selected value same object as in the list:
$scope.model.selectedProperty = {"key":"Critical","value":0}
And I updated the select tag to,
<select name="myDropDown"
id="myDropDown"
class="width-90"
ng-model="model.selectedProperty"
ng-options="option.key for option in myDataSource track by option.value">
</select>

Related

How to set default selected option in very big select tag with many options in Laravel?

I have 3 select tags with a lot of options inside them. One for year, one for month and one for day.
The question is ... How to set selected on the option I want.
I was thinking of this solutions:
Pass the options as array to the view. After that forech them in the select tag and with "#if" check every single one if its the right one and set "selected:selected".
But in my case this isnt good solution because I have many options ... that means the array will be very very big.
Put if statement in every option in the html and check if its te right one and set "selected:selected" to that option. This is also a bad solution ... there will be like 200+ if statements.
Maybe create 3 db tables with this options inside. Getting them in the controller method, foreaching them in the select tag and checking them with if statement and setting "selected" to the right one.
I really dont know if Im thinking in the right way. I will apriciate some help.
what you r doing is right here is a solution that it did worked for me, i have a user city, and when i want the user to update the city i show it as selected
just pass the arrays to the view then :
#foreach ($citys as $city)
#if (Auth::user()->city_id == $city->id)
<option value="{{$city->id}}" selected="selected">{{$city->name}}</option>
#else
<option value="{{$city->id}}">{{$city->name}}</option>
#endif
#endforeach
here is a short version u can use
#foreach ($citys as $city)
<option value="{{$city->id}}" #if (Auth::user()->city_id == $city->id) selected="selected" #endif > {{$city->name}}</option>
#endforeach

Doesn't select the Right option in dropdown

Protractor select the wrong option in dropdown.
I have to:
select the first dropdown to open another dropdown (in my situation: select Payment Method (1st dropdown) to open the 2nd dropdown - available credit cards):
The IMPORTANT moment: if the 1st dropdown has a default value - the 2nd dropdown CAN NOT be visible.
My piece of code had different variation:
let paymentDropdown = element(by.name("payment-method"));
let dynamicBlock = $$(".dynamic").first();
let useThisCardButton = element(by.name("do-add-payment-method»));
let paymentConfigBlock = element(by.id("payment-config-container"));
browser.wait(EC.visibilityOf(paymentDropdown), 5000);
$("#payment-method-0 > option:nth-child(2)").click();
browser.wait(EC.visibilityOf(dynamicBlock), 5000);
useThisCardButton.click();
browser.wait(EC.visibilityOf(paymentConfigBlock), 5000);
So, I’ve tried for the first dropdown:
1. $("#payment-method-0 > option:nth-child(2)").click();
2. element(by.name("payment-method"))
.all(by.tagName('option'))
.get(1)
.click();
3. element(by.cssContainingText('option', 'Credit Card')).click();
4. element(by.name("payment-method")).$('[value="cc"]').click();
Html is:
<select name="payment-method" id="payment-method-0" style="display: inline-block;">
<option value="0">Select Payment Method</option>
<option value="cc">Credit Card</option>
</select>
And Nothing! I don’t know how does it work, but the 1st dropdown has Default Value, and the 2nd dropdown is VISIBLE! Then I click on «Use this method» button and got Fail!
1 test from 10 tests choose the right 1st value, so test passed. But other 9 trials are failed. Why? How to do it correct and how to be sure that it will select the right option?
Try the below one. Here you can select the values without opening the drop down.
var firstDrop = element(by.css('#payment-method-0'));
browser.wait(EC.elementToBeClickable(firstDrop), 5000);
firstDrop.sendKeys('Credit Card');
browser.wait(EC.visibilityOf(dynamicBlock), 5000);
Hope it helps you

Select From List selects item but does not commit change

Using Robot Framework, I have a dropdown with multiple options. When I use the select from list option I can see the selection become highlighted, but when the dropdown closes, the value is not changed.
Here is a sample of my code:
click element id=month
select from list xpath=//select/#name="month" September
click button css=button.submit
I have tried variants of this with the select from list by label and select from list by value, and they fail with error stating the selected list or value does not exist.
Select from list by value example:
click element id=month
select from list by value xpath=//select/#name="month" September
click button css=button.submit
Select from list by label example 1:
click element id=month
select from list by label xpath=//select/#name="month" September
click button css=button.submit
Select from list by label example 2:
click element id=month
select from list by label xpath=//select/#name="month" label=September
click button css=button.submit
Anyone experienced this before where an item gets "selected" but the value does not get changed?
Use following keyword.
Pass locator as 1st argument and value as another argument
Select from list by label and validate
[Arguments] ${locator} ${select value}
Focus ${locator}
# Select from list by label
Select From List By Label ${locator} ${select value}
# Get selected value and validate it against passed value as argument
${value} = Get Selected List Label ${locator}
Should be equal ${select value} ${value}

Select a value from a select List by value element

recently I came upon an issue while using page object that I could not find an answer to.
When using a select list to choose an option. I need to select by partial text or by attribute. here is an example:
<select id="custcol95" name="custcol95">
<option selected="" value="">- Select -</option>
<option value="5">Monthly Basic Plan - $27.99</option>
<option value="1">Monthly Business Plan - $54.99</option>
</select>
I tried:
select_list(:planPurchase, :id => 'custcol95')
I can do this:
selectCloudPlan_element.option(:value, CLOUD_PLANS['PersonalMonthly']).select
but that is deprecated.
I have yet to see a select by value option or by index anywhere on the web. Does one exist?
Also if there was a search by partial text that would fix my issue.
Thanks in advance.
The page object gem already supports selecting by partial text:
page.planPurchase = /Basic/
puts page.planPurchase
#=> "Monthly Basic Plan - $27.99"
Selecting by value is also supported by using select_value:
page.planPurchase_element.select_value('5')
puts page.planPurchase
#=> "Monthly Basic Plan - $27.99"
The page object gem supports selecting options by index using []. Note that you have to use .click as there is no .select. The index is 0-based.
page.planPurchase_element[2].click
puts page.planPurchase
#=> "Monthly Business Plan - $54.99"

Clear jqgrid toolbar when custom defaultvalue is set

I want to clear the toolbar of my grid, but not to the default value of the column. I want to empty all fields.
When I use the
$("#Jqgrid")[0].clearToolbar();
method the toolbar gets the initial default values..
You can choose one from the following two ways.
1) You can temporary change the defaultValue of the searchoptions to "" before call of clearToolbar. You can use setColProp method for example to change column properties (see en example here).
2) Set the value of the the toolbar element manually to "" or to any other value which you want. There are simple way how the ids of the input or select elements of the toolbar are constructed. Let us you have column with the name 'col1' (the corresponding column of colModel has name: 'col1'). Then the id of the element in the filter toolbar will be gs_col1. So you can use
$("#gs_col1").val("");
to clear the field. In more general case if the colname is the variable which hold the value from colModel[i].name you can use
$("#gs_" + $.jgrid.jqID(colname)).val("");

Resources