I want to select a value from a dropbox. The contents from dropbox do not have values or ID, instead, they have a title. This is the HTML for one of the contents and for the dropdown. The id below is from dropbox. With this information, I am just able to select the dropbox, not the values.
<span class="select2-selection__placeholder">Select reason</span>
<span class="select2-selection__rendered" id="select2-e5dt-container" role="textbox" title="01 - <Change of mind, back to stock>">01 - Change of mind, back to stock</span>
<span class="select2-selection__rendered" id="select2-e5dt-container" role="textbox" title="04 - <Production Fault, to recovery>">04 - Production Fault, to recovery</span>````
To solve this problem statement all you need to do is:
Find the dropdown using element
Click the dropdown
Click the option
it("should select the dropdown." async () => {
await $("span.select2-selection__placeholder").click();
//add sleep to give a time for the options to reveal or use an explicit wait
//here. I prefer the latter.
await browser.sleep(1000)
// click the option '01 - Change of mind, back to stock'
await $$("span#select2-e5dt-container"").get(0).click();
});
Lemme know how it works out for you!
Identify Drop Down and click on it
Wait for DropDown options to be displayed (use ExpectedConditions.visibilityOf())
var EC = protractor.ExpectedConditions;
var filteroption = "Production Fault, to recovery";
this.DDOptions = element.all(by.css('[role="textbox"]'));
//Click on the Drop Down
// Wait for Drop Down options to be visible
browser.wait(EC.visibilityOf(this.DDOptions.get(0), 500, "DD option not visible timing out"));
this.DDOptions.filter(function (elem, index) {
return elem.getText().then(function (text) {
return text.toUpperCase() === filteroption.toUpperCase();
});
}).then(function (filteredElements) {
filteredElements[0].click();
});
Related
I have an inherited MVC5 web application using Razor that when the page loads, there are two drop downs displayed, some data, and five buttons, one of which is disabled (Save). When I select a different option from the first drop down, what is supposed to happen an input field with a date picker is to display, along with an "OK" button, and the "Save" button is supposed to be enabled. This works fine in IE 11, but in Microsoft Edge, a message appears asking "Leave site? Changes you made may not be saved." If I click the "Leave" button, the spinner appears and I stay on the page.
In IE 11, when any other option is selected from the first dropdown, the spinner appears, the page reloads with the input field with date picker, but OK button appears, and the Save button is enabled. The only time a similar message displays is when the back button is clicked.
I went through the code and found the following:
The code for the first drop down:
#Html.DropDownListFor(m => m.StatusId, new SelectList(Model.StatusList, "Value", "Text", Model.StatusId), new { #class = "form-control", #id = "StatusList"})
I also found a submit button that has been hidden:
#Html.HiddenFor(m => m.CurrentTypeName, htmlAttributes: new { id = "CurrentTypeName" })
<input id="FinalizeValidationButton" type="submit" name="action:FinalizeValidation" style="visibility:hidden" />
In a javascript file I found the following:
//This is the first dropdown mentioned above
$('#StatusList').change(
function () {
triggerFinalizeValidation();
setVisibility();
});
var triggerFinalizeValidation = function () {
var selectedStatus = $('#StatusList').val();
$("#CurrentSignificantActivityTypeName").val($("div.active").prop("id"));
if (selectedStatus != 1) {
navParams.userAction = true;
$('#finalizeButton').prop('disabled', true);
navParams.isDirty = false;
$('#FinalizeValidationButton').trigger('click');
}};
So what's happening is, the user selects a different option from the first dropdown (StatusList), which triggers $('#StatusList').change, which in turn calls triggerFinalizeValidation(), which in turn adds a click event to the hidden submit button ("FinalizeValidationButton"). For whatever reason, it's like it triggers a postback like response, which causes Microsoft Edge to think the user is trying to leave the current page, when they are not.
The hidden button, when clicked, executes the following code in the RiskController.ca. There are a number of dropdowns, fields, etc on the screen other than the fields/buttons that have already been mentioned. So the this part of the code validates what the user has selected and peforms calculations based on what was selected. When I comment out the click event in the JavaScript, the browser message doesn't display, but then the FinalizeValidation method doesn't execute either.
[AcceptVerbs(HttpVerbs.Post)]
[MultiButtonAction(Name = "action", Argument = "FinalizeValidation")]
public ActionResult FinalizeValidation(RiskViewModel viewModel)
{
string currentActivityTypeName = viewModel.CurrentActivityTypeName;
var risk = _riskRepository.FindFull(viewModel.Id);
I'm wondering if there is a way to use #onchange in the dropdown to somehow call the FinalizeValidation method in the controller to see if that resolves the browser message from appearing...Thoughts?
I ended up using
$(window).off('beforeunload');
After
$('#FinalizeValidationButton').trigger('click');
Which resolved the issue.
I have a kendo grid with filterable = true, mode=row.
I would like a way to have a button click, fire an event that will toggle hiding and showing the filter row.
Right now, I have it working by editing the innerHTML, but this is not what I want to do in the end, for several reasons.
1) I need to have a saved version of the filter row values before they are removed.
2) After they are removed and re-added they will not work
...
many other reasons, just bad practice and there has to be a better way.
A button that fires the event: toggleFilterClick:
<script type="text/x-kendo-template" id="gridFilter">
<button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>
</script>
The Javascript code:
//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row")[0].innerHTML == '')
{
$(".k-filter-row")[0].innerHTML = filterRowValues;
}
else
{
$(".k-filter-row")[0].innerHTML = '';
}
});
Any thoughts suggestions would be appreciated/
I would just like to hide the actual filter row in the header
I'm not sure if i get the point but if you just want to hide it just simply remove everything except$(".k-filter-row").show(); and $(".k-filter-row").hide();. I create an example where when i hide the filter, the filter condtion will removed, but when it showed again the grid will refiltered with the previous value used to filter
$("#toggle").kendoButton({
click:function(){
if($(".k-filter-row").css("display") == "none"){
$(".k-filter-row").show();
//show again filter and execute previous filter condition
$("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
$("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});
}else{
//store the previous filter value
//autocomplete
vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());
//hide filter row
$(".k-filter-row").show();
//to reset filter of the grid when filterable hidden
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
});
See the details in action
DEMO
Have you tried just hiding the row instead of removing it?
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row").is(":visible")){
$(".k-filter-row").hide();
}
else{
$(".k-filter-row").show();
}
});
By Default when we enter a value inside a cell in Handsontable and the press Enter key or go to another cell or other part of the page, the value we have already entered into the cell will be committed automatically (after validation).
But I have a new requirement now. I want to manually commit the changes form outside of Handsontable (e.g. with calling a JavaScript function).
The real story is that I have rendered dropdown control inside some cells in Handsontable. When the user enters a number in a cell without pressing Enter key; and then clicks on the dropdown control in another cell; I do not have access to their new entered value.
I am going to commit their former changes when they click on the dropdown.
Any Idea?
Update:
I created a jsFiddle and did my best to keep it as simple as possible. http://jsfiddle.net/mortezasoft/3c2mN/3/
If you change the Maserati word to something else and without pressing Enter choose an option in dropdown, you can still see the name Maserati is shown as an alert dialog.
<div id="example"></div>
var data = [
["", "Maserati"],
["", ""],
];
$('#example').handsontable({
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
cells: function (row, col, prop) {
var cellProperties = {};
if (col===0 && row===0) {
cellProperties.renderer = selectBoxRenderer;
cellProperties.readOnly =true;
}
return cellProperties;
}
});
function selectBoxRenderer(instance, td, row, col, prop, value, cellProperties) {
var $select = $("<select><option></option> <option>Show the name</option></select>");
var $td = $(td);
$select.on('mousedown', function (event) {
event.stopPropagation(); //prevent selection quirk
});
$td.empty().append($select);
$select.change(function () {
//Default value is Maserati but we are gonna change it.
alert($('#example').handsontable('getData')[0][1]);
});
}
You can add instance.destroyEditor() to the mousedown handler on $select. This will commit the changes on first click, but will also require another click to open the select menu.
$select.on('mousedown', function (event) {
event.stopPropagation(); //prevent selection quirk
instance.destroyEditor();
});
The reason behind second click problem is that instance.destroyEditor() re-renders the table, which causes the original select element to be destroyed, so the click event cannot take effect.
To solve this, add
if ($td.find('select').length!=0) return;
at the beginning of the renderer. This way existing select elements will not be overwritten when re-rendering.
So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).
You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/
I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.
Setup
I've got a Telerik Kendo UI TabStrip with multiple tabs inside of an UpdatePanel...
<asp:UpdatePanel ID="DataDetails_Panel" UpdateMode="Conditional" runat="server">
<div id="ABIOptions_TabContainer">
<ul>
<li>Attendance</li>
<li>Grades</li>
<li>Gradebook</li>
<li>PFT</li>
<li>Scheduling</li>
<li>Miscellaneous</li>
<li>Parent Data Changing</li>
</ul>
</div>
</asp:UpdatePanel>
...which I then wire up in javascript later...
var optionTabContainer = $("#ABIOptions_TabContainer").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
select: onMainTabSelect
}).data("kendoTabStrip");
Scenario
The users will click on the various tabs and inside of each tab are settings for our portal. When they are in a tab and they make a change to a setting, the expectation is that they'll click on the 'Save' button, which will perform a postback to the server via ajax, because it is in the update panel.
Current Behavior
After the post back happens and the ul content comes back, I reapply the kendoTabStrip setup function call, which makes none of the tabs selected. This appears to the user like the page is now empty, when it just had content.
Desired Result
What I want to do, is after the partial postback happens and the UpdatePanel sends back the ul, I want to reselect the tab that the user previously selected.
What Already Works
I already have a way to preserve the tab that the user clicked on:
var onMainTabSelect = function (e) {
tabToSelect = e.item;
console.log("onTabSelect --> ", e.item.textContent);
}
and a function to reset the selected tab whenever it is called:
function setMainTab() {
if (!jQuery.isEmptyObject(tabToSelect)) {
var tabStrip = $('#ABIOptions_TabContainer').data("kendoTabStrip");
console.log("Attempt to set tab to ", tabToSelect.textContent);
tabStrip.select(tabToSelect);
} else {
console.log("tabToSelect was empty");
}
}
What Doesn't Work
My hypothesis is that the Kendo TabStrip says, "Hey, that tab is already selected" when I call the setMainTab after my postback:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
setMainTab();
});
...and therefore, doesn't set my tab back. If I click on the tab, then Poof, all my content is there just like I expect.
Any ideas what I may be doing wrong?
I ended up changing the onMainTabSelect method to:
var onMainTabSelect = function (e) {
tabToSelect = $(e.item).data("tabindex");
}
which gets me the data-tabindex value for each li in my ul. I couldn't get the tab index from kendo, so I had to role my own. Once I got that value, then I was able to set the selected tab via an index rather than the tab object reference itself.