As anyone can notice it, in the schedule external drag drop demo , someone can drag the event from the TreeView list and when it get near to the right page edge then the page scrolls to the right.
Here is a screenshot showing it.
It's occuring also in our app and it's rather annoying.
We wish there will be a fix for this issue.
Greetings from Syncfusion Support.
We have checked your reported problem that dragging a TreeView node that produces the scroller in the output web page. Currently, we don’t have any property to prevent the scroll when dragging a TreeView node. However, we have already considered this as a feature from our end. It will be included in our Volume 2 Release which is expected to be released in June 2020.
Track the below link to know the feature status.
https://www.syncfusion.com/feedback/13575/need-to-provide-the-option-to-set-the-drag-area-in-treeview-component
But, you can resolve your issue by setting the target for dragArea of TreeView’s drag object in the created event. When setting the target, you can drag the element only inside the target element. It prevents the element from scrolling exceeding that element.
Please, check out the sample with the above explained solution.
Sample: https://stackblitz.com/edit/react-jqzozo-gqpyve?file=index.js
onCreate(){
this.treeObj.dragObj.dragArea = "body";
}
Related
I have an sap.m.Table populated with a number of items. One of the columns in the table contains a checkbox allowing the user to select / deselect it for a particular item.
I have an issue where the table scrolls automatically in the following case:
I change focus to another application on my computer. The specific application makes no difference.
I return to the UI5 application containing the table but I do NOT click anywhere in the application.
I scroll down the list using my mouse scroll wheel. I still have not clicked in the UI5 app in any way including the table's scroll bars so focus is still not in the UI5 app.
I select / deselect the check box for any random item in the list that within view which obviously places focus back to the UI5 app.
The list then scrolls on it's own as if it returns to the position in the list prior to the scroll being performed in step #3 above and selects / deselects a checkbox for a completely different item. It as if the list is retaining it's visible position on the screen and returns to that position to make it visible again on the screen.
If anyone can shed some light on this, requires further clarifying details and/or can suggest a work-a-round that would be great.
Thank you
*** UPDATE ***
December 16, 2022:
Here is an example in CodePen. I additionally noticed that it only happens if I first select a check box for an item, change focus to another application, then return to the UI5 app as per step #2 above.
*** UPDATE #2 ***
Thank you #Marc who identified work-a-rounds as per his comment below.
z
If you go mouse over on above area then 3m,6m,1y and all are visible. If you go mouse down then it disable. How to handle this type of case in selenium.
As per my understanding you will have to use Action classes's mouse hover to get the pop up for months.
....Use developer tool to highlight the chart on which you need to hover the mouse, now hover the mouse to get those month's pop ups. and see in developer tools for changes in dom so that you can get their xpaths. Make sure you use "driver.click" to click on months. you can try xpath= //*[.='3m']. Just try to find out exact value of * using developer tool.
Thanks for quick response.
I have tried with your solution but the xpath is not working and give the nosuchelementexception. Because in the HTML Dom there are 2 iframe. Inside child frame we goto mouse over then it's visible . We mouse down then it is disapper. So my question is how to pause the mouse over section at certain time period so that all text are like 3m,6m,YTD,1y,All are visible and click one by one
In the DOm first div tag then the sequence order like
,, then 3m is displayed .
Could you please provide me the alternative solution?
I was working on continuous scrolling using BufferedStore and calling bufferedrender plugin from my grid. The continuous scrolling is working perfectly but the selection of my records are not getting retained(remembered) when I scroll down and go back to my original selection.
I also tried with the property pruneRemoved : false in selection model. Still the issue persists. Could you please help us on this how can we proceed further.
Version of ExtJS : 6.0.2
I'm using the selenium webdriver (python) to automate testing of an app that uses the fullcalendar js plugin library. However, I'm having trouble automating dragging and dropping events to the calendar.
After a lot of experimentation, I can see that the test code below moves the event element to the correct location. When this action is done by hand on the browser, the calendar square that you are hovering on turns blue and the event, when dropped, is added to the calendar. This does not happen when the event is moved via automation -- the calendar square does not turn blue, and the event, when dropped, returns to its original position.
How can I get the same drag and drop functionality under automation?
evt = self.sel.find_element_by_css_selector('#evt1')
cal_square = self.sel.find_element_by_css_selector('td[data-date=\'%s\']' % move_to_date.isoformat())
ActionChains(self.sel).click_and_hold(evt).move_to_element(cal_square).perform()
time.sleep(10)
ActionChains(self.sel).release().perform()
time.sleep(5)
Here's a link to at test case which demonstrates the issue:
https://gist.github.com/jenniferlianne/9353489
I have a problem with time while drag and drop. I need some wait after move_to_element and release, but after move_to_element.perform my mouse gets to the coordinates of dragged element and release over there. What can I do with that?
After a while I try this:
parent = driver.find_element_by_xpath("//*[contains(text(), 'Parent')]")
welcome_form = driver.find_element_by_id(link.my_forms["welcome_to_pdf_form"])
actions.click_and_hold(welcome_form).move_to_element(parent).click().perform()
I don't actually know why it works. I thought it will generate click after click and I will get an error but works fine.
My problem was that -- as Micheal pointed out -- after the move, the mouse was reverting back to original element position and doing the release() there. You can supply the release() function with the element where you want the 'mouse up' to happen.
For whatever reason, this works:
ActionChains(self.sel).click_and_hold(
evt).move_to_element(cal_square).release(cal_square).perform()
While this does not:
ActionChains(self.sel).drag_and_drop(evt, cal_square).perform()
I am trying to build an app using Extjs 4.1. In general: it is a viewport with a tree panel on the west and a center panel that it is actually a tab-holder panel. When a user clicks on a tree node a tab is populating the center view. I had set an attribute in the tree panel that after selecting a node it gets deselected (deselectAll). The reason for this is that the user can open many tabs from different places (e.g. within each tab). But, when I set the above attribute it is producing an error (the “data” is undefined). The data that is undefined is the data related to the tree node. So, the question concerning selection model:
How can I address this problem (a solution may be to select the fist node, but I don’t want it)?
As for the history utility, I need to implement browser back button. Especially I want to disable browser’s refresh button. If user opens let’s say 15 tabs and accidentally click on browser refresh or “F5” he/she will lose everything. I had tried many things but with no luck. I am unable to understand “Ext history util”. So,
Is there any good example out there?
Could anybody guide me on how to do it?
Notice that the application is built respecting the new “MVC” architecture.
Stopping the refresh event is pretty easy - providing that your page has the focus. E.g.:
Ext.getDoc().on('keypress', function(event) {
if (event.getCharCode() == event.F5) {
event.stopEvent();
console.log('you stopped the refresh event');
}
});
If your page doesn't have the focus then there is nothing that can be done -- but most of the time your page loses the focus when a different browser tab is opened so F5 would be refreshing that one instead anyway.
I'm still trying to wrap my wits around the first part of your question, but I thought I would share that.
EDIT
Instead of trying to stop the default browser behavior (something which you can only do on a very limited basis), you should look into state management. ExtJS supports it on many components. Here is the ExtJS example.
Also here is the example of controlling browser history.