Develop Reference

ag-grid: Getting list of columns on which sorting is applied

How do I get the list of columns on which sorting is applied, in ag-grid. There is an api (onSortChanged) and an event (sortChanged). But neither is helpful in this scenario.

AG Grid: as of version 24.0.0, getSortModel() is deprecated, sort information is now part of Column State. Use columnApi.getColumnState() instead.

You can use gridApi.getSortModel(), which returns you an array containing all column Ids and sort direction like below.
[
{colId: "country", sort: "asc"},
{colId: "athlete", sort: "asc"}
]

You can check the status of particular grid column - sort status etc using :-
params.columnApi.getColumnState();
The default value is null. "asc" or "desc" are other sort status.

You can find in the following way
const listOfSortModel = gridParams.columnApi.getColumnState().filter(s => s.sort !== null)

SlickGrid: Get the total no of rows after Grouping

I am grouping the slickgrid table, and I want to know the no.of rows after grouping.
I found this solution
grid.getData().getPagingInfo().totalRows
from this question.
But it is not working for the table after grouping.
It returns the total no.of rows of the data not the updated no.of rows after grouping.
Please help me to solve this

Not sure if I understand your question right, but to me it seems that you are confusing Slick objects here. The grid.getData() will return the complete datasource of your grid.
If you take a look at the official SlickGrid example-grouping demo, you will see a grid with grouped set of datas. You can try yourself by opening your favorite browsers Javascript debugger:
dataView.getGroups()
It will return you the corresponding Array of objects from the dataview that contains all groups informations like:
Array [ Object, Object, ... , another 15... ]
You can reach these objects thru specifying the given element key of the returned array:
dataView.getGroups()[0]
Return value of command:
Object {__group: true, level: 0, count: 1, value: 0, title:
"Duration: 0 1, groups: null, groupingKey: "0"}
Now we can see that it has a count property which contains the exact number of rows belong to that group.
So finally by issuing:
dataView.getGroups()[0].count
Will return you:
1
Or by issuing:
dataView.getGroups()[1].count
Will return you:
3
Where both returned count numbers equal with the record numbers you can see in the grid.

Array data appears as undefined?

I have an array declared as so:
$scope.test=['blah', 'blah2'];
And I wanted to use ng-grid as a test to merely display the data. I did the following:
$scope.sourceGridOptionsApprovers = {
plugins: [gridLayoutPlugin],
data : 'test',
columnDefs: [
{field: 'test', displayName: 'Approvers', width:'35%',
cellFilter: 'stringArrayFilter'}
]
};
I wanted to filter the array so I could display the contents of test into one of my columns in ng-grid. I appended the following to my angular controller:
.filter('stringArrayFilter', function(){
return function(myArray) {
//console.log(myArray);
return myArray.join(', ');
};
});
But when I try to display the contents of the array after I filter it, everything shows up as undefined, and I'm thinking it may be the way I passed in the array into the filter, but I'm not entirely sure. Any help would be appreciated.
Here is a plunkr of my example: http://plnkr.co/edit/Ba7hoGFhI7cWWaD3itZx?p=preview

First of all i think ngGrid strictly requires a json object with properties to work on. Without properties the cell cannot be matched to specific data so the data for the cell is 'undefined' => which results in 'undefined' error messages.
So your data need to be like:
$scope.test=[{name: 'blah'}, {name: 'blah2'}];
Secondly the cellfilter is applied per row/cell and not over your whole array. With your example data the single cell data contains no arrays so you will get 'no method join' error messages.
The data should be structured like that with the use of your filter:
$scope.test = [{name: ['blah', 'blah2']}, {name: ['blah3', 'blah4']}];
Here is a full working example:
http://plnkr.co/edit/6EsriMwBNILKzwk3JIR1?p=preview

Making a nested/hierarchical set of tables using D3

I have some data which I want to display in html tables using d3. My data is laid out like this:
var dataset = [
{
'name': 'foo',
'children': [
{
'var1': 'hello',
'var2': 87,
...
},
{...},
{...}
]
},
{
'name': 'bar',
'children': [
{
'var1': 'howdy',
...
},
{...},
]
},
{
// and so on...
}
]
Ultimately, I would like to have something similar in style/functionality to this example, where the user can click on the 'foo' row and see everything in the 'foo' group. But for now I'm struggling to display the data at all.
I've made a little jsfiddle to show where I am now. As you can see, I have so far been unsuccessful at showing any of the actual numbers from my data. Does anyone have any ideas on how I should go about this? Should I restructure dataset? Thank you
== EDIT ==
I must apologise for maybe being vague about what I'm trying to do. Here is a mock up of what I ultimately want to achieve, although I stress that this question is more about binding data than layout/transition stuff.

Here's what I would do: http://jsfiddle.net/j43Nb/
Looking at your data, it seems more appropriate to have one table per parent and one row per child, and not wrap the whole thing in one big table. If you really need one big table, just replace the div.section/h4 bits with another table/tr/td sequence.
The key to understanding how "child" objects become an array of cell data is in this bit at the end:
var cells = rows.selectAll('td')
.data(function(d) {
// return cell data as an array of prop values,
// ordered according to prop names in cols
return cols.map(function(prop) {
return d[prop];
})
});
where the field names in cols are used to build a corresponding array of cell values for each given row (child).

Data Binding to a specific item of an array in Angular

Given a data structure that contains an array of JavaScript objects, how can I bind a certain entry from that array to an input field using Angular?
The data structure looks like this:
$scope.data = {
name: 'Foo Bar',
fields: [
{field: "F1", value: "1F"},
{field: "F2", value: "2F"},
{field: "F3", value: "3F"}
]
};
The fields array contains several instances of the given structure, with each entry having both a field attribute and a value attribute.
How can I bind an input control to the value field attribute of the array entry with the field F1?
<input ng-model="???"/>
I know that I could bind all fields using an ng-repeat, but that's not what I want. The above data is just an example from a much larger list of fields, where I only want to bind a pre-defined subset of fields to controls on the screen. The subset is not based on the attributes in the array entries, but is known at design time of the page.
So for the above example, I would try to bind F1 to one input on the page, and F2 to another one. F3 would not be bound to a control.
I've seen examples where a function was used in the ng-model, but it doesn't seem to work with Angular 1.1.0.
Is there another clever way to bind the input field to a specific array entry?
Here's a fiddle that has an example, but does not work since it's trying to use function in the ng-model attribute: http://jsfiddle.net/nwinkler/cbnAU/4/
Update
Based on the recommendation below, this is what it should look like: http://jsfiddle.net/nwinkler/cbnAU/7/

I personally would reorganize the array in a way that field property of an entry of the array become the identifier of the object. Mhhh that sentence may sound strange. What I mean is the following:
$scope.data = {
name: 'F1',
fields: {
F1: {
value: "1F"
},
F2: {
value: "2F"
}
}
};
If you want to bind a the value dynamically and it's an easy and quick way to achieve it.
Here is your fiddle modified so that it words. http://jsfiddle.net/RZFm6/
I hope that helps

You can use an array of objects, just not an array of strings.
HTML:
<div ng-repeat="field in data.fields">
<input ng-model="field.val"/>
</div>
JS:
$scope.data = {
name: 'F1',
fields: [
{ val: "v1" },
{ val: "v2" }
]
};
I've updated #Flek's fiddle here: http://jsfiddle.net/RZFm6/6/
Edit: Sorry just read your question properly, you can still use an array with:
<label>Bound to F1:</label>
<input ng-model="data.fields[0].value"/>
though maybe stop and think. Is there going to be variable number of fields ? or are you making a predetermined number of fields ? Use an array in the former and an object for the latter.

One way to do it is to simply add the necessary references to the scope, like this:
$scope.fieldF1 = fieldValue('F1');
$scope.fieldF2 = fieldValue('F2');
And then use those references:
<input ng-model="fieldF1.value"/>
<input ng-model="fieldF2.value"/>
Fiddle: http://jsfiddle.net/cbnAU/5/
Note: I'm assuming that $scope.data is static, but if it happens to be dynamic you can always watch for changes on it and recalculate the references...