How to add icon to semantic ui dropdown? - c#

On https://jsfiddle.net/u40uz1c4/4/, how can I add those icons to the dropdown?
I have ASP.NET dropdowns each with a list of items that I want to skin with the semantic dropdown. I want however svg images as icons for each item.
Reference: http://semantic-ui.com/modules/dropdown.html#/usage
<select name="gender" class="ui dropdown" id="select">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br />
<br />
<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'>
<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'>

You cant do that by ASP.NET controller. You have to ctrate simple html markup, and than use the script for convert it to drop down list

I ended up embarking on an exercise to programatically create HTML server-side based on inspecting existing asp:DropDownList controls, similar to the output shown at https://jsfiddle.net/hodtfkys/3/.
<div class='ui icon selection dropdown'>
<input name='DropDownListCategoryClone' type='hidden'> <i class='dropdown icon'></i>
<div class='default text'>
Male
</div>
<div class='menu'>
<div class='item' data-text='Male' data-value='male'>
<img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'> Male
</div>
<div class='item' data-text='Female' data-value='female'>
<img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'> Female
</div>
</div>
</div>

Related

How do I check checkboxes on a page using IWebDriver in selenium C#?

I need to select multiple checkbox to Submit the form and the following code response in HTML format.
Here i have 4 check box. when i have launch the browser then first 3 checkbox is always checked and last one always Unchecked. Now i want first 3 checkbox should be uncheck and last one will be checked .how do i this with selenium c#
<div class="formSubSection">
<h4>
Details:</h4>
<div class="formField">
<div class="formFieldCheckBox">
<span title="Imported selector"><input id="aul00_ContentPlaceHolder1_aul02_chkVan" type="checkbox" name=aul00$ContentPlaceHolder1$ctl02$chkVan" checked="checked"><label for="aul00_ContentPlaceHolder1_ctl02_chkVan"> Is the Helpdesk?</label></span>
</div>
</div>
<div class="formField">
<div class="formFieldCheckBox">
<span title="home selector"><input id="aul00_ContentPlaceHolder1_ctl02_chkHome" type="checkbox" name="aul00$ContentPlaceHolder1$ctl02$chkHome" checked="checked"><label for="ctl00_ContentPlaceHolder1_aul02_chkMotorHome"> home?</label></span>
</div>
</div>
<div class="formField">
<div class="formFieldCheckBox">
<span title="Imported selector"><input id="aul00_ContentPlaceHolder1_ctl02_chkHorseBox" type="checkbox" name="aul00$ContentPlaceHolder1$aul02$chkHorseBox" checked="checked"><label for="aul00_ContentPlaceHolder1_aul02_chkHorseBox"> Is the vehicle?</label></span>
</div>
</div>
<div class="formField">
<div class="formFieldCheckBox">
<span title="car selector"><input id="aul00_ContentPlaceHolder1_aul02_chkCar" type="checkbox" name="aul00$ContentPlaceHolder1$ctl02$chkCar" checked="checked"><label for="ctl00_ContentPlaceHolder1_aul02_chkCar"> Is the Driver?</label></span>
</div>
</div>
</div>
It depends are you web elements have dynamical id and names.
I wold suggest solution to get all 4 elements (according to your post, I do not know rest of the DOM) and just to iterate trought the for loop. Something like
for(int i=0;i<driver.findElements(By.Class("formFieldCheckBox"));i++)
{
if(i>=5)
{
if(!driver.findElements(By.Class("formFieldCheckBox")).get(i).isSelected())
driver.findElements(By.Class("formFieldCheckBox")).get(i).click();
}
else
{
if(driver.findElements(By.Class("formFieldCheckBox")).get(i).isSelected())
driver.findElements(By.Class("formFieldCheckBox")).get(i).click();
}
}
This is the Java solution, but almost same code is for C#. Try it and let me know did it help.

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.

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

Linq to xml - access deep element

In C# i need to access element that is nested in many other elements. I could write a query by naming all of elements but that would be very time consuming. Is there any easy way to do this or maybe some generator?
for example i have a xml:
<div id="list_offers">
<div class="container">
<div id="header">
<div class="row">
<div class="space-on-sides">
<div class="sixteen columns relative">
<div class="logo">
<a href="/">
<img src="/images/design_resp/design/logo_profesia.png" width="113" height="76" alt="PROFESIA.SK - práca, zamestnanie, ponuky práce, brigáda, voľné pracovné miesto" title="PROFESIA.SK - práca, zamestnanie, ponuky práce, brigáda, voľné pracovné miesto" />
</a>
</div>
<div class="right-panel">
<a class="login-company small red button nice radius right hide-on-phones margin-on-left" title="Vstup pre firmy" href="/login_person.php?action=company_login">Vstup pre firmy</a>
<a class="login-company small red button nice radius right show-on-phones margin-on-left" href="/login_person.php?action=company_login">Firmy</a>
<a rel="nofollow" id="login_modal" class="small gray button nice radius right" title="Prihláste sa do konta" href="/login_person.php?action=login">Prihlásiť</a>
<div class="search">
<div class="relative hide-on-phones">
<form name="fulltextsearch" id="fulltextsearch" action="/search.php" method="get" onsubmit="if(document.getElementById('search').value=='HÄľadanie') return false; return true;" class="nice" />
<input name="which_form" type="hidden" value="simple" />
<input name="tab_name" type="hidden" />
<input name="search_anywhere" type="text" id="search" placeholder="HÄľadanie" tabindex="1" class="input-text expand" />
<input name="submit_search_simple" type="image" src="/images/design_resp/design/blank.png" alt="HÄľadaĹĄ" class="ico search-nosprite" /></form>
</div>
<div class="show-on-phones">
<a title="HÄľadajte ponuky práce podÄľa rĂ´znych kritĂ©riĂ">
</a>
</div>
</div>
<div class="row-header-favorite">
<div class="header-favorite">
<a title="Moje vybrané pracovné ponuky" class="ico-shopping-cart-toppanel" rel="nofollow" href="/user_details.php?action=show_my_offers&ref_top_panel=157">0</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and i need access:
input name="tab_name" type="hidden"
You can use Linq to xml
var xDoc = XDocument.Load(pathToXmlFile); //XDocument.Parse(xmlstring);
var input = xDoc.Descendants("input")
.First(i=>(string)i.Attribute("name")=="tab_name");
XPath can be used too
var input = xDoc.XPathSelectElement("//input[#name='tab_name']");
If you need to access that element on server side, you'll need to add a runat attribute there (like this: runat="server"), to make it a server side control. I would strongly suggest making it a control of your page, then, so you can access it like any other variable. You would have to give it an ID, so at the very least you could fetch it through that property.
But! your problem seems to be more client side related, so I strongly, really strongly suggest you use jQuery instead. Get jQuery in your site, and it becomes as easy as:
$("input[name='tab_name']");
Or better yet, if you give it an ID:
$("#idYouGaveTotheField");

Basic MVC: If-else logic in cshtml page

I am just learning MVC and I've created a form but I would like to set conditional formatting ... like with an if-else construct. I know this is basic, but can I put it on the form? If so, how do I code that? What I would like to do is gray out the background of a input box if the checkbox is NOT checked. Thanks in advance
<div class="left">
Emulate Access
</div>
<div class="right">
<input type="checkbox" name="Emulate" />
</div>
<div class="clear" />
<div class="left">
Emulate Associate:
</div>
<div class="right">
<input type="text" name="NmAssoc" />
</div>
I would use JQuery http://jquery.com/. It works great for this sort of thing.

Categories

Resources