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.
Related
I've made an app (for iOS) that shows a ListView with product information on it.
On the left of the row, I have a button to add the product to the orderlist. However when I click the button, the entire row changes color. I don't want this, I want the row to stay the same when it is clicked.
I've tried to set the allowSelection property to 'false', but then the 'itemclick' event doesn't fire anymore, so that's not the solution.
I also tried to set the selectedBackgroundColor property to 'transparent', but this still changed the color of the row when the button is clicked.
Is there any easy solution to this? Thanks.
Use "selectionStyle" property of the cell class, example shown below,
cell.selectionStyle = .none
By this usage the selection will occur but it wont change the color on highlighting(selecting state) of the cell.
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());
});
I want to hide the + icon in the far left column and add another icon.
When the user clicks the new Icon I want to programatically expand that specific row.
I see there is gridApi.expandable.expandAllRows();
Is there a way to expand just one row?
You can use toggleRowExpansion function, add this attribute to the desired element which will be trigger this toggle:
ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"
If all you want is to change the default plus icon to a different icon, you can simply override the template for the expandableRowHeader.
$templateCache.put('ui-grid/expandableRowHeader',
"<div class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" ng-click=\"grid.api.expandable.toggleRowExpansion(row.entity)\"></i></div></div>"
);
You can change the ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" and change them to a different icon of your choice.
My question is very simple but I really didn't find any solution here.
I have a Table setSelectable(true), setMultiselect(false), setImmediate(true).
It works fine by first click and moving through the table using arrows.
But if I click again to the row already having been selected,
then it becomes unselected. How to prevent it?
I'd like to have kept just one row always selected.
As from the Vaadin Book here:
If the user clicks on an already selected item, the selection will deselected and the table property will have null value. You can disable this behaviour by setting setNullSelectionAllowed(false) for the table.
So:
table.setNullSelectionAllowed(false);
I need a function to show some action items in each row of a grid when user tap/ touch the row. As shown in image attached. At one time only one rows action items should be visible.
Any help would be appreciated.
Regards,
Era
You are using UITableView only right. Then you can simply get the index of that row and can change the cell for that index.