I have a ui-grid project I am trying for the first time. I am trying to add BOTH my data and my gridOptions.
To get the gridOptions to work I need to do
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
To get the $scope.data to work I need to do
<div id="grid1" ui-grid="{data: myData}" class="grid"></div>
How do I get both the gridOptions and myData in the ui-grid div?
Here is my controller:
.controller('ListCtrl', function ($scope, $state, ServerRequest, $localStorage, $sessionStorage, uiGridConstants) {
var vm = this, c = console;
$scope.myData = [
{
"alert": "10",
"firstName": "Jon",
"lastName": "Smith",
"DOB": "09/30/1987",
"sex": "M",
"MI": "A",
"referralReason": "Eye Exam",
"status": "Rescheduled",
"time": "9:00AM",
"homeNum": "416-555-5555",
"cellNum": "905-555-5555",
"notes": "awesome"
},
{
"alert": "9",
"firstName": "Jane",
"lastName": "Doe",
"DOB": "02/22/1927",
"sex": "F",
"MI": "A",
"referralReason": "Diabetic Seizure",
"status": "Rescheduled",
"time": "10:00AM",
"homeNum": "416-555-5555",
"cellNum": "905-555-5555",
"notes": "cool"
},
{
"alert": "6",
"firstName": "James",
"lastName": "Brooke",
"DOB": "02/30/1888",
"sex": "M",
"MI": "F",
"referralReason": "Corneal Crestocopy",
"status": "Rescheduled",
"time": "11:00AM",
"homeNum": "416-555-5555",
"cellNum": "905-555-5555",
"notes": "awesome"
}
];
//this formats the row
$scope.highlightFilteredHeader = function( row, rowRenderIndex, col, colRenderIndex ) {
if( col.filters[0].term ){
return 'header-filtered';
} else {
return '';
}
};
//this code handles the sort functions of each column
$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
columnDefs: [
{
field: 'alert', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'firstName', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'lastName', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'DOB', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'referralReason', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'status', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'time', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'homeNum', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'cellNum', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'MI', headerCellClass: $scope.highlightFilteredHeader
},
{ field: 'sex', filter: {
term: '1',
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }, { value: '3', label: 'unknown'}, { value: '4', label: 'not stated' }, { value: '5', label: 'a really long value that extends things' } ]
},
cellFilter: 'mapGender', headerCellClass: $scope.highlightFilteredHeader },
{
field: 'notes', headerCellClass: $scope.highlightFilteredHeader
},
]
};
})//end of controller
//this is for the gender filter as it has inline options
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
})
}());
to reiterate. if I just use ui-grid="gridOptions, i only see the header row of the grid with the filter options. If I just use ui-grid={data:myData} then I see the entire table, but without the ability to filter - I just want to see both
