Develop Reference

Composing HTML code (called through Razor) inside Knockout foreach loop

my situation is the current one:
<fieldset name="sortSearch">
#Html.CreateSortingControl("views.restricted.widgets.alertdetailwidget.sorting", "searchCriteria.Sorting", "changeSortingDirection", "changeSortingField", GetValueList(SortingValueProvider.ValueProviderId))
</fieldset>
In practice I am calling some CS code that will create some a markup with a dropdown and some bindings. For example when a value is selected in this dropdown the function changeSortingField will be called. Everything works properly.
What goes wrong is that I want to encapsulate this markup in a Knockout foreach loop that depends on an observable. Sort of this:
<!-- ko foreach: {data: FieldSortings, as: 'sortings' }-->
<fieldset name="sortSearch">
#Html.CreateSortingControl("views.restricted.widgets.alertdetailwidget.sorting", "searchCriteria.Sorting", "changeSortingDirection", "changeSortingField", GetValueList(SortingValueProvider.ValueProviderId))
</fieldset>
<!-- /ko -->
Which means that when FieldSortings increses, the new markup should appear and indeed it does.
Problem is that with this logic none of my functions is anymore called, such as when I select a value from my dropdown the bindings don't work anymore. It feels like that the markup is computed only once (I think). Should I use some kind of particular composition to call the Razor function on the fly? Thanks in advance!
EDIT: the markup returned by razor is:
<div class="input-group custom-sort">
<section data-bind="validationElement: searchCriteria.Sorting.Field">
<label class="select">
<select data-i18n="[aria-label]accessibility.select.value" class="input-xs select-Sorting-Field" data-bind="value: searchCriteria.Sorting.Field,event: {change: changeSortingField}">
<option value="" css="searchcriteria-sorting-field-"><Select Order by></option>
<option value="DetectionDate" data-default="true" css="searchcriteria-sorting-field-DetectionDate">Detection date</option>
<option value="Impact" css="searchcriteria-sorting-field-Impact">Impact</option>
<option value="Score" css="searchcriteria-sorting-field-Score">Score</option>
</select>
<strong class="tooltip tooltip-top-right">
<i class="fa txt-color-teal"></i>
<span data-i18n="views.restricted.widgets.alertdetailwidget.sorting"></span>
</strong>
</label>
<div class="note note-error" style="display: none;" data-bind="validationMessage: searchCriteria.Sorting.Field"></div>
</section>
<label class="input-group-addon" for="sorting-control" data-bind="click: changeSortingDirection">
<span class="sr-only">Change the sorting direction</span>
<input type="checkbox" name="sorting-control" id="sorting-control" data-bind="checked: searchCriteria.Sorting.IsDescending">
<i></i>
</label>
And FieldSortings is an Observable array defined as:
self.FieldSortings = ko.observableArray([]);

Found the problem. Inside a Knockout foreach loop you need to refer to outsider variables and functions with the $parent . Due to this reason it couldn't make the bindings necessaries to work.

Problems with <select> filter

i coded an select filter for my website:
Filter
<div class="row">
<select class="event-type-select" id="selection" >
<optgroup label="categorygroup1">
<option value="category1">category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2">category2n</option>
<option value="category3">category3</option>
</optgroup>
<optgroup label="categorygroup3">
<option value="category4">category4</option>
</optgroup>
</select>
</div>
<div class="row">
<button type="submit" class="btn btn-default"> filter </button>
</div>
</form>
before selecting anything in the "selection-window" on the website you read "category1". i guess thats default(?).
but if i selected a category (and that works: you can read in the "selection-window" e.g. category3) and then click on the "filter"-button the website refreshes but in the "selection-window" you again read "category1" and not the selected category e.g "category3". i guess the selection doesn't work right.
how can i solve this that when clicking the button you still read your selected category?
also i want to display the selected option on a different part of the website.
my current code for this:
<script type='text/javascript'>
var m = document.getElementById("selection").value;}
document.write(m);
</script>
that as well doesn't work.
i hope you can understand what i mean, my english is pretty bad. sorry for that.

First, the question essentially contains 2 questions packed into one, don't do that.
Second, you are simply missing the preselection of the <select> field.
the selection doesn't work
When submitting a form the values are sent to the server. The server processes the values and renders the page again. Therefore you have to adjust the rendering according to the selected value. Lets say you simply pass the selected value to the view as string the view code could look like this:
#model string
...
<select class="event-type-select" id="selection" >
<optgroup label="categorygroup1">
<option value="category1" #if (Model == "category1") {<text>selected</text>}>category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2" #if (Model == "category2") {<text>selected</text>}>category2n</option>
...
</select>
also i want to display the selected option on a different part of the website.
Then store the selection somewhere (e.g. a DB), retrieve the selected value before the different part is rendered and simply output it in the different part.

The script has an error, you should use a function:
function test()
{
var m = document.getElementById("selection").value;
alert(m);
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="row">
<select id="selection" class="event-type-select">
<optgroup label="categorygroup1">
<option value="category1">category1</option>
</optgroup>
<optgroup label="categorygroup2">
<option value="category2" selected="selected">category2n</option> <!-- with selected="selected" you set the default -->
<option value="category3">category3</option>
</optgroup>
<optgroup label="categorygroup3">
<option value="category4">category4</option>
</optgroup>
</select>
</div>
<div class="row">
<button type="submit" class="btn btn-default" onclick="test()"> filter </button>
</div>
</body>
</html>

Select an item from the drop-down list

Good morning.
I can not select an item from the drop-down list.
Did the following:
1) I entered the text
WebBrowser1.Document.GetElementById ("Advert_category_id").InnerText = "Wedding / Event Services";
2) Set the value using the following commands, in different sequences, as soon as not twisted.
WebBrowser1.Document.GetElementById("Advert_category_id").SetAttribute("selected", "selected");
WebBrowser1.Document.GetElementById("Advert_category_id").InvokeMember("onchange");
WebBrowser1.Document.GetElementById("Advert_category_id").InvokeMember("submit");
WebBrowser1.Document.GetElementById("Advert_category_id").InvokeMember ("value", "84");
The problem is that this code selects the option I need, but it does not appear in the field. Those. Only when you click on the field, after executing the code, you can see that the desired option is selected. But this approach is also not true, because
The following drop-down list named SUB CATEGORY does not load the required data (the data remains with the category selected by default - Professional)
3. I tried to experiment with different id-shniki. Nothing helps :(
The site itself https://list.asiandirectoryapp.com/advert/create
(You must register to view)
I made the second ack,
That would not waste time for registration
fovogaze#p33.org
qwerty123
The code of interest
<div style="display:none"><div class="form-group"><label class="control-label" for="Advert_city_id">City</label><select class="form-control" name="Advert[city_id]" id="Advert_city_id">
</select><div class="help-block error" id="Advert_city_id_em_" style="display:none"></div></div></div><div class="form-group"><label class="control-label required" for="Advert_category_id">Category <span class="required">*</span></label><select class="form-control" name="Advert[category_id]" id="Advert_category_id">
<option value=""></option>
<option value="35">Beauty, Health & Fitness</option>
<option value="19">Education</option>
<option value="21">Entertainment</option>
<option value="27">Food, Drink & Sweet Centres</option>
<option value="39">Home Services</option>
<option value="116">Jobs/Careers</option>
<option value="43">Motoring</option>
<option value="50">Other Services</option>
<option value="1">Professional</option>
<option value="51">Property Improvements</option>
<option value="84">Wedding/Event Services</option>
<option value="117">Whats On Guide</option>
</select><div class="help-block error" id="Advert_category_id_em_" style="display:none"></div></div><div class="form-group"><label class="control-label required" for="Advert_categoryList">Sub category <span class="required">*</span></label><select multiple="multiple" class="form-control" name="Advert[categoryList][]" id="Advert_categoryList">
<option value="2">Accountants</option>
<option value="4">Claims</option>
<option value="123">Clothing Manufacturers</option>
<option value="6">Estate & Letting Agents</option>
<option value="7">Finance/Mortgages</option>
<option value="8">Graphic & Web Design</option>
<option value="9">Immigration</option>
<option value="10">Information Technology</option>
<option value="11">Insurance</option>
<option value="13">Mobile Apps - Mobile Phones</option>
<option value="14">Online Marketing/ SEO</option>
<option value="18">Print</option>
<option value="15">Retail and Wholesale</option>
<option value="16">Solicitors - Lawyers</option>
<option value="17">Travel Agents</option>
</select><div class="help-block error" id="Advert_categoryList_em_" style="display:none"></div></div><div class="form-group"><label class="control-label required" for="Advert_name">Company Name <span class="required">*</span></label><input class="form-control" placeholder="Company Name" name="Advert[name]" id="Advert_name" type="text" maxlength="100" /><div class="help-block error" id="Advert_name_em_" style="display:none"></div></div>
P.S. I can fill out all the fields, press the buttons the same way, but with the drop-down list the trouble. Thank you for any help.

I had a similar problem but I chose to solve it by simply invoking a client-side javascript (with a parameter) that handles the manipulation of the dom objects.
I found that this way I can separate code too, keeping dom handling in the JS and application-code in the winforms. Itll also allow you to leverage any functionality provided by e.g. jQuery plugins wrapping the select.
It could look like this (not tested):
Object[] objArray = new Object[2];
objArray[0] = selectorID;
objArray[1] = valueToSet;
webBrowser1.Document.InvokeScript("SetSelector", objArray);
and in the client side:
function SetSelector(selectorID, valueToSet){
$('#'+selectorID).val(valueToSet); //or any function you'd like
}

How to set selected item background color in Select element?

I have added a Select element to an Asp.net page and on each option inside this element I've set the style="background-color: example_color". As outlined in this answer.
When I debug the website and hover the option it is highlighted the correct color specified in the style property, but after I select it and tab to another element on the page, the background color is the normal white color and not the blue or green color defined.
Question:
How can I set an option color after it's been selected?
Select element after it's selected:
Code:
Select element markup:
<div class="form-control">
<label class="col-md-3 control-label" for="Current Status">Status</label>
<div class="col-md-8">
<select id="Status" name="Status" onchange="" class="form-control">
<option style="background-color: blue" value="Down">Down</option>
<option style="background-color: green" value="BCR">BCR</option>
</select>
</div>
</div>

<select> elements are generally notoriously challenging to style in any kind of cross-browser sense, so keep that in mind as this may not work across all browsers. If you need that, you'll likely need to resort to a third-party library like select.css or some of the suggestions in this thread, which explicitly avoid Javascript-based solutions.
You could use the background-color property available on your options to set an explicit style attribute on the parent <select> element during change events as seen below :
<select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
<option style="background-color: blue!important" value="Down">Down</option>
<option style="background-color: green!important" value="BCR">BCR</option>
</select>
<script>
function colorizeMe(element){
// Use the selected value to set the color
element.options[element.selectedIndex].style.backgroundColor
element.setAttribute('style','background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
}
</script>
Example and Snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
<option style="background-color: blue!important" value="Down">Down</option>
<option style="background-color: green!important" value="BCR">BCR</option>
</select>
<script>
function colorizeMe(element) {
// Use the selected value to set hte color
element.options[element.selectedIndex].style.backgroundColor
element.setAttribute('style', 'background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
}
</script>
</body>
</html>

Selenium element Not selectable

I am having an issue with an element which works with a mouse click and there are some items from which one has to be selected but its unselectable is set to on.
whenever I try to select the elements
I get back an error
the element is not visible so may not be interacted with
But the element is visible
we are using a kendo UI multiselect
please help
The Html Code:-
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul id="ProfileEditSharedModel_SelectedIndustrySectorIds_taglist" class="k-reset" unselectable="on" role="listbox">
<li class="k-button" unselectable="on">
<span unselectable="on">Sector 1</span>
<span class="k-icon k-delete" unselectable="on">delete</span>
</li>
</ul>
<input class="k-input" style="width: 25px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="ProfileEditSharedModel_SelectedIndustrySectorIds_taglist ProfileEditSharedModel_SelectedIndustrySectorIds_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select id="ProfileEditSharedModel_SelectedIndustrySectorIds" class="bigselect" name="ProfileEditSharedModel.SelectedIndustrySectorIds" multiple="multiple" data-val-required="*" data-val="true" data-placeholder="Select Sectors..." data-role="multiselect" style="display: none;" aria-disabled="false" aria-readonly="false">
<option value="1">Sector 1</option>
<option value="2">Sector 2</option>
<option value="3">Sector 3</option>
</select>
Thanks in Advance

Try taking the element in a list first because it may be possible if you are finding element by classname (say), there may be multiple elements with the same classname. Selenium won't search further as it gets the first element by that identifier which may not be visible in your case. So please check that action is performed on the expected element.

I found a soloution using the JavascriptExecutor
It worked for me using:
((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#{0}').data('kendoMultiSelect').value({1});", "ProfileEditSharedModel_SelectedIndustrySectorIds", 3,));
or
((IJavaScriptExecutor)driver).ExecuteScript(String.Format("$('#ProfileEditSharedModel_SelectedIndustrySectorIds').data('kendoMultiSelect').value([values]);", "ProfileEditSharedModel_SelectedIndustrySectorIds", 3,));
I was using a kendoMultiSelect there