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.
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.
AngularJS 1.5> $doCheck after stoped rendering
I'm trying to build a D3 chart inside a AngularJS component. I wan't to update when data changes ( by one way binding ) or when the chart is made bigger via a Button.
As far as I got is using $doCheck (because $onChange is not fired when data is updated or when parent resize happens ). The problem is that $doCheck is fired before the parent is finished rendering ( Container width is the old one ).
If you have any tips it would be great.
Thanks
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 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 have problems with Kendo PanelBar in combination with ng-repeat and modifiying dynamically the datasource!
You can see a small demo here:
http://trykendoui.telerik.com/#IT-SCHMITZ/OrEK/2
After clicking the button "Add new album" you can see, that there was added a new item to the panelbar. Unfornately it is not correctly rendered.
Regards,
Daniel
This cannot work with ng-repeat once the widget is initialized. A workaround would be to use the dataSource argument, but since the PanelBar does not currently support a live data source you need to use k-rebind to rebuild the widget when the data changed.
Here's an example: http://trykendoui.telerik.com/#mishoo/Udep