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.
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 just wondering if they have provided a options to make table columns show and hide as user preference and save it in table state and load it back when page refreshes.
ctrl.tableState()
upper code only brings the pagination,sorting and search objects as in current table state. How can i implement showing and hide table columns like in jquery Datatable and load it back from the table state object?
Decided to use Jquery Data Table instead with AngularJS ng-repeat
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 ?
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();
});
});
Scenario:Update the angular kendo grid on click of various buttons.Able to update the grid with new service returned values.
Issue: Angular kendo grid flickers for a second while refreshing.
HTML Structure: Tried with & without k-ng-delay
<div id="alertGrid" kendo-grid k-options="alertGridOptions"
k-rebind="alertGridOptions" k-ng-delay="alertGridOptions.dataSource">
</div>
The function that is called on click of refresh buttons
$scope.renderAlertGrid=function(){
$scope.alertDataSource.read();
//$('#alertGrid').data('kendoGrid').refresh();
};
Tried to use only refresh, it dint worked out. No impact in using along with read() as well.
Everything is working fine,just that UI becomes little awkward during refresh due to that 1 sec flicker and refresh.
Kindly help out
Thanks
Your problem is that your data source is declared inside your options object and you're binding to your data by referencing your options object using k-options and then you are using k-rebind to watch for changes on your options object. So every time your data source changes in your options object the entire grid will re-render and all your scroll etc will reset because k-rebind re-renders every time a change in your options object is detected.
You need to remove k-rebind and bind to your data source separately using the k-data-source attribute. Then the rows in your grid will update when the data changes in your data source without re-rendering the entire grid.
k-rebind is used when the options object has to be changed and the entire widget re-rendered. For example switching a bar chart to a pie chart. That requires a full re-render. k-rebind is a bit of a hack and should be avoided imo.