I am working on a trading application and am using Angularjs and ui-grid for data blotter. I have to update my grid rows with high frequency streaming data coming from a callback of message queue(callback will not trigger digest cycle of its own). On each update, I have to update few properties of one of the rendered grid row. After each update, I cannot call $scope.$digest, as then my UI will be just busy with the digest cycles. How do I tell ui-grid to just update a specific row. If my understanding is correct, UI-Grid maintains an isolated scope for each row. I tried calling notifyDataChange API with dataChange.ROW , but it does not work. (Also, the notifyDataChange api refreshes the entire grid).
Any advice ?
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'm using the Angularjs version 1 edition of the ui-grid. I set the rows to NOT automatically save, allowing me to use a button click to fire off an angularjs call that uses $http to update the database.
If the user clicks the Cancel Update button, I instead want to reset the row to its original data and state. I have code that uses the setRowsClean(dataRows) and I also can pass in the row object and set row.isDirty = false.
I am looking for a proven technique that will let me reset the row's data and its state to be the same as it was prior to the cancelled changes. Rebinding the grid is overkill and causes the grid to collapse. Does anyone have something working along these lines?
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
I am using angular datatables. I have used the ng-repeat to to render all the values on DOM.
Let say I am using products as my primary data collection and dummy products as secondary. I am using my primary data collection in ng-repeat.
I did some operations operation dummy data collection and assign the result set to the Primary data collection.
The datatable is reflected in the DOM but it causes screen flicker which looks bad.
Does any one know Why this is happening? Is this the Datatables releated issue or angularjs ng-repeat issue?
NOTE: My data collection has volume size of about 200+ records.
Add this class="table dataTable" to your base table.
Still this will flicker a bit.
Problem here is the datatable is rewriting the dom, first making your default table visible and then binding the datatable ui.
During this time phase the default table you have set appears for a while and then the datatables plugin changes it to its UI.
You just need to replicate your table to look like the datatable ui plugin.
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.