I am trying to load an ng-grid when a button is clicked but it is not working.
But it works well on load. Why?
HTML:
Load Grid
<div ng-grid="ngOptions"></div>
$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
$scope.loadGrid = funtion(){
$scope.ngOptions = { data: 'ngData' };
};
You can initialize the data with an empty array, so that ng-grid is proparly initialized, and then change the data on-click like this:
$scope.myData = [];
$scope.ngOptions = { data: 'myData' };
$scope.loadGrid = function(){
$scope.myData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
};
Here's a working plunker
Please check this http://plnkr.co/edit/8H4NHFP59gWTxURwQKZw?p=preview
HTML :
Load Grid
<div ng-show="ngData.length">
<div ng-grid="ngOptions" ></div>
</div>
Controller
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.ngData = [];
$scope.ngOptions = {
data: 'ngData'
};
$scope.loadGrid = function() {
$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
}
});
Related
I have some Data as Follow
app.controller('MailCtrls', function ($scope) {
$scope.employee = [{
id: 1,
name: 'Anil Singh1',
age: 30,
web: 'www.code-sample.com'
}, {
id: 2,
name: 'Sunil Singh2',
age: 25,
web: 'www.code-sample.com'
}, {
id: 3,
name: 'Sushil3',
age: 20,
web: 'www.code-sample.com'
}, {
id: 4,
name: 'Aradhya4',
age: 2,
web: 'www.code-sample.com'
}, {
id: 5,
name: 'Reena5',
age: 25,
web: 'www.code-sample.com'
}];
$scope.GetData = function () {
alert();
for (var i = 0; i <$scope.employee.length; i++) {
var abc = $scope.employee[i];
if (abc.name != null) {
$scope.emailNames = abc.name;
console.log($scope.emailNames);
}
Here i need data as Email=Anil Singh1,Sunil Singh2,Sushil3,Aradhya4,Reena5 In this format How can i get data in this format
But i am Getting data as:
Anil Singh1
Sunil Singh2
Sushil3
Aradhya4
Reena5
There are some minor mistakes in your code.
1. initialization for $scope.emailNames was missing.
2. console.log statement was in loop.
3. Instead of appending += to the string, you were overriding it =.
angular.module("myapp", []).controller('MailCtrls', function($scope) {
$scope.employee = [{
id: 1,
name: 'Anil Singh1',
age: 30,
web: 'www.code-sample.com'
}, {
id: 2,
name: 'Sunil Singh2',
age: 25,
web: 'www.code-sample.com'
}, {
id: 3,
name: 'Sushil3',
age: 20,
web: 'www.code-sample.com'
}, {
id: 4,
name: 'Aradhya4',
age: 2,
web: 'www.code-sample.com'
}, {
id: 5,
name: 'Reena5',
age: 25,
web: 'www.code-sample.com'
}];
$scope.GetData = function() {
$scope.emailNames = "Email=";
for (var i = 0; i < $scope.employee.length; i++) {
var abc = $scope.employee[i];
if (abc.name != null) {
$scope.emailNames += abc.name + ",";
}
}
console.log($scope.emailNames.substring(0,$scope.emailNames.length-1));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="MailCtrls" ng-init="GetData()">
</div>
I have a code snippet
$scope.users = [
{ name: "abc", age: 10, location: 'Nagpur' },
{ name: "bcd", age: 30, location: 'Chennai' },
{ name: "efr", age: 29, location: 'Chennai' },
{ name: "abc", age: 25, location: 'Bangalore' },
{ name: "abc", age: 27, location: 'Vizag' }
];
$scope.gridOptions.data = $scope.users;
In grid how to show only users which have name = "abc"?
You just have to filter out all values from your array whose name is "abc"
angular.forEach($scope.users,function(val){
if(val.name=='abc')
$scope.abcUsers.push(val);
});
$scope.gridOptions.data = $scope.abcUsers;
I am using angular-ui-grid and am having problems changing the columns.
TypeError: self.options.columnDefs.forEach is not a function
Code is as follows:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $timeout) {
$scope.columns1 = [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}];
$scope.columns2 = [{field: 'new_name', displayName: 'New Name'}, {field:'new_age', displayName:'New Age'},{field:'pin', displayName:'Pin'}];
$scope.columnsSelected = $scope.columns1;
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
init: function (gridCtrl, gridScope) {
gridScope.$on('ngGridEventData', function () {
$timeout(function () {
angular.forEach(gridScope.columns, function (col) {
gridCtrl.resizeOnData(col);
});
});
});
},
paginationPageSize: 5,
data: {'name':'Apple','age': 5 },
columnDefs: 'columnsSelected'
};
$scope.update_columns = function($event) {
$scope.columnsSelected = $scope.columns2;
$scope.myData = [{new_name: "Moroni", new_age: 50, pin: 123},
{new_name: "Tiancum", new_age: 43, pin: 345},
{new_name: "Jacob", new_age: 27, pin: 567},
{new_name: "Nephi", new_age: 29, pin: 789},
{new_name: "Enos", new_age: 34, pin: 012}
];
}
});
I am trying an example with backgrid paging. I have to edit a cell content on click of edit button then save the updated cell content to the server. Here iam rendering the buttons using backgrid cell extention but not able to figure it out how to enable a cell for editing on click of the button.
Here is the sample am trying.. In EditCell i have a method editRow in which i have to perform the updation.
Thanks
(function(){
//Namespacing the views collections and models
window.App = {
Models: {},
Views: {},
Collections: {},
Helpers: {}
},
//Template helper to load the template of any id
App.Helpers.template = function(id){
return _.template($('#' + id).html());
}
//Person Model
App.Models.Person = Backbone.Model.extend({});
//Person collection - People
App.Collections.People = Backbone.PageableCollection.extend({
model: App.Models.Person,
state: {
pageSize: 10
},
mode: "client"
});
var personCollection = new App.Collections.People([
{
id: 1,
name: 'Trim',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 2,
name: 'Crum',
age: 25,
occupation: 'Developer'
},
{
id: 3,
name: 'Drum',
age: 46,
occupation: 'Designer'
},
{
id: 4,
name: 'Srum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 5,
name: 'Vrum',
age: 24,
occupation: 'Developer'
},
{
id: 6,
name: 'Brum',
age: 29,
occupation: 'Designer'
},
{
id: 7,
name: 'Frum',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 8,
name: 'Jrum',
age: 25,
occupation: 'Developer'
},
{
id: 9,
name: 'Lrum',
age: 46,
occupation: 'Designer'
},
{
id: 10,
name: 'Hrum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 11,
name: 'Prum',
age: 24,
occupation: 'Developer'
},
{
id: 12,
name: 'Zrum',
age: 29,
occupation: 'Designer'
}
]
);
var EditCell = Backgrid.Cell.extend({
template: _.template('<button>Edit</button>'),
events: {
"click": "editRow"
},
editRow: function (e) {
e.preventDefault();
//Enable the occupation cell for editing
//Save the changes
//Render the changes.
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
this.delegateEvents();
return this;
}
});
var columns = [{
name: "id",
label: "ID",
editable: false,
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "name",
label: "Name",
cell: "string"
}, {
name: "age",
label: "Age",
cell: "integer"
}, {
name: "occupation",
label: "Occupation",
cell: "string"
}, {
name: "actions",
label: "Actions",
cell: EditCell
}];
// Initialize a new Grid instance
var grid = new Backgrid.Grid({
columns: columns,
collection: personCollection
});
var paginator = new Backgrid.Extension.Paginator({
collection: personCollection
});
// Render the grid and attach the root to your HTML document
$("#grid").append(grid.render().el);
$("#paginator").append(paginator.render().$el);
})();
the following code solved my problem.. With the below code we can make each cell editable/noneditable depending upon a condition. Still looking for a better approach to Enable editing on edit button click.
(function(){
//Person Model
var Person = Backbone.Model.extend({
});
//Person collection - People
var People = Backbone.Collection.extend({
model: Person
});
var personCollection = new People([
{
id: 1,
name: 'Trim',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 2,
name: 'Crum',
age: 25,
occupation: 'Developer'
},
{
id: 3,
name: 'Drum',
age: 46,
occupation: 'Designer'
},
{
id: 4,
name: 'Srum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 5,
name: 'Vrum',
age: 24,
occupation: 'Developer'
},
{
id: 6,
name: 'Brum',
age: 29,
occupation: 'Designer'
},
{
id: 7,
name: 'Frum',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 8,
name: 'Jrum',
age: 25,
occupation: ''
},
{
id: 9,
name: 'Lrum',
age: 46,
occupation: ''
},
{
id: 10,
name: 'Hrum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 11,
name: 'Prum',
age: 24,
occupation: 'Developer'
},
{
id: 12,
name: 'Zrum',
age: 29,
occupation: 'Designer'
}
]
);
var MyCell = Backgrid.Cell.extend({
initialize: function (options) {
MyCell.__super__.initialize.apply(this, arguments);
this.listenTo(this.model, "backgrid:edited", this.doSomething);
},
doSomething: function () {
console.log('something');
},
enterEditMode: function () {
this.$el.width((this.$el.outerWidth() - 10) + 'px');
Backgrid.Cell.prototype.enterEditMode.apply(this, arguments);
},
exitEditMode: function () {
this.$el.width(false);
Backgrid.Cell.prototype.exitEditMode.apply(this, arguments);
}
});
var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: "string", //Backgrid.IntegerCell.extend({ tagName: "td style='text-align:left'" })
editable:false,
isEnabled: false
}, {
name: "name",
label: "Name",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "string", // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
editable:false
}, {
name: "age",
label: "Age",
cell: "string", // An integer cell is a number cell that displays humanized integers
editable: false
}, {
name: "occupation",
label: "Occupation",
cell: MyCell, // A cell type for floating point value, defaults to have a precision 2 decimal numbers
editable: function (c, m) {
if (typeof(c.collection) === 'undefined')
return false;
else
return (c.attributes.age <= 30) ? true : false;
}
}];
// Initialize a new Grid instance
var grid = new Backgrid.Grid({
columns: columns,
collection: personCollection
});
// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
collection: personCollection,
fields: ['name']
});
// Render the grid and attach the root to your HTML document
$("#grid").append(grid.render().el);
$("#grid").before(filter.render().el);
})();
ngGrid is converting my NULL cells to 0 or an empty string ("") based on the column type.
I need this displayed as 'NULL' instead. What is an efficient way to do this? There could be 10,000+ rows of data displayed in the Grid.
Simple Plunker displaying undesired behaviour:
http://plnkr.co/edit/MwAotQ?p=preview
(notice 0, "", or $0.00 instead of NULL).
Thanks!
->> Josh <<-
Create a custom filter that extends the original filter. Here is how you would do it for your date column:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", width: 120 },
{ field: "age", width: 120, cellFilter: 'number' },
{ field: "birthday", width: 120, cellFilter: 'nullDateFilter' },
{ field: "salary", width: 120, cellFilter: 'currency' }]
};
$scope.myData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: 60000 },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: 70000 },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: 50000 },
{ name: null, age: null, birthday: null, salary: null },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: 30000 }];
});
app.filter('nullDateFilter', function($filter) {
return function(input) {
var originalFilter = $filter('date');
return input == null ? 'null' : originalFilter(input);
};
});