I wanted to add a new row into my existing grid. Also, the row which is getting pushed should be editable.
I tired below code and the row is getting added, But I wanted editable fields to be added
$scope.addNewItem=function() {
$scope.data.push( { name: 'Test add ' });
};
Can someone help me for the same.
Try this sample
Update
This is full source code
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="{ data: data, columnDefs: columnDefs,enableRowSelection: true,
enableSelectAll: true,
enableFiltering: true, }" class="grid" ui-grid-selection ui-grid-edit ui-grid-cellnav></div>
<button ng-click="addNewItem()" > ADD item</button>
<button ng-click="insertNewItem()" > Insert item</button>
</div>
<script src="app.js"></script>
</body>
</html>
controller and module code
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data = [
{ name: 'Bob', title: 'CEO' },
{ name: 'Frank', title: 'Lowly Developer' }
];
$scope.columnDefs = [
{name: 'name', cellEditableCondition:true},
{name: 'title', cellEditableCondition:true}
];
$scope.addNewItem=function()
{
$scope.data.push( { name: 'Test add ', title: 'Test add' });
};
$scope.insertNewItem=function()
{
$scope.data.splice(1, 0, { name: 'Test insert ', title: 'Test insert' });
};
}]);
Updated Demo in plunkr
in controller
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.addData = function() {
var n = $scope.gridOpts.data.length + 1;
$scope.gridOpts.data.push({
"firstName": "New " + n,
"lastName": "Person " + n,
"company": "abc",
"employed": true,
"gender": "male"
});
};
var columnDefs1 = [
{ name: 'firstName' },
{ name: 'lastName' },
{ name: 'company' },
{ name: 'gender' }
];
var data1 = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"gender": "male"
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"gender": "female"
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"gender": "female"
},
{
"firstName": "Misty",
"lastName": "Oneill",
"company": "Letpro",
"gender": "female"
}
];
$scope.gridOpts = {
columnDefs: columnDefs1,
data: data1
};
}]);
in html
<body>
<div ng-controller="MainCtrl">
<button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button>
<div id="grid1" ui-grid="gridOpts" class="grid"></div>
</div>
$scope.gridOpts.data.push({
"firstName": "New " + n,
"lastName": "Person " + n,
"company": "abc",
"employed": true,
"gender": "male",
enableCellEdit: true,
});
add enableCellEdit: true, this to enable the
Related
I am trying to sort json from an external file in angular js.I am able to sort the file easily when i declared json internally as an array but cant able get data when declared json in external file.Please help me.
My code is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope, $http) {
$http.get("views.json")
.then(function (response) {$scope['users'] = response.data;console.log(response.data);
//$scope['counter'] = Object.keys(response.data).length;
});
/*$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];*/
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>
</body>
</html>
and views.json contains
[
{
name:"Madhav Sai",
age:10,
location:"Nagpur"
},
{
name:"Suresh Dasari",
age:30,
location:"Chennai"
},
{
name:"Rohini Alavala",
age:29,
location:"Chennai"
},
{
name:"Praveen Kumar",
age:25,
location: "Bangalore"
},
{
name:"Sateesh Chandra",
age:27,
location:"Vizag"
}
]
Please help me.
You can do this,
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}]);
DEMO
Does angular-schema-form have a method to show preselected values?
When the titleMap on the select will set an integer, preselected values will show. But if it will set an object, I found no way of showing the correct name.
Is there anything to tie the object to, like with ng-options where you can set an attribute to compare them with the "track by" clause?
ng-options="option as option.name for option in array track by option.id"
In my example code, cats1 will set an object, cats2 will set an integer.
HTML:
<body>
<div ng-controller="MainCtrl">
<div class="login-container">
<form name="myForm"
sf-schema="schema"
sf-form="form"
sf-model="model">
</form>
</div>
</div>
</body>
Controller:
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.form = [
{
key: 'cats1',
type: 'select',
titleMap: [
{value: {id: 0, name: "Leopard"}, name: "Leopard"},
{value: {id: 1, name: "Tiger"}, name: "Tiger"}
]
},
{
key: 'cats2',
type: 'select',
titleMap: [
{value: 0, name: "Leopard"},
{value: 1, name: "Tiger"}
]
}
];
$scope.schema = {
"type": "object",
"properties": {
"cats1": {
"title": "Cats",
"type": "object"
},
"cats2": {
"title": "Cats",
"type": "number"
}
}
};
$scope.model = {cats1: {id: 1, name: "Tiger"}, cats2: 1};
}]);
Here is a plunkr:
https://plnkr.co/edit/0hK5Hrc9GXklfRwa6fjE?p=preview
I've been reading the examples of Angular UI-Grid b/c we want to use it in a project. I'm following the docs and examples here on stack. But I can not get my data to display in my table. I've created this plunk based on others, simplified for what I'm doing. I'm not sure why the data will not display?? Any help is appreciated.
http://plnkr.co/edit/jOOePX4X1BliOXdG95pC?p=preview
index.html
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div ng-controller="appController ">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="mygrid" ></div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module("myApp", ['ngTouch','ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.resizeColumns'])
myApp.controller("appController", ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
$scope.gridOptions = {
enableCellEditOnFocus: false,
enableSorting: true,
enableGridMenu: true,
columnDefs: $scope.columns,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
}
};
$scope.saveRow = function( rowEntity ) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
console.log("record EDIT" + angular.toJson(rowEntity));
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise );
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval( function() {
if(rowEntity.test_status === 'Active') {
console.log("accepting edit, b/c status is Active");
promise.resolve();
}else {
console.log("rejecting edit, b/c status is Inactive");
promise.reject();
}
}, 1000, 1);
};
$http.get('data.json')
.success(function(data) {
console.log("data == " + angular.toJson(data));
$scope.gridOptions.data = data;
});
}]);
JSON Data
[
{
"testA": "1","description": "test1","order": "1","test_status": "Active"
},
{
"testB": "2","description": "test2","order": "2","test_status": "Active"
},
{
"testC": "3","description": "test3","order": "3","test_status": "Active"
},
{
"testD": "4","description": "test4","order": "4","test_status": "Inactive"
},
{
"testE": "5","description": "test5","order": "5","test_status": "Active"
}
]
CSS
.mygrid {
width: 450px;
height: 150px;
}
The reason is actually, a simple one. Your column names in your columnDefs object don't match the json you're getting back from your $http call. Change
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
to this:
$scope.columns = [
{ name: 'test', enableCellEdit: true},
{ name: 'description', enableCellEdit: true },
{ name: 'order', enableCellEdit: true },
{ name: 'test_status', enableCellEdit: true }
];
and make sure you change the value of the json data from "testA", "testB", "testC", etc to simply "test".
First of all, here is the image:
... and link to the live example.
Yes, the live example doesn't work, that's why I post the question to the SO.
Each item in the left column can have one or multiple colors, specified in the json file. In my example, the sky is blue, the sun is yellow, the grass is green, and the bike is blue and yellow. You can see it directly in the file itself.
What I want?
If I choose "blue" in the first dropdown and leave the second dropdown blank, then the table will show me the sky and the bike.
And if I choose "blue" in the first dropdown and "yellow" in the second, the table will show only the bike.
How it may be done?
Although I believe that live example is more comfortable to use, I also post all the code directly here.
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<button id='toggleFiltering' ng-click="toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
test.json
[
{
"name": "sky",
"color": {
"color1": "blue",
"color2": ""
}
},
{
"name": "sun",
"color": {
"color1": "yellow",
"color2": ""
}
},
{
"name": "grass",
"color": {
"color1": "green",
"color2": ""
}
},
{
"name": "john's bike",
"color": {
"color1": "blue",
"color2": "yellow"
}
}
]
app.css
.header-filtered {
color: blue;
}
app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
columnDefs: [
{ field: 'name', headerCellClass: $scope.highlightFilteredHeader },
// THE COLORS GOES HERE
{ field: 'color', filters: [
{
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
},
{
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
}
], cellFilter: 'mapColor', headerCellClass: $scope.highlightFilteredHeader},
]
};
$http.get('https://rawgit.com/johncja/b8bf0cf099f5437025a5/raw/42c80882674bd5700fd2bd399992e8eab9afb4a8/test.json')
.success(function(data) {
$scope.gridOptions.data = data;
data.forEach( function addDates( row, index ){
if (row.color==='blue') {
row.color = '1';
} else if (row.color==='yellow') {
row.color = '2';
} else if (row.color==='green') {
row.color = '3';
}
});
});
$scope.toggleFiltering = function(){
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
};
}])
.filter('mapColor', function() {
var colorHash = {
1: 'blue',
2: 'yellow',
3: 'green'
};
return function(input) {
if (!input){
return '';
} else {
return colorHash[input];
}
};
});
I have use ag-grid earlier for exactly same as your requirements(wants a filtering options on column).
I am trying to use multiple select in anguler-ui-grid but get error:
TypeError: value.forEach is not a function
at writeNgOptionsMultiple [as writeValue] (angular.js:26579)
at ngModelCtrl.$render (angular.js:28680)
at Object.ngModelWatch (angular.js:25493)
at Scope.$digest (angular.js:15888)
at angular.js:16091
at completeOutstandingRequest (angular.js:5552)
at angular.js:5829(anonymous function) # angular.js:12520(anonymous function) # angular.js:9292Scope.$digest #
angular.js:15914(anonymous function) #
angular.js:16091completeOutstandingRequest # angular.js:5552(anonymous
function) # angular.js:5829
Here is the code: The only change from the official template is the "multiple" attribute in the dropdown template tpl
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function ($scope) {
var myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"employed": false
}
];
var dropDownArray = [
{ id: 'Gabi', firstName: 'Gabi' },
{ id: 'Gabriel', firstName: 'Gabriel' }];
$scope.msg = "hello shit";
var tpl = '<div>\
<form\
name="inputForm">\
<select multiple\
ng-class="\'colt\' + col.uid"\
ui-grid-edit-dropdown\
ng-model="MODEL_COL_FIELD"\
ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray">\
</select>\
</form>\
</div>';
$scope.gridOptions = { data: myData,
columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 190,
editableCellTemplate: tpl,
editDropdownValueLabel: 'firstName',
editDropdownOptionsArray: dropDownArray },
{ field: 'lastName', displayName: 'Last Name', width: 180 },
{ field: 'employed', displayName: 'employed?', width: 180 }]}
}]);
I ran into the same problem - a tough one because it works with angular 1.2 but not with 1.4.
The solution for me was that the initial field value has to be an array, not a string.
So your data must look like this:
var myData = [
{
"firstName": ["Cox"],
"lastName": "Carney",
"employed": true
},
{
"firstName": ["Lorraine"],
"lastName": "Wise",
"employed": false
},
{
"firstName": ["Nancy"],
"lastName": "Waters",
"employed": false
}
];
And the error should go away.