I am working on react ag grid and I am using infinite scrolling feature of ag grid.
I want feature where I can delete row and grid will immediately refresh its data.
But "remove row" feature is not available for infinite scrolling.
https://www.ag-grid.com/javascript-grid-infinite-scrolling/#api-inserting-removing-rows
Can anyone please suggest me anyway achieving this?
Thanks
There's a hint right there if you scroll down a bit:
Adding / removing rows directly in the grid for infinite scrolling is
not recommended as it will complicate your application. It will make
your life easier if you update the data on the server and refresh the
block cache.
And then scroll down to the "Insert And Remove Example", there's example code showing how to remove rows (with a mocked up data source):
function removeItem(start, limit) {
// here you would make a call to your data source to remove the rows
allOfTheData.splice(start, limit);
// get fresh data from the source
gridOptions.api.refreshInfiniteCache();
}
You can make a use of the following grid api
this.gridApi.setRowData(this.rowData);
If you are fetching the data from server side, then get the data first and then call the setRowData() method.
Related
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.
I have standard angular Grid which has around 45+ columns. AT a time only 10 are visible on GRID.
to fetch data for remaining 35 columns, you need to scroll right and then only you can fetch data for the same.
Is there a way in protractor where we can extract data via auto scrolling.
Even we faced the same problem when tried to automate angular ui-grid tables. The solution is to use Jquery scrollLeft() and scrollRight() methods to automatically scroll the table.
var uiGridViewPort = $('.ui-grid-header-viewport');
var scrollLeftPixel = 500;
browser.executeScript("$(arguments[0]).scrollLeft( arguments[0].scrollLeft + "+scrollLeftPixel+")", uiGridViewPort.getWebElement());
The above piece of code will scroll the ui-grid table by 500px towards left and column will be automatically added to the right side. But the caveat here is, Columns on the left side will be removed when the table is scrolled.
I have a problem with Angular UI-Grid (http://ui-grid.info/). Grid is implemented in modal window that appears after user clicks button.
Service works that way: User selects data set to prepare and clicks button. After clicking button website sends request to rest service to receive data. After receiving data modal with table is shown. Columns count depends on data requested by user.
The problem is that after user changes columns width and close modal with this table UI-Grid 'remembers' this column width that user left. If then user will select another set of data I am cleaning GridOptions object and fill it once again after data is received. The problem is that row width stays in previous state.
I tried so far:
using apis core.refresh() method - while debugging I can see that this
method fires some event but no effect on my grid,
remove whole DOM node and append it again before receiving response with new data
various different hacks trying to use many methods found inside grid api - no success at all.
I am sorry that I am unable to reproduce this in any fiddle but it would be really difficult I am afraid to match my case.
Any help would be very appreciated. Thanks
ps. it also applies to my another table where user can pin and hide columns. Pinned/hidden columns remains hidden/pinned after receiving brand new data. And it is not cool.
Once you set the data to the grid, you should be calling this -
gridApi.core.notifyDataChange( uiGridConstants.dataChange.ALL)
From the docs,
Notifies us that a data change has occurred, used in the public api
for users to tell us when they've changed data or some other event
that our watches cannot pick up
notifyDataChange tells the framework that one of the options or columnDefs has been changed.
Checkout this thread
Can we have a ExtJs5 Tree Grid Panel which provides below features:
Inifinite Scroll so that rows are rendered with some limit on scroll and not all records at sametime.
On Click of any root node of a particular row (could be 2/3 levels), i can fire a ajax call to populate a grid/form inside the expanded row.
Please provide your expert suggestions in this regard asap.
Thanks !
1. yes you can use infinite scrolling for TreeGrid. Checkout the example
2. If you want expand a row and inside that row you want a form or a grid, then I would say that is nearly impossible. You can only handle this with a custom renderer for the gridpanel and even with this you must create it via Ext.create and render it into the treepanel.
Why dont use something like this: https://fiddle.sencha.com/#fiddle/l26
I have a problem with extjs gridpanel dragdrop.
the scenario is as follows:
The gridpanel is initially rendered by loading a remote store.
Then, the rows are added, updated dynamically.
Drag drop feature is implemented on "render" event of gridpanel.
Drag drop works fine for the originally retrieved rows from the remote store.
but when i try to use drag drop for the newly added or edited rows, it doesn't work.
I am getting the following error on firebug:
Index or size is negative or greater than the allowed amount" code: "1
This is may be because , the newly added rows are not taken as a part of the store . I tried changing the event to "click" but it doesnt work that way..
Please please suggest a solution for this fast.. Its needed urgently.
Thanks,
Shreya.
I know 2 methods for drag and drop in ext, one of them is only for grid rows, the other one that I'm using is with setting dragzones and dropzones. With that method, the only thing you have to do is catch an event which is fired when you add new rows to the grid. In that event, set every new row to be a dragzone (so it can be dragged). That's what I did in a similar situation. Hope this helps..
By the way grid rows don't have a .el (DOM element attached to the Ext component, which is the row in this case). So you'll have to create a div for each row component and then use the initializeDropZone(row[x]), where row[x] is the new added row.