I'm using SmartGWT.
I used addScrolledHandler so that 3grids can be scrolled together as below.
firstGrid.addScrolledHandler(new ScrolledHandler() {
#Override
public void onScrolled(ScrolledEvent event) {
Integer eventsToSink = firstGrid.getRowTop(event.getY());
firstGrid.scrollToRow(eventsToSink);
secondGrid.scrollToRow(eventsToSink);
thirdGrid.scrollToRow(eventsToSink);
}
});
When I scrolled down the first grid, other grids also were scrolled. However, it doesn't scroll up after then.
I found this message.
"Unable to preventDefault inside passive event listener due to target being treated as passive. See "
Regarding this message, I checked and found that I have to set passive value to false.
However, I am not sure how I can do that when using smartGWT..
Related
our team decided to zoom out the whole site. So they did this:
This is breaking my PW tests while clicking on the button.
I get this in the inspector:
selector resolved to visible <button id="add-to-cart-btn" data-partid="04-0001" data-…>ADD TO CART</button>
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
element is outside of the viewport
I found this is an issue in PW https://github.com/microsoft/playwright/issues/2768
My question is: how can I bypass this in the most efficient way?
Is there a way to override a playwright function that sets the initial loading of the page and set my zoom there?
Since if I do it via JavaScript, then I have to do it every time my page reloads, and that can be really tedious and error-prone in the tests.
This is what I have now, but it is really a hack a like solution:
async removeZoomOutClassFromBodyElement() {
await this.#page.evaluate(() => {
const body = document.querySelector('body');
if (body) {
// Removes the class only if it exists on the body tag
body.classList.remove('zoom-out');
} else {
throw Error(ErrorMessage.BODY_NOT_FOUND);
}
});
}
Can you please advise what would be the best approach here?
Thanks!
I am doing some integration tests, and I have replaced some tables with a grid. At this moment, I have some visible columns by default and other columns are hidden as follows:
column6.setHidable(true);
column6.setHidden(true);
Now I am trying to do some integration tests. For getting the grid, I can use the method (is the only grid present in this view):
$(GridElement.class).first();
This works fine. But for my test (with Vaadin Testbench), I need to check some values that are inside the hidden columns of the grid. I am talking about this button:
I have tried to use the Vaadin debug console to get the name of the button that allows the user to show/hide columns, but the debug console only can select the entire grid element, not this menu.
Also I have check if inside the GridElement exists any kind of already implemented method that give me access to this menu without any success.
Usually, chrome developer tools (or similar for firefox and ie / edge, etc) is your best friend in such cases. So far I'm not aware of anything dedicated for that particular button. However you can workaround this limitation by selecting the items which compose this feature by their specific classes:
The below test method shows a quick implementation which should give you a starting point:
public class GridManipulationTest extends TestBenchTestCase {
#Before
public void setUp() throws Exception {
System.setProperty("webdriver.chrome.driver", "D:\\Kit\\chromedriver_win32\\chromedriver.exe");
setDriver(new ChromeDriver());
}
#After
public void tearDown() throws Exception {
// TODO uncomment below after checking all works as expected
//getDriver().quit();
}
#Test
public void shouldOpenGridColumnVisibilityPopupAndSelectItems() {
// class for the grid sidebar button
String sideBarButtonClass = "v-grid-sidebar-button";
// class for the sidebar content which gets created when the button is clicked
String sideBarContentClass = "v-grid-sidebar-content";
// xpath to select the item corresponding to the necessary column
// there are perhaps more "elegant" solutions, but this is what I came up with at the time
String columnMenuItemXpath = "//*[contains(#class, 'column-hiding-toggle')]/span/div[text()='Name']";
// open the browser
getDriver().get("http://localhost:8080/");
// get the first available grid
GridElement firstGrid = $(GridElement.class).first();
// look for the grid's sidebar button and click it
firstGrid.findElement((By.className(sideBarButtonClass))).click();
// the sidebar content is created outside the grid structure so don't look for it using the grid search context
WebElement sidebarContent = findElement(By.className(sideBarContentClass));
// look for the expected column name and click it
sidebarContent.findElement(By.xpath(columnMenuItemXpath)).click();
}
}
And of course what it looks like in action
I have 2 CustomTables with same column names. They are created using expandratio width.
I added resizecolumnlisteners to them so when user column in table1 resize also table2 and vice versa. Problem is when resizing with
List<Values> list;// list of objects in table;
table1.addresizeColumnListener(new resizeColumnListener(){
private void resizeColumn(Event)
{
for(int i=0; i<list.size(); i++)
{
table2.setColumnWidth(list.get(i), table1.getColumnWidth(list.get(i)));
}
}
in table changes only column where listener is fired all others dont change, only when i click any column again all column's widths in table2 is set from table1.
I have too low stackoverflow reputation level to add a comment - so I'm writing this answer.
First of all: Which version of Vaadin do you use? I can't find the function which you used:
table1.addresizeColumnListener(...)
In Vaadin latest documentation is addColumnResizeListener.
And I have doubt why you want change size of all column after notification that one column has been changed? I imagine that after each column size change the Table.ColumnResizeEvent should be emit.
I think the problem you are facing is that when you re-size something in the browser, it will not get sent to the server straight away. The update to the server is sent to the server along with the next update request. That is why you get the delayed update to the UI (if I understood it correctly).
To fix this you can try the code below. Notice the setImmediate(true). This will basically tells Vaadin that you want any update to the table to be sent to the server immediately when the user modifies the table properties.
Try this:
table1.setImmediate(true);
table1.addColumnResizeListener(new ColumnResizeListener(){
#Override
public void columnResize(ColumnResizeEvent event) {
table2.setColumnWidth(event.getPropertyId(), event.getCurrentWidth());
}
});
table2.setImmediate(true);
table2.addColumnResizeListener(new ColumnResizeListener(){
#Override
public void columnResize(ColumnResizeEvent event) {
table1.setColumnWidth(event.getPropertyId(), event.getCurrentWidth());
}
});
I have a simple Table where I present some data using an IndexedContainer as data source.
I want my users to be able to edit some of this data, so I'm using a TableFieldFactory (DefaultFieldFactory) to generate these columns (properties) editable.
Now, if a user is in editing mode (table.setEditable(true)) and have been changing some fields, he or she should be able to discard those changes - for this purpose, I have a "Cancel" button. This "Cancel" button is supposed to discard all changes made in the Table generated fields since the user entered editing mode and then setEditable(false) - now everything should be the way it was before setEditable(true) was called.
This didn't sound very hard, until I tried implementing it.
If I understand the functionality of the Table vs. Container vs. TableFieldFactory correctly, the following happens:
Properties are added to the Container
The Container is set as the Table data source
The User clicks the "Edit Table" button (table.setEditable(true))
The Table calls the TableFieldFactory's overridden createField() method
The createField() method creates the editable fields
The user edits the fields and at the same time the Container gets updated <-- not 100% sure about this one
The user clicks the "Cancel" button <-- HERE is my problem
Question: When I press the "Cancel" button, what should I do discard() on? I can't do table.discard(), because the changes has already taken place. I can't do container.discard() becase, yeah, the Container interface doesn't inherit that method. I can't do field.discard(), because I cannot reach the fields from outside the createField() method.
I have tried different variations of setBuffered, markAsDirty, refreshRowCache and setImmediate without success.
Here's (hopefully all) relevant code:
The table, container and the "Cancel" button (roughly):
table.setContainerDataSource(container);
Button cancel = new Button("Cancel", new Button.ClickListener() {
private static final long serialVersionUID = 1L;
#Override
public void buttonClick(ClickEvent event) {
// table.setImmediate(false); //tried variations of this
// table.refreshRowCache(); //tried variations of this
// table.markAsDirty(); //tried variations of this
// table.setBuffered(true); //tried variations of this
// table.discard(); //tried this, but here it's too late
table.setEditable(false);
}
});
The TableFieldFactory:
table.setTableFieldFactory(new DefaultFieldFactory() {
private static final long serialVersionUID = 1L;
#Override
public Field<?> createField(Container container, Object itemId, Object propertyId, com.vaadin.ui.Component uiContext) {
TextField tField = (TextField) DefaultFieldFactory.get().createField(container, itemId, propertyId, uiContext);
tField.setImmediate(true);
if (propertyId.equals("Foo")) {
// field.setImmediate(true); //tried variations of this
// field.setBuffered(false); //tried variations of this
return tField;
}
else {
tField.setReadOnly(true);
}
return tField;
}
});
By keeping track of the fields created in the factory (and making those fields buffered), you can then Commit/Discard as you wish.
I've created a simple example of buffered table editing in this self-contained GitHub Gist. Select a row and click Edit (or double click). Make changes, and click Save/Hit Enter to commit, or Cancel/Escape to discard.
I've deliberately made only one row-at-a-time editable, because frankly that's the only thing that makes any sense to me. Obviously, that's easily changed.
I'm using SmartGWT 2.5.
I have a main grid that has its expandable rows in order to display subgrids.
I simply want to display the main grid with all its rows expanded from the start.
I tried to add a listener containing the following code:
ListGridRecord[] records = getRecords();
for (ListGridRecord rec : records) {
expandRecord(rec);
}
I tried with DataArrivedHandler and DrawAreaChangedHandler, but I just get javascript errors client-side or only parts of the rows are expanded. How can I fix this?
If you are talking about Grid Grouping, then you can use the following:
grid.setGroupStartOpen(GroupStartOpen.ALL);
listGrid.addDataArrivedHandler(new DataArrivedHandler() {
#Override
public void onDataArrived(DataArrivedEvent event) {
for (ListGridRecord rec : listGrid.getRecords()) {
listGrid.expandRecord(rec);
}
}
});
Should work (worked with previous versions..)
What error do you get?
Ok finally, I've put a timer of 100 ms within each handler.
The issue was that there was a delay before the full creation of the components (what I want to display is quite complex), and so when the handler was called, not everything was in place yet...