I have been struggling to see this behavior for past few weeks where the angular JS model has been updated but the UI doesnt get reflected in the multi select box.
Absolutely no errors and the data model has all the values it needed . I tried reloading controller and also doing a refresh inside controller to take changes.
tried $scope.$apply() as well and its of no use. If anyone from angularjs team is ready to take a look, we can discuss over call and i can share more about the code. Unfortunately due to sensitive information i cannot copy paste the code here.
editing main question:
example: I have an object something like this. var clusters = { available: [], selected: [], } and have 2 multiselect controls. One will show all the available ones and when user selects one it will be pushed into selected list to display in second multi select control . for the first time when page loads, if the user already selected anything, I will get this data from db. and try to display to the user what he selected previously. This is where , angularjs doesnt bind the values in the selected list when shown. The UI doesnt reflect i even though i successfully added the list in the array(selected).
Related
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
Parts of a view of my Angular app are not rendered correctly - sometimes.
The behaviour is very strange, because this happens only sometimes and for certain items only.
My app consists of a service, a controller and a view. The service communicates with a backend and provides data for the controller. The controller is watching for certain data. With data-binding the values are shown in the view.
In general the shown values are correctly - I can see it in the logs. But sometimes when the a value has changed, not all depended view elements get updated - but some of them.
I mean a DIV shows the text of a certain value with ng-bind.
Moreover another DIV is visible or hidden with ng-if and depends on the same value of the same controller.
Sometimes I have the behaviour that the visibility of the button is switch correctly but the text of the other DIV does not (shows the old text).
It switches only if I scroll the view (or touch it on mobile device). Is this the next digest cycle maybe?
Otherwhile everything is rendered complete correctly!
I have already tried it with a directive and without one, with the 'controllerAs' syntax and without, with Angular 1.2 and 1.3 - but everytime the same result.
Has anyone further ideas to this behaviour?
Can this be a rendering problem?
We are building a larger Qooxdoo application, and we have the following problem.
We try to bind a SelectBox (qx.ui.form.SelectBox) with a remote model to a form controller (qx.ui.form.Form) with property binding.
The form controller has also a remote model.
The form and the list are connected over a list controller (qx.data.controller.List).
The problem now are race conditions between this two models.
Both models are connected to a REST interface.
Is there a solution like a virtual selectbox, or a alternative?
UPDATE:
The main problem is the default selection of the select box when editing data in the form.
The user clicks on a button and the form gets opened in a new window. The form contents will be loaded via REST. In the form there is a select box containing all countries of the world (as example) loaded via REST, and Germany should be selected as default. This default selection is only possible, if all counties are already loaded via REST. Otherwise the first element in the list is selected.
Here is some example source code, it's not working, but is a good starting point: http://tinyurl.com/oqsfkrc
Virtual select box does not help you much because it's only virtual when it comes to rendering. So the data binding and the race conditions should be the same no matter which select box you choose.
I don't get the root of your problem so I can't give you a precise advice how to handle your race condition. Is it possible to load / set the models sequentially to break the race condition?
In my project I'm using Angular UI's ui-router for nested views. My layout (on a particular record page) looks like this:
On first load everything works great, the validation works, the form saves changes to the model etc. The problem arises when you make changes to the form leaving it in an invalid state, then browse to another sub nav link, and then go back again. At this point the previous loaded form had changed the model inherited from the parent view making it invalid, but the new form has loaded with that model believing all its fields to be pristine, and so the form is now in a valid state allowing the user to bypass clientside validation. I can't seem to make the form wake up and validate automatically again unless the user edits a field.
One way I can fix this is to load the model in the nested views controller, so when you click back to the form again from sub nav it loads a fresh model, but I don't feel that this is the right solution especially since on first load both the parent and sub view will both perform a GET for the model.
I'm a little stuck on this one, any help would be much appreciated.
The solution I've come up with for now is to copy the resource in the sub view controller:
$scope.parent.$watch('record', function(record) {
if (!record) return;
$scope.record = angular.copy(record);
}
This means each time the sub view is loaded it gets an updated copy from the parent so it doesn't persist the invalid changes.
It would be better to just nudge the validation to kick in properly but I can't see a way to do that currently.