I'm working for the first time with Cypress to automate some tests, and I'm pleased with that, but now I'm stuck on something simple.
We are using kendo to render a dropdown (in the HTML it is a standard select, with kendo-drop-down-list attribute).
In the rendered page, I can see the select item with the possible values, but it is set as not visible, so cypress cannot click and select on this.
It looks like that every time I select an option, the DOM is dynamically modified to show me the dropdown as a set of span elements, that are created on the fly.
This is what I'm doing in Cypress (where sDir is the id of the select element and firstValue is the first option of the dropdown list)
cy.get('#sDir').select('firstValue')
Which is the right way to interact with a kendo drop down with Cypress?
Thanks
Saw some other posts related to this, but I'm using the following method to interact with kendo drop down:
cy.get('[data-container-for="YourItem"] > .k-widget > .k-dropdown-wrap > .k-select').click({force: true})
cy.get('.k-list-filter > .k-textbox').type('Value')
cy.get('k-list-scrooler').contains('Value').click()
You may have to use click({force: true})
Related
I am trying to create an item that is a button "show more" and when you press on it you can show a kind of context menu / drop down that all of the items in that drop down are with checkboxes and there is a search component in it too, so you can search some items in the dropdown by their name. For example: (instead of "c++,c#,Object c" it's should show "show more", i.e. static text)
I tried to use kendoContextMenu. But I don't know if it's could work because the problem with context menu is that when I will click on a checkbox the menu will close. Please advise me of a way to do that or if you have an example of code. Thanks!
The MultiSelect component might be a good starting point
https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect.
My understanding is that MultiSelect does not have a "select more than one at a time in dropdown" feature.
You might consider using a pop up window and within that implement your own custom ui that features everything you want
search term box
scrolling list of selected and selectable items
accept or cancel changes in selection
Regarding your dojo that extends drop down list, I can't code the extension for you. However, changing the dataSource assignment to a setDataSource call will populate the extension component according to the template.
// kendo.ui.DropDownList.fn.dataSource = options.testItemSource;
me.setDataSource(options.testItemSource);
I am using Kendo UI Grid master detail template like in this docs http://demos.telerik.com/kendo-ui/grid/angular , I am able to get the template by clicking in the hierarchy cell, I want to know if there is some easy way to expand the detail template by clicking anywhere on row.
Thanks!
To do that you can follow these steps:
Add k-on-change="handleChange(kendoEvent)" to trigger the function when we select any row,
dont forget to add k-rebind="gridOptions.selectable",
and i also prefer <div kendo-grid="grid"></div> so later on we can
select the grid instance
create $scope.handleChange = function(kendoEvent){....}to handle the event
and finally here is a kendo dojo example from yours that i've modified
EDIT:
As per your comment, you simply close all expanded row first then you can open the one which is selected. Add this $scope.grid.collapseRow($scope.grid.tbody.find("tr.k-master-row")); before $scope.grid.expandRow($scope.grid.tbody.find("tr.k-master-row.k-state-selected"));. Updated dojo
When use multi-select control in Kendo UI, it seems we have to select items one by one, i.e. click one item, the drop down list will collapse, then we have to click the multi-select control again to select the next item. Is it possible that when drop down list drops, user can select multiple items at the same time, so multiple items can add to the control at the same time, i.e. use CTRL + Mouse to select multiple items?
For example, in the below image, I want to select Nancy and Robert (i.e. use CTRL+MOUSE) and add them to list at the same time. Is it possible?
Thanks
Set autoClose to false:
$("#multiselect").kendoMultiSelect({
autoClose: false
});
I have a bootstrap dropdown button for each table row.
When the dropdown is clicked it shows a small form with some input fields.
When the user submits this form data or the row gets redrawn the dropdown closes.
I tried preserving the dropdown state using the Template.preserve() method, similar to inputs but with no success.
Some suggested using {{#constant}} directive surrounding the dropdown I also have some reactive content inside the form that needs re-rendering, so this options is not for me.
I have noticed this issue with reactive templates and there is no good solution that I know of. This is somewhat of a hack but it works.
Option 1
Manually add and remove a css class to your dropdown. Use session variables to save the state of the dropdown.
This should be the default state of your dropdown... class="dropdown"
When a user clicks on the dropdown use a session variable to save its state and add 'open' to the HTML class attribute. class="dropdown open"
When a user closes the dropdown remove 'open'
Option 2:
1. User clicks dropdown button.
2. Save dropdown button ID as active using a session variable.
3. Use the following callback to reopen your dropdown... Template.myTemplate.rendered = function ( ) {
if (dropdown = active) {
$().dropdown('toggle'); //instead of toggle try 'open'
}
}
I haven't tried this with dropdowns yet but I was having the same issue with modals disappearing every time the template kept rendering. I tried the second option and it didn't work that great. I ended up using something like the first option to solve the issue and it worked great.
I have a Magento product page producing static select elements, to which the price mechanism is tied in to backend, so i can't touch those dropdowns. I am using an angular.js radio element to recieve user input, which should in turn update the static dropdown's selected option.
I don't know how to link the two, I have recreated the problem here: http://jsfiddle.net/ldn_tech_exec/smBdC/1/
I want the radio button to update the dropdown, but I can only manipulate the dropdown after it has been created, perhaps using jquery to insert any angular directives required.
UPDATED again: Your select list needs an ng-model and the options should be generated with ng-options. When you select a radio button, the controller method you trigger should update that ng-model, which will cause the select list to update.
See http://docs.angularjs.org/api/ng.directive:select
Another way to do this is to use ng-selected. See
http://docs.angularjs.org/api/ng.directive:ngSelected
UPDATE #3: I missed the fact that you can't modify the select list initially. See my fiddle in the comments below for a working solution.
It sounds like you have some product where the price depends on the options set.
If this is the case then updating the drop-down from your radio button is relatively trivial - or at least depending on your prototype/jquery skills.
However there is a gotcha: once you update the drop-down in javascript with an 'invisible hand' there is a whole lot more javascript code to update the price and availability. To do this you need to bubble the event. This doesn't happen automatically if using prototype.
I hoped I could rustle up the 'bubble code' but I don't currently have it to hand, besides, you aren't stuck at that point, yet...