I am trying to programmatically update the gridOptions.sortInfo on the Angular grid ng-grid, but I can't get it working.
I have both "name" and "age" columns. I am initially setting the sort on the "name" column but would like load some new data and then update it to sort on "age". (Programmatically, not just by clicking the column header).
I can set the $scope.gridOptions.sortInfo to a new value, but the grid does not reflect this. What is the correct way to update the gridOptions.sortInfo ?
Please see plunker:
http://plnkr.co/edit/JBYnrwLAIwFSKS6uSAND?p=preview
EDIT: Please note I would like to be able to update the sort direction i.e. ascending/descending as well as the actual column to sort on.
Many thanks
Yes, according to source code (line number 128 here link) you should be able to just do like this:
$scope.updateSortInfo = function() {
$scope.gridOptions.sortBy('name');
}
The plunker shows that it works. I forked it here.
Here's another version with sortColumn passed in from a text box: plunker.
Turns out if you call $scope.gridOptions.sortBy() twice on the same column, it will sort in descending order.
Look at this: http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef
Search for this text:
sort
An object of sort information, attributes are:
I needed to sort by the id column at the beginning in desc order and that did the trick for me:
var columnsDef = [
{name:'id',width:50,sort: {
direction: 'desc',
priority: 0
}},
{name:'title',width:350},
{name:'address'},
{name:'date',width:150},
{name:'description',minWidth:450}
];
$scope.theGrid.columnDefs = columnsDef;
Related
Thanks you at first!
I encountered a problem, when I load a grid and moveLast(),but I can not select the last row,here is my code:
var store = this.getMyOwnStoreStore().load({
scope : this,
callback : function(){
Ext.getCmp("pagingtoolbarId").moveLast();
Ext.getCmp("gridId").getSelectionModel().select(theLastRowNumber -1);
}
})
But when i run the code,I can not get the record of the last page!!!
The select method of selectionModel actually expects record(s) - http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.selection.Model-method-select.
For this to work use the following - Ext.getCmp("gridId").getSelectionModel().select(gridStore.getAt(gridStore.getCount()-1));
inQstvJS's answer helped me figure this out as I was placing a number in "select(1)" thinking that "select" just wanted the index of an item in the grid. Not realizing that it wants the index of the store item. Thanks
id = grid.config.store.data.items.length;
grid.getSelectionModel().select(grid.store.getAt(id));
I am using ui-grid version v3.0.0-rc.21-1d9f81f - 2015-05-01 and trying to sort a given grid according to a given column name. I cannot sort it externally (from javascript code), only by defining it and by clicking on the grid's headers.
Is it possible in this version to sort the grid's data according to the grid's column name via javascript code?
If you want to sort it just based on a column/field before the grid is loaded, you can do so just by using the angular orderBy filter whenever your data is retrieved from the server.
$filter('orderBy')(array, expression, reverse)
Or If you wanted to sort the grid at the initial state, you can define it in the columnDef with the sort property
{
field: 'gender',
sort: {
direction: uiGridConstants.ASC,
priority: 0,
}
}
Take a look at this plnkr http://plnkr.co/edit/4qQgi76RQpYxbRgbcByX?p=preview
I am trying to use angular-UI pagination for a table, where I am splicing the array where the page intersects the array. However I am not clear how to handle the fact that the array of objects is being added to and deleted to from within the table itself.
Also, I am sorting through a filter by the name property of an object in my ng-repeat. I expect what's is item[0] in my model array, does not correlate with the first item being displayed in the table via ng-repeat...I could be wrong.
I am just looking for advice on how to implement paging when the ng-repeat sorts the list, and the collection size is changing all the time.
Regards
I
you can try to use multiple filters at once for example:
ng-repeat="item in items | myFilter | limitTo:pageNumber*perPage | limitTo: -perPage"
This allow you to use your filter first on each collection/model change, then it show last "perPage" records dependig of "pageNumber".
Please see that demo : http://plnkr.co/edit/3nqRHUySsJZwpKQiMMTm?p=preview
just set watch to yourCollection.length
ie:
$scope.$watch('yourCollection.length', function(){
$scope.bigTotalItems = $scope.yourCollection.length;
}
)
I am maintaining a site that allows users to create a profile of sorts that will allow them to broadcast activities to a feed. I implement ng-grid to keep track of all the profiles that are created, and have created two buttons that allow users to create/edit these profiles. My only problem right now is, when users select a row on the grid and attempt to edit that specific row, the drop-down menu is not auto-populated with the data from ngModel.
This is the part of the form I am having trouble with:
<select ng-model="source.canSendTo" ng-options="value.name for value in sourceCanSendTo" data-style="btn" bs-select></select>
And within the controller, I have sourceCanSendTo defined as:
$scope.sourceCanSendTo = [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ];
On row selection, I simply set source = the selected item, and console.logs show that all the data is there. The other parts of the form are being populated properly (mainly s), and console.log($scope.source.canSendTo) shows that the original data is there, it's just that select is defaulted to being blank...how would I go about trying to pre-select certain elements on the drop-down select I currently have?
For example, if the profile has 'abc', 'bcd' selected, how can I make it so that when I edit that profile, the drop down box shows 'abc,bcd' instead of just "Nothing Selected"?
Edit: I previously responded to a comment inquiring about bs-select, saying that it simply controlled some CSS elements of the drop down box - seems like this is completely incorrect after a quick google search when everything else led to dead ends. Does anyone have any idea how to properly initialize the model with data so that when I preload my form, the 'can send to' drop down select actually has the selected options selected, as opposed to saying "Nothing Selected"? Thanks in advance for all help!
As you are binding source.canSendTo to the name (value.name) of sourceCanSendTo then you just need to initially have an structure binding the names which had been saved, something like this:
source.canSendTo = ['abc', 'bcd']; //And all the selected values
So you need to construct your source.canSendTo property to this structure.
PS: If you show how you bring your data from the server, I can help you to construct the source.canSendTo property.
$scope.canSendTo must be initialized with a reference to the selected option.
var initialSelection = 0;
$scope.source = { canSendTo : [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ] };
$scope.canSendTo = $scope.source.canSendTo[initialSelection];
Finally found out what was wrong with my code - seems like the data being stored in the model wasn't the same as what was in ngOptions, played around a bit with ngOptions and managed to get something that works. Working snippet of code:
<select ng-model="sendTo.name" ng-option="value.name as value.name for value in sourceCanSendTo" data-style="btn" multiple bs-select>
(Realized that the variable being used for ngModel was a fairly ambiguous in terms of naming convention, changed it)
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page