When rows are selected by the user, I save which rows are selected in some state. When the grid is rendered, I want those rows to still be selected. I've tried in onModelChanged calling setSelected on all the selected rows. However, this is not performant when lots of rows are selected. Also, there is a visible moment before the rows are selected, which is not ideal.
Is there any way I can pre-select rows before the grid is rendered?
I managed to select a row by using firstDataRendered event.
gridAPI.addEventListener(
"firstDataRendered",
({ api }) => {
// Has to wait until the next tick
setTimeout(() => {
api.getDisplayedRowAtIndex(0).selectThisNode(true);
}, 0);
},
);
Is there any way I can pre-select rows before the grid is rendered?
I assume that you are looking for configuration like editable for columns (its configurable), columns exist after gridReady event, but rows - only after firstRenderer event.
On top of that there are no properties for rows and as far as I know (and also double-checked on doc) there is no settings for that.
I mean you can configure lots of things, but the selection is out of it.
And on their examples, they are using forEach for that.
Yes you can preselect rows like below example.
onGridReady(params) {
this.gridOptions.api.forEachNode(node=> node.rowIndex === 1 ? node.setSelected (true) : node.setSelected(false));
}
You can make condition based on your state.
You can use firstDataRendered. Then loop on each node to set the data as selected. Hope this helps you!
Related
noobie_sapui5_developer
I am trying select single row of sap.ui.table with checkbox.
There are 2 modes for this table
Multi
Single
In multi selection mode there are checkboxes for each row and multiple rows can be selected - but I want only a single row to be selected
In single selection mode, it allows only a row to be selected - but there are no check boxes.
How to achieve a table with checkboxes with only one selectable row?
It is possible with sap.m.table, but my requirement is to make it work with sap.ui.table.
Why I wouldn't recommend doing this:
Checkboxes (selectionMode="MultiToggle") are usually used to signal the user that he's able to select no, one or more options, while radio buttons (selectionMode="Single") tell the user that he's only able to choose one option.
See: material.io, nngroup, uxplanet-radio, uxplanet-checkbox
In your case, I'd recommend using the selectionMode="Single" and either set the selectionBehavior attribute to Row, RowOnly or RowSelector (SelectionBehaviour).
As #jasbir pointed out, you could use the rowSelectionChange event in order to invoke a function that grabs the index (getSelectedIndex) of the row that was just selected. You can then call the setSelectedIndex function on the sap.ui.table.Table and pass it the grabbed index. This will remove previously selected rows and set the currently selected row as selected.
<Table id="yourTableId"
selectionMode="MultiToggle"
rowSelectionChange="onSelectionChange">
</Table>
And in the controller.
onSelectionChange: function(oEvent) {
var oYourTable = this.getView().byId("yourTableId"),
iSelectedIndex = oEvent.getSource().getSelectedIndex();
oYourTable.setSelectedIndex(iSelectedIndex);
}
Note: Since the setSelectedIndex function triggers a rowSelectionChange the above function gets triggered twice (another indicator that this solution isn't intended behaviour).
Check the SAP Fiori Guidelines for the sap.ui.table.Table for further information.
You can use rowSelectionChange event whenever a selection is changed you can unselect other rows and keep the selected one.
Hope this helps
I have a FilterRowHeaderComposite layer where a user can input a filter to filter the displayed rows. I also display a count of the current # of rows that are showing.
I was wondering what the best approach would be to update the displayed row count when someone inputs a filter and the number of rows change. Would it be to capture some particular event, extend the FilterRowHeaderComposite and fire some event, etc?
Thanks!
Update:
This is what I ended up doing after Dirks comment
nattable.addLayerListener(event -> {
if (event instanceof RowStructuralRefreshEvent) {
// Code to update count to user
}
});
The GlazedListsEventLayer fires either a RowStructuralRefreshEvent or a VisualRefreshEvent in the UI thread the NatTable stack upwards if a list change occurs. So you can listen to that. Or you do this by creating a GlazedLists ListEventListener that you register on the FilterList and listen directly to changes on the list itself.
Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click.
If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.
I already tried to find in the documentation any information about it, but cant find nothing.
Here is a example from the documentation.
https://ag-grid.com/javascript-grid-tree/index.php
example image:
We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...
This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.
onRowClicked(params) {
params.node.setExpanded(!params.node.expanded);
}
This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.
You can listen to events on either a row or cell clicked, and expand nodes accordingly.
For example to expand a row based on a click you could do the following:
onRowClicked: (params) => {
// update the node to be expanded
params.node.expanded = true;
// tell the grid to redraw based on state of nodes expanded state
gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}
This should be in the documentation - I'll update it to reflect this information.
In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.
this one works
onRowClicked(params) {
params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
}
I need to re-order rows within ag-grid by using drag-drop. The drag drop methods are simple enough but when the drop occurs there seems no easy way to switch the rows locations.
I attempted a
gridOptions.api.removeItems(selectedNode);
to clear the current and then
gridOptions.api.insertItemsAtIndex(2, savedNode);
but the drop event appeared to re-fire preventing that approach. Plus the insertItems (when ran first) falls over in internal ag-grid looping.
I would rather not re-sort the gridRows manually and then reset the gridRow data which would be somewhat clunky. This seems a common request on most grids so i assume it can be done but have just missed the relevant documentation. Thanks for any help..
K have finally got an Angular 2 method working, though currently I have to switch off sorting and filtering on the grid.
This particular example is relying on row selection being enabled (due to how it is finding some records). Grid dragdrop should be disabled (as that drags the grid visually which sucks) Instead use a processRowPostCreate to set up draggable params at the row level. This sets the dragged option to the row which looks much nicer.
in gridOptions
processRowPostCreate: (params) => {
this.generateRowEvents(params);
},
which calls
private generateRowEvents(params) {
params.eRow.draggable = true;
params.eRow.ondragstart = this.onDrag(event);
params.eRow.ondragover = this.onDragOver(event);
params.eRow.ondrop = this.onDrop(event);
}
I track the source recrord in the onDrag method
var targetRowId: any = $event.target.attributes.row.value;
this.savedDragSourceData = targetRowId;
onDragOver as usual
On drop we have to protect against an infinite loop (ag-grid appears to recall live methods when items are added to the grid hence the ondrop occurs multiple times) and then insert, delete and splice over both the grid and its data source ( I will carry on looking at using the grid to populate the data as opposed to the source data as that would allow source/filter, currently doign that inserts blank rows). An event (in this case) is then emitted to ask the owning component to 'save' the adjusted data.
private onDrop($event) {
if ($event && !this.infiniteLoopCheck) {
if ($event.dataTransfer) {
if (this.enableInternalDragDrop) {
this.infiniteLoopCheck= true;
var draggedRows: any = this.gridRows[this.savedDragSourceData];
// get the destination row
var targetRowId: any = $event.target.offsetParent.attributes.row.value;
// remove from the current location
this.gridOptions.api.removeItems(this.gridOptions.api.getSelectedNodes());
// remove from source Data
this.gridRows.splice(this.savedDragSourceData, 1);
if (draggedRows) {
// insert into specified drop location
this.gridOptions.api.insertItemsAtIndex(targetRowId, [draggedRows]);
// re-add rows to source data..
this.gridRows.splice(targetRowId, 0, checkAdd);
this.saveRequestEvent.emit(this.gridRows);// shout out that a save is needed }
this.v= false;
}
else {
this.onDropEvent.emit($event);
}
}
}
}
NOTE we are wrapping the grid in our own class to allow us to write one set of grid methods and not replicate over the application whenever the grid is used.
I will be refining this over the next few days but as a basic this allows the ag-grid in angular 2 to drag drop rows to sort records.
If you don't find a solution within ag-grid then you can do this by adding one more directive("ngDraggable") and integrate it with ag-grid.
Please find the following working plnkr for this.
https://embed.plnkr.co/qLy0EX/
ngDraggable
Hope this helps..
I want to add a special selection model to the celltable. Basically the function i want to have is to select a row on the table which is located on left side, a corresponding form will pop up on the right side.
I know so many people will use the singleSelectionModel with SelectionChangeHandler.
But there is problem with this method.
For example, if I select row 1 on the table. the form pop up. I close the form by clicking the close-button. Later then, I select the row 1 again, the event is not fired, because it is SelectionChangeHandler. I have to select other row before doing this. This is no good.
So I think there are a few ways to do this:
Make the row deselected right after I select the row.
Use click handler to fire the event ( to pop up the form)
Use other selection model with other selection handler to do this. (I have no ideas about this though)
So my questions are,
Does anyone know what kind of other selection handler I can use for this.
If I use the click handler on celltable, will there be any problem?
I just want to learn more about this. So any ideas will be welcome.
Thanks a lot.
Best Regards.
Use NoSelectionModel. It won't update the table view after the row is selected. That is, even if the same row is selected, the change event is fired.
//Here 'Contact' is the datatype of the record
final NoSelectionModel<Contact> selModel = new NoSelectionModel<Contact>();
selModel.addSelectionChangeHandler(new Handler() {
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Contact clickedObject = selModel.getLastSelectedObject();
GWT.log("Selected " + clickedObject.name);
}
});
table.setSelectionModel(selModel);
I have using cell table in my each project. The better way to just deselect row manually as u mention. and make change css such as selected cell table's row look not changed after selection.