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

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.

Related

Create an array of objects?

arr = [
men: {name: "john", age:"30"},{name: "john2", age:"31"},
women: {name: "kim", age:"10"},{name: "karen", age:"33"}
]
I'm looking to create an array with properties men and women, and each of those will have a bunch of objects. How can I do that in JS?
First create object then array in it, so like this you can manage your data.
let arr = {
men: [
{name: 'john', age: 30},
{name: 'john2', age:33}
],
women: [
{name: 'kim', age: 30},
{name: 'kim2', age:33}
],
}
console.log( arr.men[0].name );
just extend the value in the men or women array.
Thanks!
You need an object in order to achieve this. After this, you will be able to manage the people object just anyhow you want.
var people = {
men: [
{name: "man1", age: 30},
{name: "man2", age: 31},
],
women: [
{name: "woman1", age: 30},
{name: "woman2", age: 31},
]
}
// Add to men
people.men.push({"man3", age: 32})
// Add to women
people.women.push({"woman3", age: 32});
// Print the people object
console.log(JSON.stringify(people, null, 2)); // pretty format

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

How to implement filter in strict mode in ng-grid?

I'm Using ng-grid to populate the Data. I'm using the ng-grid internal filter. But its not what i want.
Data is
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
If I search "Moroni" I'm getting the output i needed. But If i search "roni" ( Moroni ) I should not see Moroni name. My question is how can i apply the strict comparison of the key value.
I want the filter should be true only when
filterText == 'Moroni' [ exactly matching the text instead substring ]
In the angular docs for filter: http://docs.angularjs.org/api/ng.filter:filter
You find this under comparator:
true: A shorthand for function(actual, expected) { return angular.equals(expected, actual)}.
this is essentially strict comparison of expected and actual.
So try filter:filterText:true

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.

choosing only specific columns with ng-grid

I am trying to lean ng-grid and am having trouble with selecting only specific columns from my data to display. Below is my code:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50, sex: "Male"},
{name: "Tiancum", age: 43, sex: "Female"},
{name: "Jacob", age: 27, sex: "Male"},
{name: "Nephi", age: 29, sex: "Male"},
{name: "Enos", age: 34, sex: "Female"}];
$scope.gridOptions = { data: myData,
columnDefs: [{ field: 'name', displayName: 'Name', width: 90},
{ field: 'sex', displayName: 'Sex', width: 90}
]};
});
Basically, I'd like to be able to display only columns "name" and "sex" in myData. Any help here? I've looked for answers to this question on SO and elsewhere online but haven't found anything. Apologies if this is a dupe.
Here's the Plunker.
You have to put myData inside quotes
$scope.gridOptions = { data: 'myData', // <<<<<
columnDefs:
[{ field: 'name', displayName: 'Name', width: 90 },
{ field: 'sex', displayName: 'Sex', width: 90 }
]};

Categories