I have created an ng-grid and want to customise Header Row Template of the grid as i need to add total items in header instead of the footer, but want the same view as footer (i mean the whole row ). I already know about headerCellTemplate and also have already tried it but its not what i am looking for ! if you can help i will be so thankful to you :)
here is sample of my code
$scope.myData = [{"name": "Moroni", "age": 50},
{"name": "Tiancum", "age": 53},
{"name": "Jacob", "age": 27},
{"name": "Nephi", "age": 54},
{"name": "Alex", "age": 53},
{"name": "Jhonny", "age": 22},
{"name": "Ben", "age": 11},
],
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{ field: 'name', displayName: 'Candiate name' },
{ field: 'age', displayName: 'Age', headerCellTemplate: myHeaderCellTemplate }
]
};
You don't need to do that as part of the grid. Just add a div above the grid and put whatever you want in it. You can use the same styles as the footer does to make it match.
Related
I need your help.
I'm implementing multiple dropdowns using ng-repeat from json. And I want that once value is selected in one dropdown it should not appear in another dropdowns. i'm new in angularjs. here is my json. I want "data" in drop down with selected value columnindex.
$scope.records = [
{
"userId": "10",
"fisrtname": "Unnati",
"lastName": "Chauhan",
"dateVal": "22-05-2016",
"columnindex": "1",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
},
{
"userId": "20",
"fisrtname": "Ranju",
"lastName": "Shinde",
"dateVal": "21-05-2016",
"columnindex": "2",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
},
{
"userId": "30",
"fisrtname": "Smruti",
"lastName": "Modi",
"dateVal": "20-05-2016",
"columnindex": "3",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
}];
my html code is
<div ng-controller="multipleDropDown">
<div ng-repeat= "us in records" >
<select ng-model="us.columnindex" ng-options="item.value as item.text for item in us.data|arrayDiff:us.data:item.value">
</select>
</div>
</div>
you need to add below code in your dropdown elements so as to avoid recursive calls to all three of your dropdowns during change in ng-model values.
ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"
Also there is a function which updates data object of your $scope.records array. Please take a look at this fiddle. I think this is what the specific thing is which you wanted.
I am trying to divide a Row into two ie. Row Span in Angular JS UI Grid. I am not able to find how to do this.I need different color schemes for rows within the rows of the UI grid. Can anyone please help me with this and give me some related fiddle or plunker to refer. Thanks in advance.
I have a RowSpan hack, suitable for my need, not necessarily suitable for every case: I use position:absolute on the top row's cell and display:none on the spanned rows' cells. See http://plnkr.co/edit/TiQFJnyOvVECOH2RL4ha
Everything is in the ng-style in the cell template, which uses a spanCompany attribute to know the number of rows to override. We have to calculate the height and width since we are position:absolute. This also means the width has to be expressed in px, not %.
ng-style extract:
ng-style="{
height:21*row.entity.spanCompany+'px',
width:col.width+'px',
position:'absolute',
display:row.entity.spanCompany==0?'none':'block'
}"
Full code:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo has a rather long company name that might need to be displayed in a tooltip",
"spanCompany":2,
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Enormo",
"spanCompany":0,
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"spanCompany":1,
"employed": false
}
];
$scope.gridOptions = {
columnDefs: [
{ name: 'firstName', width: '20%' },
{ name: 'lastName', width: '20%' },
{ name: 'company', width: '200',
cellTemplate: '<div class="ui-grid-cell-contents wrap" title="TOOLTIP" ng-style="{ height:21*row.entity.spanCompany + \'px\', width:col.width+\'px\', position:\'absolute\', display:row.entity.spanCompany==0?\'none\':\'block\', borderStyle:\'dotted\', borderWidth:\'1px\'}" >{{COL_FIELD CUSTOM_FILTERS}}</div>'
},
{ name: 'employed', width: '30%' }
],
data: 'data',
rowHeight: 21
};
}]);
I have an array of objects that looks like this:
[{headerName: "Test 1", field: "Test 1", type_id: 1}, {headerName: "Test 2", field: "Test 2", type_id: 2}, {headerName: "Test 3", field: "Test 3", type_id: 3}, {headerName: "Name", field: "Name", type_id: 3}, {headerName: "Income", field: "Income", type_id: 2}]
This is just a basic example of what the array might look like as it can be of any length. Basically what I need to do is when the type_id is 3 I need to add an extra key/value pair to those objects in the array.
How would I go about doing this?
Any help would be much appreciated.
Thanks for your time.
UPDATE:
Key/value pair I am trying to add is : cellRenderer: customEditor
An es6 solution
yourArray = yourArray.map( obj => {
if( obj.type_id === 3 ){
return { ...obj, cellRenderer: customEditor };
}
return obj;
}
An es5 solution
yourArray = yourArray.map( function( obj ){
if( obj.type_id === 3 ){
Object.defineProperty(obj, "cellRenderer", { value : customEditor })
}
return obj;
}
The solution using Array.map and Object.keys functions:
var arr = [{headerName: "Test 1", field: "Test 1", type_id: 1}, {headerName: "Test 2", field: "Test 2", type_id: 2}, {headerName: "Test 3", field: "Test 3", type_id: 3}, {headerName: "Name", field: "Name", type_id: 3}, {headerName: "Income", field: "Income", type_id: 2}],
extraObj = {'cellRenderer': 'customEditor'};
arr.map(function(obj){
if (obj['type_id'] === 3) {
Object.keys(this).forEach((k) => obj[k] = this[k]);
}
}, extraObj);
console.log(JSON.stringify(arr, 0, 4));
The output:
[
{
"headerName": "Test 1",
"field": "Test 1",
"type_id": 1
},
{
"headerName": "Test 2",
"field": "Test 2",
"type_id": 2
},
{
"headerName": "Test 3",
"field": "Test 3",
"type_id": 3,
"cellRenderer": "customEditor"
},
{
"headerName": "Name",
"field": "Name",
"type_id": 3,
"cellRenderer": "customEditor"
},
{
"headerName": "Income",
"field": "Income",
"type_id": 2
}
]
Another take combining map and Object.assign
var data = [{headerName: "Test 1", field: "Test 1", type_id: 1}, {headerName: "Test 2", field: "Test 2", type_id: 2}, {headerName: "Test 3", field: "Test 3", type_id: 3}, {headerName: "Name", field: "Name", type_id: 3}, {headerName: "Income", field: "Income", type_id: 2}];
var extend = { cellRenderer: 'customEditor' }
data = data.map( item => {
if( item.type_id == 3 ){
return Object.assign( item, extend );
}
return item;
});
I am just trying to get a basic Angular UI ng-grid working. We have data coming from sql server data sources with columns with spaces and ngGrid is not recognising those column names. Is there any way to get the ngGrid working with columns with spaces without modifying the schema?
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{"name test": "Moroni", "age": 50},
{"name test": "Tiancum", "age": 43},
{"name test": "Jacob", "age": 27},
{"name test": "Nephi", "age": 29},
{"name test": "Enos", "age": 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field:'name test', displayName:'Name'}, {field:'age', displayName:'Age'}]
};
});
Plunker code here: http://plnkr.co/edit/u6I3P8rG3PlUxsJLXqT1?p=preview
This is possible, but you will need to change your JSON a bit.
You can access the keys with white space by using bracket notation: fields['name test']:
Your JSON will end up looking something like this:
$scope.myData =
[ { fields : {"name test": "Moroni", "age": 50} },
{ fields: {"name test": "Tiancum", "age": 43} },
{ fields: {"name test": "Jacob", "age": 27} },
{ fields: {"name test": "Nephi", "age": 29} },
{ fields: {"name test": "Enos", "age": 34 } } ] ;
And you can set the column definitions this way:
columnDefs: [{field: "fields['name test']", displayName: "fields['Name']" }, {field:"fields['age']", displayName:'Age'}]
Working fiddle:
http://plnkr.co/edit/X7YAjrNXXjk1pbXftoZt?p=preview
There was an issue opened about this, but it was closed. You can see more info here: https://github.com/angular-ui/ng-grid/issues/531
Trying to create a ng-grid with a link ie anchor in the first column. It is supposed to redirect to another page ie person passing in the Id for the person:
{{row.getProperty(name)}
My controller looks like this:
$scope.gridOptions = {
data: 'myData',
enablePinning: true,
columnDefs: [
{
field: 'id',
displayName: 'PersonLink',
enableCellEdit: false,
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">{{row.getProperty(name)}</div>'
},
{ field: "name", width: 120, pinned: true },
{ field: "age", width: 120 },
{ field: "birthday", width: 120 },
{ field: "salary", width: 120 }
]
};
$scope.myData = [
{ id:1,name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ id:2,name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ id:3,name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
{ id:4,name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
{ id:5,name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
];
});
The link is not even displaying, can someone help out? thanks
Here is the plnkrlink:http://plnkr.co/edit/Yg1fVjVviZPQgwlpVNPb?p=preview
I have tried to fix your fiddle. The updated fiddle is here
http://plnkr.co/edit/hbN32G9KDU0vjR36tKgh?p=preview
The thing that needed fix were you were missing ending }
{{row.getProperty(col.field)}
Also pinned:true is not working maybe because you are doing it on second column. I moved it to first and it works.
Also the expression which refers a string should be fixed here
{{row.getProperty(\'name\')}}