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\')}}
Related
I'm using ngTable to display some data and I need an initial way of sorting order to display it at page load. There's the normal option to set the sorting, for example sorting: {color: "asc"}, this will sort the color column alphabetically. Assuming this is my table data:
var x = [
{name: "allen", age: 33, color:"green"},
{name: "jon", age: 23, color:"blonde"},
{name: "silver", age: 54, color:"yellow"},
{name: "james", age: 52, color:"grey"},
{name: "flint", age: 25, color:"pink"},
{name: "billy", age: 31, color:"blonde"},
{name: "bones", age: 47, color:"grey"},
{name: "michael", age: 35, color:"green"},
{name: "jackson", age: 234, color:"yellow"},
{name: "leonardo", age: 12, color:"brown"},
{name: "dicaprio", age: 73, color:"pink"},
{name: "sylvester", age: 35, color:"blonde"}
];
How can I set the initial sort order of the color column by custom order, such as first all green, then all pink then all yellow and last grey.
This is my code so far:
function demoController(NgTableParams, simpleList) {
var names = [
{name: "allen", age: 33, color:"green"},
{name: "jon", age: 23, color:"blonde"},
{name: "silver", age: 54, color:"yellow"},
{name: "james", age: 52, color:"grey"},
{name: "flint", age: 25, color:"pink"},
{name: "billy", age: 31, color:"blonde"},
{name: "bones", age: 47, color:"grey"},
{name: "michael", age: 35, color:"green"},
{name: "jackson", age: 234, color:"yellow"},
{name: "leonardo", age: 12, color:"brown"},
{name: "dicaprio", age: 73, color:"pink"},
{name: "sylvester", age: 35, color:"blonde"}
];
this.tableParams = new NgTableParams({
// initial sort order
sorting: { color: ["green","pink","yellow","grey"] }
}, {
dataset: names
});
}
Code is here.
Did you add the sort attribute in the directive?
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
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);
})();
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' }
];
}
});
I'm working with bower (json file below).
I'm failing to initiate simple ngGrid. It's so simple (ng grid is awesome i must say) that i don't know what i'm doing wrong.
index.jade:
div(ng-controller='Ctrl')
div(style="border: 1px solid rgb(212,212,212); width : 400px; height: 300px", ng-grid='gridOptions')
controller.coffee:
'use strict'
angular.module('client.controllers', [])
.controller('Ctrl', [
'$log'
'$scope'
($log, $scope) ->
$scope.gridOptions = {
data: 'myData'
enablePinning: true
columnDefs: [
{ field: "name", width: 120, pinned: true },
{ field: "age", width: 120 },
{ field: "birthday", width: 120 },
{ field: "salary", width: 120 }
]
}
$scope.myData = [
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" }
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" }
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" }
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" }
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" }
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" }
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" }
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" }
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" }
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" }
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" }
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" }
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
]
])
and what i'm getting is:
bower json:
{
"name": "main",
"version": "0.0.0",
"authors": [
"gumba"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"querystring":"*",
"angular": "*",
"angular-sanitize": "*",
"angular-resource": "*",
"angular-route": "*",
"angular-cookies": "*",
"angular-mocks": "*",
"bootstrap": "*",
"sugarjs": "*",
"datatables":"*",
"ng-grid":"*"
}
}
Downgrading ng-grid from 2.0.14 to 2.0.11 did the job for me.
I guess it's just some backwards compatibility issue that will be solved in later versions so nothing interesting here.
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);
};
});