I have an ag-grid instance, which have to be updated continuously, every few seconds, with fresh data by calling a service.
I want the grid to update only the cells with changed data.
Is there any way to achieve this using React?
Thanks in advance.
assuming you bind the grid data correctly, and don't alter the rowBuffer, or otherwise force the grid to render all its data to the DOM (thereby turning off virtualization), you should be fine.
the grid will test for changes in the data and only render what was updated (see the docs on change-detection).
if you still find you need some boost (like when you have real large datasets) you can try batch-transactions.
all of the above is correct regardless of framework; these are core features of ag-grid.
Related
I'm new on reactjs, and I want to create a table to show some data. In the project I'm working, we are using Ag-Grid datagrid.
I already have created it with basic usage, but my question is:
Supose I have 100 rows as enter, how I can display in datagrid just the 10 firsts?
I stil wanna load all data (for filtering, sort, etc), just don't wanna show all by default.
I'm looking at documentation and do some search, but don't find the proper way to do it.
Edit: I already see the pagination options (the default solution provided by documentation), but in my case, at least for now I don't want pagination. Just wanna render the X first rows (the extra will be ommited in table, but have to be loaded in UI, if not, I could use autoHeight).
Thanks in advance.
I'm assuming you are using the Client Side Row Model and not loading data from a Server. In which case, the easiest way to achieve this would be to show the 10 rows, and add more rows (depending on when you want to load them) via Transaction Updates, please see the documentation on this here
you can use pagination:
documentation reference
I use ant design table and I want to fix the height of table and add scroll when data is large
antd table demo
And I want when user scrolls to the bottom of the table, then more data is fetched from the server. But ant design table does not have the onScroll event, I cannot know when and where user scrolls to
I find these people having the same issue as me
antd gihub
and they suggest to use refs and I use this ref solution but it does not work
gist solution
Could you show me how to do it?
This issue should be resolved by two things:
Use scrollToFirstRowOnChange , it keeps position consistent after every re-render.
Add scroll event on the .ant-table-body.
You can use React Lazyload and wrap your components on frontend side. If you need backend lazy loading you can check this example: Node.js + MongoDB example and set the amount of data you need to distribute per page
I'm using ExtJS 5.1.3, I have a grid which is loaded from a store which has a model. The grid is set to use plugin roweditor, so I edit a cell and give it a new value, at this point the red tick is shown that the cell has been changed.
I have a Save button which when clicked gets the store.getModifiedRecords() and passes these off to a ajax request, upon success of this request a few things happen and the last action I do is to load the grid store again which then populates the grid again with the latest version of the data, this is fine and seems to be working as expected.
As this is a multi page application I also have a check when a user navigates away from this page, this is to catch any unsaved grid changes, so basically I get any form from the page and verify the isDirty() value, this is where I am finding my issue, the roweditor is being returned as dirty, this is because some columns have an editor and ExtJS uses form validation on these fields,
I can't understand why the store loading again has not cleared any dirty fields associated with the grid columns? I've tried a number of things such as clearing the store prior to ajax request along with refreshing the grid view, I've tried committing the store changes prior to doing the ajax request but each time I try navigate away from the page after a grid save I pick up the roweditor as having dirty fields :( any help is greatly appreciated.
EDIT: managed to replicate on a simple fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1rmf
The fiddle is basic, to replicate follow these steps;
edit first row age, change age to 13
click Save (i'm forcing the store to load data which has the change we've made)
click 'Check roweditor is Dirty() value' button to see the value of the roweditor isDirty() function, this will return true
if you look at the button handler, you can drill into forms[0].items.items[2] and see that this field has dirty: true which is why isDirty() is returning true.
SOLUTION
As explained in accepted answer, the roweditor is not affected by the store edit/cancel or load in my case. What I did when clicking on 'Save' was to get the grid, then the editor and it's form and called reset() on this so effectively sync everything again.
grid.editingPlugin.getEditor().form.reset();
you can also get access to plugins via grid.getPlugins() which returns an arrary
updated fiddle to show it working
https://fiddle.sencha.com/#view/editor&fiddle/1rmr
During the editing process grid will eventually call loadRecord on the editor's form. However the editor's form is not cleared upon editing success or canceling. That is why your check for dirtyness returns false.
Grid reloading the data is not destroying the editors. It is an optimisation. Editors are created only once and they are destroyed along with the grid.
I'll try to answer regarding to an experience of mine with an all ExtJS desktop application.
By the way looking quickly over your description, you may have to call the Store.sync() method that refreshes your store.
Looking more deeply, there are many way to make CRUD using ExtJs.
I've been made using the "instance" of store but at certain point I had to change it to static calls like MyApp.store.Model.save() etc. That makes you have only one instance of the store avoiding dirty data.
Here's my project folder if you need
https://github.com/guilhermeribeirodev/grizzlyboilerplate/tree/master/src/main/webapp/js/MyApp
I have an Extjs (version 6, classic API) panel with a grid in it. This grid has its own store that is ready to go within initComponent(). It's iterating over those records just fine. The issue is that one column has a custom renderer that relies on another store. This store may or may not be loaded depending on a few different factors. As a result, the grid doesn't render that column correctly. I find myself in a bit of a pickle as to how to deal with that. The basic concept is that the value for that column is just a key that means nothing to the user. This key is looked up in the non-grid store to display the data correctly using the renderer attribute in the grid column. All of the code is executing fine, but it's the issue of having that store loaded, and when it does load, it does not trigger a rerender of that column as it's not the store for the grid itself.
I could load the store synchronously before initComponent() is complete, but that's hardly ideal. I can't tell it to wait for the store to load during the render phase as that will leave the column blank if the store isn't loaded. I need to trigger a rerender of that column somehow or get it to properly wait if the non-grid store isn't loaded. Any ideas?
AFAIK there is no way to tell a grid to rerender a certain column. So you will have to refresh the whole grid:
myGrid.on('afterrender',function(grid) {
externalStore.on('load',function() {
grid.getView().refresh();
});
});
I am using ExtJs 4.1 grid. I have enabled the remoteSort in the store & enabled sortable property for the columns. Everytime I sort\click on column header, a call is made to the server with sort params being passed in the query string.
I want to know if there is a client side event, which gets fired before call is made to the server? I want to check certain condition and based on that I may cancel the call to the server.
Please suggest.
There is a sortChange event that gets fired whenever you sort the grid.
See the documentation here.
I have created a fiddle demo that logs to the console every time the grid is sorted. It should help.
If that doesn't work you'd likely need to attach to the stores beforeSort or the refresh event.
EDIT: As the beforeSort event is not available for ExtJs Version 4, you'd likely need to listen to the refresh event:
Refresh: Fires when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a widget that is using this Store as a Record cache should refresh its view.