I have 2 grids showing the same data with 2 different sorts:
$scope.aGridOptions = {
data: 'aData',
columnDefs: [
{ displayName: 'Column 1', field: 'col1',},
{ displayName: 'Column2', field: 'col2',}],
sortInfo: {
fields: ['col1'], directions: ['asc']
},
};
$scope.bGridOptions = {
data: 'aData',
columnDefs: [
{ displayName: 'Column 1', field: 'col1',},
{ displayName: 'Column2', field: 'col2',}],
sortInfo: {
fields: ['col1', 'col2'],
directions: ['asc', 'asc']
},
};
As the plunker shows, both sort the same way, only by column 1. Not only that, but ng-grid 2.0.7, trashes by sortInfo object on bGridOptions to shorten the sort to only one column.
http://plnkr.co/edit/riDzDcS3YSJrQrULwL2j?p=preview
I can't seem to find where it is destroying my sort options. How do I get it to sort by 2 columns and not have it trash my sortInfo?
Below is the initial answer I typed, which seemed to work as I played around in your Plunk; however, when I went to make a clean copy of the Plunk it stopped working. It sounds like this issue may be resolved in 2.0.8 though, see Issue #748 and Issue #732.
My initial response, but not working for me now...
Try changing the sortInfo for each grid to look like this:
$scope.aGridOptions.sortInfo = {
fields: ['col1'],
directions: ['asc'],
columns: [0]
};
$scope.bGridOptions.sortInfo = {
fields: ['col1', 'col2'],
directions: ['asc', 'asc'],
columns: [0, 1]
};
Related
I am using ag-grid with angularjs. so in controller I am populating rows of grid with the sql DB source. For this I am making webapi call which returns array of object. Following is the code.
var module = angular.module("crud", ["agGrid"]);
module.controller("crudCtrl", function ($scope, $http) {
var columnDefs = [
{ headerName: "Roll No", field: "RollNo", editable: true },
{ headerName: "Name", field: "Name", editable: true },
{ headerName: "Place", field: "PlaceName", editable: true },
{ headerName: "Birth Date", field: "dob", editable: true }
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: [],
headerHeight: 42,
rowHeight: 32
};
$http.get("api/Student/GetAllStudents").then(function (response) {
$scope.gridOptions.rowData = response.data;
}, function (error) {
console.log('Oops! Something went wrong while saving the data.')
});
});
but when I run the page it is not showing any data. When I debug and see it returns records in response.data as an array of object as array[12]. but it is not showing the same in grid. If instead of response.data I assign my own array similar to what response returns, then it renders the data. So, where is the issue?
We had a similar problem. You may need to use gridOptions.onGridReady
onGridReady: () => {
//setup first yourColumnDefs and yourGridData
//now use the api to set the columnDefs and rowData
this.gridOptions.api.setColumnDefs(yourColumnDefs);
this.gridOptions.api.setRowData(yourGridData);
},
Make sure the columnDefs field matches the fields in your rowData array.
You need to configure rowModelType as 'serverSide' in gridOptions if the data comes from server, otherwise the rowModelType as '' for loading data from local.
I am looking to create some logic for JSON data retrieved from a server request. As you can see from the raw data below, it is received in a particular format.
There is a "balances" entry which, in this case, has 5 different sub-values, of which names can vary dependent upon a given user.
For example:
Barry has 5 bank accounts, each with different balances.
Melissa has 2 bank accounts, each with different balances.
Melissa's bank accounts are different to Barry's bank accounts, and vise versa.
The Balance ID numbers that are assigned, may not necessarily match both Barry and Melissa.
In the Ext JS grid, the column headings which need to be displayed, must adjust to both Barry and Melissa's individual bank account balances.
Barry's JSON Data:
{
"firstName": "Foo",
"lastName": "Bar",
"balances":
{
Natwest: 9,
BankofScotland: 2,
Lloyds: 40,
Halifax: 89,
Lords: 12
},
}
Melissa's JSON Data:
{
"firstName": "Melissa",
"lastName": "Bar",
"balances":
{
DifferentNatwest: 10,
DiffferentBankofScotland: 45
},
}
At the moment, I only have one mapping in my store/model, called "balances" which only takes one value:
Store/Model definitions:
fields: ['firstName', 'lastName', 'balances']
So, obviously the following issue occurs when the grid is generated, as more than one value is being passed:
Results:
The Question:
Does anyone know what I can do to get the columns to dynamically generate in this Ext JS grid, dependant upon the JSON data being received for this balances information?
What you need is to create the grid columns and store for it dynamically.
I don't know if there is some more "ExtJS" way (simpler, automatic creation) but I would do a straightforward solution.
1# Solution - with multiple columns
Get the data, get the JSON object
Based on the JSON object create the new grid columns
Based on the JSON object create the new store with correct records (I
don't think there is model which can have object in it - you need to transofrm it)
Create the grid and add the new store and columns to it.
Here is the code snippet with the most important part:
for (var key in d.balances) {
bankAcountsColumns.push({
xtype: 'gridcolumn',
dataIndex: key,
text: key
});
transformData[key] = d.balances[key];
fields.push(key);
}
var myCustomColumns = [{
xtype: 'gridcolumn',
dataIndex: 'firstName',
text: 'Name'
}, {
xtype: 'gridcolumn',
dataIndex: 'lastName',
text: 'LastName '
}, {
xtype: 'gridcolumn',
text: 'Bank accounts',
columns: bankAcountsColumns
}]
Ext.create('MyApp.view.MyGridPanel', {
renderTo: Ext.getBody(),
columns: myCustomColumns,
store: {
fields: fields,
data: transformData
}
});
Here is working fiddle example:
https://fiddle.sencha.com/#view/editor&fiddle/1l5j
2# Solution - one column
If you want to have only one column with all the balances, you would need templatecolumn
In there I would create template for 5 items (or it can be again created dynamically):
tpl:'{bank1name} {bank1value} {bank2name} {bank2value} ...'
And than you would have to dynamically create the data for the new store.
data:[
{ firstName: "Foo", lastName:"Scott", bank1name: "Natwest", bank1value: "9" ... },
{ firstname: "Dwight", lastName: "Bar", ... bank5name: "" ... }
]
I am looking at using the AngularUI team's new table / grid implementation ui-grid. It looks really great, promising and easy to use.
Tho I have a question / problem I can't find the answer to in the documentation.
I want a column to sort on a different value then the one displayed, how can I achieve that?
I have a rank property ranging from 1 to 10 which I want to sort on but I have a rank_name property I want to be displayed.
The rank property would be the data value and the rank_name would be the display value for the column.
var members = [
{
name: 'Member 1',
rank: 1,
rank_name: 'Grand Admiral'
},
{
name: 'Member 2',
rank: 2,
rank_name: 'Aspirant'
}
]
Take the following list of members as an example, the rank property should not be its own column but be hidden, the rank_name should be visible as its own column.
But if you try and sort members from highest rank to lowest rank it would sort it alphabetically and not by the rank number which is the real rank indicator. Thus placing the Aspirant at the top and not the Grand Admiral.
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
columnDefs: [
{field: 'name'},
{field: 'coords'},
{field: 'rank_name', name: 'rank'},
{field: 'score'},
{field: 'strength'},
{field: 'level'},
{field: 'outposts'},
{field: 'public_note'}
],
data: members
};
Here is the grid options i currently use, but would like to add a sort value for the column definition for rank.
{display_field: 'rank_name', name: 'rank', value_field: 'rank'},
write rankToString filter in your angular module
module.filter('rankToString', function () {
return function(input) {
switch(input) {
case 1:
return 'Grand Admiral';
case 2:
return 'Aspirant';
}
};
}
columnDef for rank, you still sort on rank number but show the string value in viewport. so you can dump rank_name filed.
{
field: 'rank',
sort: {
direction: uiGridConstants.ASC
},
cellFilter: 'rankToString'
}
add below to rank_name columnDef
sort: {
direction: uiGridConstants.ASC
},
sortingAlgorithm: function(a, b) {
var rank = {
'Grand Admiral': 1,
'Aspirant': 2
};
if (rank[a] > rank[b]) {
return 1;
}
if (rank[a] < rank[b]) {
return -1;
}
return 0;
}
I'm trying to render a table view with four columns, 'name', 'birthday', 'gender', 'married', but
a) they columns aren't showing up at all
b) I'm not even sure if I am passing them correctly, because when I console.log table.options the columns property is rendered as "empty":
Object {columns: Array[0], emptyContent: "no entries", onItemClick: function, sortable: false, onSort: null}
I've tried this:
var table = new Backbone.UI.TableView({
model: people,
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" } },
{ title: "Birthday", content: "birthday" } },
{ title: "Married", content: "married" } }
]
});
And this:
var table = new Backbone.UI.TableView({
model: people,
options: {
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" },
{ title: "Birthday", content: "birthday" },
{ title: "Married", content: "married" }
]
}
});
The source code change is adding the options as mu is too short said. Change the initialize method of the Backbone.UI.TableView object to be the following within the source code:
initialize : function(options) { //add parameter
Backbone.UI.CollectionView.prototype.initialize.call(this, arguments);
$(this.el).addClass('table_view');
this._sortState = {reverse : true};
this.options = _.extend({}, this.options, options); //Add this line
}
I'm sure there might be a better place to put this but I'm just going through tutorials to learn some advanced backbone stuff considering the documentation does not match the current version I would shy away from using the library in production as of right now. Hopefully it is fixed in the future.
Here is my select field. We can see that the options are SI,American and Imperial
{
xtype: 'selectfield',
flex: 1,
itemId: 'units_Selector',
maxHeight: 50,
label: 'Units',
options: [
{
text: 'SI',
value: 'SI'
},
{
text: 'American',
value: 'American'
},
{
text: 'Imperial',
value: 'Imperial'
}
],
usePicker: false,
listeners: [
{
fn: function(element, eOpts) {
var unit = Ext.getStore('configstore').last().get('Units');
this.suspendEvents();
this.setValue(unit);
this.resumeEvents();
},
event: 'painted'
}
]
},
Here what I see when using my app...
OUPS seems like SI is displayed has International?
FYI - International was the option's name I gave this option at first. I decide to change it but my app seems to disagree with me on this one ....
Here is a console.log() of my selectfield's options
And here is the funniest part, my code.js file to see that it does save to it correctly from sencha architect
Would anyone know how to repair that problem...?
Answer is dumb...
Seriously, if you have multilanguage app... double check you aint modifing the value field -_-< when updating the language (text field).
found the problem by changing the itemId to something else to see who what changing the value of this select field. (Automaticly created an error and gave me a code line to find it)