I am using Dgrid with pagination extension to display Data. For the same grid I have implemented grid's DnD. So I can move rows up and down and rearrange row index using it.
But now, as the number of rows have increased, the grid is divided into more than 5 pages. In this case, how can I move the rows from my 5th page to 1st page using DnD?
One possibility I see is by changing the page on hover of pagination bar at bottom. As per the docs there is one method called as gotoPage which switches the page programmatically. But, how to capture grid pagination hover event? And how to get page number on hover so that can be passed to gotoPage method above.
Solved this using Dgrid events on dom nodes. So basically, we can attach event for pages like below
grid.on('.dgrid-footer .dgrid-pagination .dgrid-navigation .dgrid-page-link:mouseover',function(event){
var pageindex = event.target.textContent.trim();
if(!isNaN(pageindex)){
grid.gotoPage(pageindex);
}
})
This will give control to dragged page number and then you can handle the rest afterward.
Related
i am working on an app that that is using aggrid.
data is received from server, stored into state, and fed to the aggrid [rowData]="rowData"
separate task receives the settings of my data, like: column widths, row expanded, row selected...
i can apply column widths on initial data, and later listen for events when column is resized and save that back,
but for the expanded, no such thing.
i have onFirstDataRendered and there i iterate and set the expanded node, but i want to this before, in init like, because this fires the onRowGroupOpened(event: RowGroupOpenedEvent) every time node is expanded, and i cant distinguish programmatically expand from user click.
can anyone suggest solution for expanding the rows in initial data prep? or distinguish expand event programmatically vs user click?
is there any other way to expand node except node.setExpanded ?
You can use groupDefaultExpanded property to set the default group expansion settings at the start:
0: Don't expand
1: Expand all first level groups
2: Expand up to second level groups
-1: Expand all groups by default (what you need)
Live Demo
Are you using ag-Grid on its own or with AdapTable?
If the latter then that has the ability to set which rows should be expanded when app launches - and will also automatically save any expanded rows for next reload.
I think its AdapTable rather than ag-Grid which is doing this but I'm not 100% sure.
See demo at https://demo.adaptabletools.com/layout/aggridgroupedlayoutdemo
SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.
I have a component that renders a reactstrap table and within the render I have map function of a state of clients that gets rendered as table rows.
Within each table row there is a component(separate button component that just open up a modal) that gets rendered within the map function.I want to use the onMouseEnter to determine which row I am currently at(with cursor) and when I click on the button component.Now the modal component just opens up the same for all rows.
The idea is that lets say I load 4 clients and map through them,when I do I render a table row for each client within the map.Along with this map function I also add a button component(separate component) as a td tag for each tr that gets rendered.
I want to use onMouseEnter to know which one I am at in the row.
So when mouse is hovering over second row(position 1 in clients array) I want to be able to know at which row I am at.
Then I want to pass this row index(which I need to get somehow?) to the button component(same component just rendered 4 times for each client row) and when button component renders I can get this index from props.
.....Please know I am a big react noob just trying to figure this out
I am using a list/array to render the table depending from data I get from a API so it can be 6 clients or a 100 you know?
Hahah just asking for advise
Thanks
React has an abstraction to vanilla DOM events called Synthetic events. Lucky for you, the Synthetic event you're looking for has the same name, "onMouseEnter".
<span onMouseEnter={(event)=>console.log('ENTERED!')} />
You can get read up on most of them here
https://reactjs.org/docs/events.html
Whenever I call setRowData() to add rows that exceed the number of rows that can be displayed by the grid div unless scrolling, some rows are not added to the DOM. Even if I scroll to the bottom of the grid, they don't show up.
If I resize the grid, these missing rows magically appear.
I notice the row count and the getRenderedNodes() count are not the same.
I tried calling refreshView() from a setTimeout but it didn't work.
Is there an option to force rendering on all row? or at least to make them show up when I scroll?
I've had encountered a similar issues with adding new rows after the grid has already rendered. Instead of calling setRowData() try calling addItems([..]) instead where the array passed to addItems are the new rows that you're wanting to add. For whatever reason, this isn't in the grid api documentation, but you can read more about it at https://www.ag-grid.com/javascript-grid-insert-remove/#gsc.tab=0
With that function by default, it won't automatically refresh. Try leaving the refresh as default at first and then refresh if the issue persists.
Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.