I added Details to the Grid compoenent. Each time I click on Grid row - the details expand.
For example I clicked on the first Grid row which have long Details content. Everything fine so far. But when I scroll down to the row #2 and cliked on it, row#1 details collaps, and row#2 details opens. And now on the screen I see the row #7 (because row#1 details were long ).. but I expect to see the row#2. How to properly scroll into the view the row#2?
the following unfortunately doesn't work:
grid.addItemClickListener(e -> {
e.getColumn().scrollIntoView();
});
Another question - is there a way to not automatically collapse row #1 when I click on row #2?
Found the answer in the official documentation https://vaadin.com/docs/latest/components/grid/flow/#enabling-expanding-rows
Implemented in the following way:
grid = new Grid<>();
grid.setDetailsVisibleOnClick(false);
grid.addItemClickListener(e -> {
grid.setDetailsVisible(e.getItem(), !grid.isDetailsVisible((e.getItem())));
});
Related
In Vaadin 14 Flow I have the following code:
Grid grid = new Grid();
setupGrid(grid);
Button compactButton = new Button("Compact",
click -> grid.addThemeVariants(GridVariant.LUMO_COMPACT));
Button normalButton = new Button("Normal",
click -> grid.removeThemeVariants(GridVariant.LUMO_COMPACT));
The issue is when I click on the above buttons only the header of the grid seems to be redrawn when the buttons are clicked, the rows below the header (all the rows of the table) do not appear to be affected. They seem to stay at whatever variant they were initially set at when the screen was initially drawn (other than the header). Is there a way to programmatically adjust the theme of the grid through a button?
You can call grid.getDataProvider().refreshAll(); after changing the theme for it to be applied to all rows.
this.grid.asSingleSelect().addValueChangeListener(event -> {
if (!Objects.isNull(event.getValue())) {
this.editor.showEditor(event.getValue());
}
});
The problem is that editor covers half of grid when it's displayed. How can i scroll to selected row before showing it?
I know that you can this.grid.scrollTo(rowId);, but i can't find a way to get id of currently selected row.
grid#scrollTo
grid.scrollTo(rowForValue, ScrollDestination.START);
In Vaadin 8 you should able to use grid#getSelectedItems
public Set<T> getSelectedItems()
method to get selected items, if your selection mode is single select, it returns set of one item.
My codepen has a jquery-ui sortable on a table. A few problems that I see are: 1) selecting a row to drag adjusts table width during selection, but resumes to the correct table width after it is dropped. 2) The selected table row shifts outside of left border of the table containment. 3) The selected table row loses the table styling. The data scrunches up apparently losing its default padding-right of 10px.
I am running Windows 7 and use chrome browser rev 56.0.2924.87
May someone can answer me the redundant need to post code before one can post?
Putting the bare minimum code here. See pen for full code.
<table class="playlist-table">
I was unable to find this question prior to posting my problems:
jquery UI Sortable with table and tr width
Thanks go to Yaroslav for this helper class that fixed issue#3. The selected table row now preserves styling after being selected.
.ui-sortable-helper {
display: table;
}
And to Keith, his code fixed issues 1) selecting a row to drag adjusts table width during selection. 2) The selected table row shifts outside of left border of the table containment.
$('td, th', '.playlist-table').each(function () {
var cell = $(this);
cell.width(cell.width());
});
Requirement is to provide through Vaadin Table , like row expand. On Click of the more detail which available in Every Column should add the component and show below the row.
I have same like requirement as shown in grid3.js through Sencha, but need a table.
I have a page that's like a discussion where you can make posts and reply to those posts. When there are more than 2 replies, I show the two most recent ones and hide the rest by default. There's a button that will let you expand/collapse the extra replies that uses jQuery's slideToggle function. It's operating on an unordered list of tables, where each table contains the comment along with the user's name and some other info.
Here's the problem: While the tables are actually sliding up or down, the first table in the list looks like its width has been set to auto, so it shrinks. Once it's done sliding, the formatting looks fine; it's just during the actual sliding that this happens. I'm assuming it's being set to 'display:block' or something during the slide but I don't know that for sure.
Is there a way to control what the display type is during the animation?
//this is what happens when you click the 'View all X replies' or 'Hide replies' button
$(".expandOverflow").click(function()
{
$(".overflowlist" + overflowListTarget).slideToggle(16000/*, function(){$(this).css('display', 'inline');}*/);
});