After columns in grid reordered I need to update data in my controller to have it in actual order. I can use ngGridEventColumns event but how will I know which table send it (I have multiple tables)?
I get it. After ngGrid initialized it's options populated with gridId which can be compared with id that comes in event:
$scope.gridOptions.gridId === e.targetScope.gridId
Related
I have an issue with Extjs remote filter that I excpect you could help to clarify.
I've created a grid with a remote filter that works great, but if I update the grid info, the filter keeps the previous loaded data.
I've tried everything: store.doDestroy, store.removeAll, even assign a new store to the var with Ex.create, but I didn't succeed.
I've created a Fiddle to try to reproduce my issue:
First load default info (Simpsons)
Then open the 'Hobbie' filter (Simulates a select distinct). You get Jazz, Skate, Beer and Knit.
After that, update the grid data (Switch to Van Houtens)
Finally, try to get Van Houtens hobbies (Videogames, Margaritas and None), but you get Simpsons Hobbies (Jazz, Skate..), cause the filter was previously loaded. (Notice how there was not a loading mask).
Now restart the test skipping step 2 (and 5 to avoid infinite loop XD) and notice how the right hobbies are shown.
I need to 'reset' that previous store load.
Notes:
If I just do a store.load, the request is triggered, but the returned values are not bound to the filter list.
If try to bind the store with this bind:{store:'{filterStore}'}, noting happens
You just need to "rebind" the filters for each column like this:
var grid = this.up('grid');
//Clear the current filters before changing
grid.getPlugins()[0].clearFilters();
var store = grid.getStore();
setStoreFilter(store, 'Van Houten');
//Setting the store filters is not enough
setStoreFilter(filterStore, 'Van Houten');
setStoreFilter(hobbiesStore, 'Van Houten');
//You need to "rebind" the store, it needs a little delay to work properly
setTimeout(function(){ grid.getColumns()[3].filter.bindMenuStore(hobbiesStore); }, 1000);
Here is the updated FIDDLE
I have applied ng-click on an element and within the function, I want to access the DOM element itself. I could do that with :
var element = $document[1].getElementById('<id of the element>');
However, the problem I am facing is that when that element is clicked, it's class changes. But the element I get using the above method is the previous state of the element before the click. How can I get access to the new attributes of an element after the click is performed ?
Update
I am using AngularJS' smart-table for displaying data fetched from backend. The library offers sort functionality but it sorts the data which is already fetched from the DB and is present in front end. I wanted to tweak it so that when I click the sort button, I should be fetching data from the backend and update the rowCollection so that the table refreshes. Now, in order to trigger the API call, I was thinking of using ng-click event on table headers. Also, I need to know whether I need to sort in ascending order or descending order. So, for that, smart-table automatically appends a class sort-ascent or sort-descent to the table header when it is clicked. So, I thought maybe if I can access that, then using the combination of the header column (sort key) and the class (sort order), I can hit the backend API and fetch the appropriate data.
I understand the solution looks more of a hack then a proper way of doing things.
Maybe you should look at this answer : Accessing clicked element in angularjs
You can access by $event.target
<button ng-click="yourSubmit($event)"></button>
Say I have an ng-repeat directive and it displays some data in the table.
When I press a button I send the $http API call to the server and it responds with the new data which is displayed in the same table with a little delay.
I would like ng-repeat to re-render the table view only after this new data has finished loading. But as of now I can see how ng-repeat shows an empty table for a moment and only after that the new data is fetched.
So the question is how does one make Angular update the ng-repeat only on a condition? The event that is fired when the data has finished loading can be an example of such condition.
P. S. I tried prefixing my array with ::, but of no help. It prevented Angular from instant updating the view, but I don't know the way to force the update when I want to.
I have a directive that renders a table in Angular. The table has also sorting by column header. When the page loads everything works fine, but when I load more rows through a service on the table the sorting breaks. The directive initializes a sorting factory with table rows the first time, but after i don't see it updating or being called.
var sorter = new DashboardContactSorterFactory($scope.dashboardContactData),
I update the contacts for the table on my controller when i select a dropdown value.
Any help on how this sorter can be updated? i tried to do a $watch on the data but it did not work.
I have a data store and a grid. I add filters in the store and they work properly as I see the results in my grid. But once I disable all my filters aka clear them from my store I want to view all my rows in the grid without reloading them from a web service which is a kind of heavy task. All data is already fetched from the service and there is no need to reaload it again.
How can I do this? Is there some function in the store?
There already was a similar question with correct answer. In short, you need to call filter method without params after setting remoteFilter to false:
store.remoteFilter = false;
store.clearFilter();
store.remoteFilter = true;
store.filter();
Here is a jsfiddle: http://jsfiddle.net/8Gmtd/
I suspect that your grid's view is not refreshed. Try this:
mygrid.getView().refresh()