React ag-grid grouping collapses whenever row gets updated - javascript

I am feeding data to ag-grid via redux state. I have a button in each row using which I can update the specific row data. When I update, API is called and newly updated data will come from API and it is updated in redux state which in turn gets updated in Grid.
I am achieving this using the deltaRowDataMode. This deltaRowDataMode will only update specific row data. Data update is working fine. But when I group a column, expand the rows and then update a row data, ag-grid collapsing the grouping, though update is happening fine. For sorting, filtering it is working beautifully.
I tried rememberGroupStateWhenNewData, it is not working. I check many functionalities like expandAll, etc., but none of them suits my condition. Is there any build in functionality or approach which prevents AG-Grid from collapsing the grouping when update happens?
Unfortunately, I am not allowed to share any code anywhere. Sorry about that.
Thank you

below grid options helped me fix this issue:
rememberGroupStateWhenNewData: true,
suppressScrollOnNewData: true,

you have to maintain a immutable data store to keep track of rows so that open group remains open and don't collapse on updating of data.

Related

How to write custom select/checkmark logic for material-table, to include selected rows inside of detail panel nested material-table

I have a material-table component where I am rendering a nested materiel-table in the detail panel of each row. I would like to know if there is a way to include detail panel material-table rows in the functions offered by the package. I am mainly interested in the selection feature for now, but will likely need the same support for other functions like filtering, search, etc...
Now I know that Tree Data allows this since all rows are part of the same table. But I need to be able to do it with using the Detail Panel.
NB: For more clarity, here is a code sandbox I found with the nested table functionality.
So how would one go about adding their custom select function to a material-table, such as to include selected rows inside nested material-tables ?
The way to control the row checked state outside of the table, meaning without using the provided check box inputs, is demonstrated in a demo created after I asked the same question in the material-table-core repo. It's pretty straight forward and should help anyone trying to do the same : https://material-table-core.com/demos/selection/outside-of-table/

Options for table with DataTables fo add, delete, resize and change order for columns

Cay you help me, please?
I have a table use (DataTable plugin) (does not matter with what content) and I need to be able to do some actions on the columns:
Have option to change columns place by dragging column left and right
Add/delete new column (all data for tabel is in angular object, and already available in page)
Have option resize columns
And all of that options should be saved after page refresh.
A already try plug-in for DataTables ColReorderWithResize.js - but it doesn't saved state after refresh and it no option for add/delete column.
Maybe, someone know som plugin or couple for solve all of that my demands for table. Or some way for do it?
Thank you.
Yep, Datatables.js does all of that. The link to which you refer is old. The current reorder plugin is here and it will state save but you have to configure state saving correctly when the table is initialized.
Adding and removing columns can be set up with a button and there are a couple of ways to resize columns, including an initialization option.

DOJO DGRID Collection Sync With INPUTS

I have a dgrid with inputs. My dgrid is in edit mode so users can add rows, edit rows and sort rows. When I look at my collection, it looks like
id: "1"
COLUMN1: "INPUT TYPE="text"...."
COLUMN2: "INPUT TYPE="text"...."
Note: I could not put the greater than and less than above with describing the inputs.
and so on. When I make a change on screen, for one of the inputs, the collection is not updated. So, when I enter a new row or sort the dgrid, all the entered data refreshes back to its original state. I know the reason is because the collection is not updated. Is it possible to update the collection or do I have to write my own code to do so? Please note, I am using a dgrid and NOT an onDemand grid.
Thanks for your help in advance.
Please add some code on how you are initializing your collection and what all mixins are being used for it. As far as I can understand your problem, you need to add the Trackable mixin in your collection. Read its documentation here.
From the documentation:
We can add support for tracking the position of updates by using the Trackable mixin. With the Trackable mixin added to a store, we can call the store's track method to get a collection that includes index information in its delete, add, and update events.
This might be of your help.

javascript dynamic realtime grid

I am currently looking at building a grid that is dynamically updated using web sockets. We are looking at kendo grid as an option but this does not seem to play very well if you want the data displayed to be paginated and things like sorting/filtering/grouping to be done on the server side while keeping the dynamic updates flowing in.
This can be easily achieved when updates are sent for an existing row in the grid but when a new row is added and filtering/grouping/sorting is applied with pagination there is no way of knowing on which page that row belongs too.
Any suggestions/ideas on how this could be done are very welcome.
Thanks

ng-grid not displaying columns

I'm new with AngularJS. Right now, I'm trying to get my ng-grid working in a directive.
I populated my table asynchronously (updating the data and columnDefs properties). It worked fine.
Now when I receive the data, I set a default grouping in code and what I get at launch is :
- The columns and data are not visible but the groups are.
- If I resize my window, the columns and data appear.
I guess it has something to do with refresh, but I couldn't find a way to trigger a refresh of the component on my own.
Maybe you can help :)

Categories