We Keep Coding

Multiple data sources for multiple ng-grid in a single view?

If I have multiple data sources for multiple ng-grid (not ui-grid), how would I assign them to each ng-grid configs?
ex:
$scope.myData['set1'] = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.myData['set2'] = [{name: "Moroni", age: 50}];
I want to do something along the lines of:
var gridOptions1 = {
data: ('myData[' + 'set1' + ']'),
columnDefs: [
{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true,
selectedItems: $scope.selected
};
var gridOptions2 = {
data: ('myData[' + 'set2' + ']'),
columnDefs: [
{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false,
selectedItems: $scope.selected
};
The reason I want to do this is because I have a dynamic form which may have a variable amount of ng-grids (based on useer input), so I need to make sure each grid has to correct data within it.

I think I figured out my error. set1 and set2 are supposed to be surrounded by double quotes within the single quotes.

Using select filter in ngTable

I was trying this ngTable example of filtering columns using select values.
HTML code (table part)
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'select'}" filter-data="names" sortable="'name'">{{ row.name }}</td>
<td data-title="'Age'" filter="{age: 'text'}" sortable="'age'">{{ row.age }}</td>
</tr>
</tbody>
</table>
Javascript code
var app = angular.module('ngTableApp', ['ngTable'])
.controller('selectFilterController', function($scope, $filter, $q, NgTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
$scope.names = ['Moroni', 'Enos', 'Nephi'];
$scope.tableParams = new NgTableParams({page: 1, count: 10}, {dataset: data});
})
When I run this code plunker, the select values for column 'Name' are blank.
The example says
The select filter will fetch its data by calling the fetchData function defined for the column.
But, there is no fetchData function called in the code in that example. I am confused as what is the issue here?

From example I figured out that the format used by ng-table for filter-data attribute in HTML(for select values) is array of objects in the following form.
$scope.names = [{id: "", title: ""}, {id: 'Moroni', title: 'Moroni'}, {id: 'Enos', title: 'Enos'}, {id: 'Nephi', title: 'Nephi'}];
Updated plunker.

Should be written like:
$scope.names = [{"id": "", "title": ""}, {"id": "Moroni", "title": "Moroni"}];

Improper resize behavior of ui-grid in a modal window

ui-grid is not resizing correctly within a modal window. Am I doing something wrong here?
http://plnkr.co/edit/gte3RmDem5dLAa33h7Kr?p=preview
$scope.myData = [];
$scope.gridOptions = {
data: 'myData',
rowHeight: 40,
columnDefs: [
{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age'},
{field:'gender', displayName:'Gender'} ,
{field:'ssn', displayName:'SSN'} ,
{field:'workplace', displayName:'Workplace'}
]
};
$timeout(function(){
$scope.myData = [
{name: "Moroni", age: 50, gender:"male", ssn:123, workplace:"foo"},
{name: "Tiancum", age: 43, gender:"female", ssn:123, workplace:"foo"},
{name: "Jacob", age: 27, gender:"male", ssn:123, workplace:"foo"}
];
},0)
Any help is appreciated.
Thanks

I think your problem is more related to css than to angular.
Try to style the tables of the modal to have 100% width of the modal container, that should solve it

Explanation of an example of NG -Table

Someone can explain this example
Plunker NG-Table
In the HTML, there is -->
<tbody ng-repeat="group in $groups">
But in the js there is no why ?
$groups

The ngTable module defines the $scope.$groups when the groupBy ngTableParameter is specified (you can see it in the github source code here ).
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
groupBy: 'role', // << ----- grouping parameter
total: data.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')(data, $scope.tableParams.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
This is the $groups created on the $scope by ngTable, for the data in the plunker example.
$scope.$groups = [
{
value: 'Administrator',
data: [
{name: "Moroni", age: 50, role: 'Administrator'},
{name: "Tiancum", age: 43, role: 'Administrator'},
{name: "Jacob", age: 27, role: 'Administrator'}
]
},
{
value: 'Moderator',
data: [
{name: "Nephi", age: 29, role: 'Moderator'},
{name: "Nephi", age: 29, role: 'Moderator'},
{name: "Tiancum", age: 43, role: 'Moderator'},
{name: "Enos", age: 34, role: 'Moderator'}
]
},
{
value: 'User',
data: [
{name: "Enos", age: 34, role: 'User'},
{name: "Tiancum", age: 43, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Enos", age: 34, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Nephi", age: 29, role: 'User'},
{name: "Tiancum", age: 43, role: 'User'},
{name: "Jacob", age: 27, role: 'User'},
{name: "Nephi", age: 29, role: 'User'},
{name: "Enos", age: 34, role: 'User'}
]
}
]

AngularJs Ng-Grid : Multiproperty binding with filter

I have Json object:
[
{name: "Moroni", age: 50, dob: 30051998, tob: 1005},
{name: "Tiancum", age: 43, dob: 30051987, tob: 2205},
{name: "Jacob", age: 27, dob: 30051956, tob: 0605},
{name: "Nephi", age: 29, dob: 30051978, tob: 1605},
{name: "Enos", age: 34, dob: 30051965, tob: 1305}
]
Now I want to create one ng-grid, in which there will be one column representing the date and time of birth for each person. Since the data is not properly formatted. So, we want a filter.
var gridOptions1 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"},
{ field:"dob+tob", displayName: "Date & Time"}
],
selectedItems: $scope.selected
};
Please help. Plnkr.

I would separate your initial JSON server data from the data that you are going to push into the ng-grid.
So, before setting your data source for grid2, I would create your view model:
$scope.grid2Data = [];
for(var i = 0; i < $scope.myData.length; i++) {
$scope.grid2Data.push({
name: $scope.myData[i].name,
age: $scope.myData[i].age,
fullDate: $scope.myData[i].dob.toString() + $scope.myData[i].tob.toString()
})
}
And then configure the columns for grid2 so that you are using the cellFilter property:
var gridOptions2 = {
data: 'grid2Data',
columnDefs: [
{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"},
{ field:"fullDate", displayName: "Date & Time", cellFilter:"formatDate:'ddMMyyyyHHmm':'HH:mm MM/dd'"}],
multiSelect: false,
selectedItems: $scope.selected
};
Here is a plunker showing the technique in action.
This works for all but one date (the one at position 3). That date doesn't seem to format correctly with your filter.