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'">
Related
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 have created an application using ng-Table, the application is working fine which had generated table using ng-Table. The problem which i am facing is that the table sorting is not working. My code is as given below
HTML:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
and my js code:
var app = angular.module('myApp', ['ngTable']).
controller('mycontroller', function($scope, NgTableParams)
{
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new NgTableParams({
sorting: {
name: 'asc'
}
}, {
getData: function($defer, params) {
$defer.resolve(data);
}
});
});
IS THERE ANYTHING WRONG?
This will work, you need to add $filter for your data.
var app = angular.module('myApp', ['ngTable']).
controller('mycontroller', function($scope, NgTableParams,$filter)
{
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new NgTableParams({
sorting: {
name: 'asc'
}
}, {
getData: function($defer, params) {
data = $filter('orderBy')(data, params.orderBy());
$defer.resolve(data);
//$defer.resolve(data);
}
});
});
Try this
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data | orderBy:'-age'"">
<td data-title="'Name'">
{{user.name}}
</td>
<td data-title="'Age'">
{{user.age}}
</td>
</tr>
OR
<table class="table">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="user in $data | orderBy:'-age'">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
Have you tried Smart table. It is an Angularjs module to easily display data in a table with a set of built in features such filtering,sorting, etc.:
http://lorenzofox3.github.io/smart-table-website/#section-intro
It's simple to use and looks great!
try this. in ngTable document using this way for binding data to table.
$scope.tableParams = new NgTableParams({
sorting: {
name: 'asc'
}
}, {
dataset: data
});
If I have a huge table with ng-grid, and I enabled a checkbox to select all. Is there a way for me to combine this selectAll feature with the filtering box. I mean when I filter out the rows, I want to click the checkbox so that the rows filtered will be all selected; once I clean out filter, those selectedRows are still left so that I can add more rows into it with other filters.
I created a Plunker code template here.
copy code here as well:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOptions = {
data: 'myData',
checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
showSelectionCheckbox: true,
selectWithCheckboxOnly: false,
selectedItems: $scope.mySelections,
multiSelect: true,
filterOptions: $scope.filterOptions
};
});
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\')}}
In my angular-kendo application I'm unable to get the Grid filter to show at all - not even a filter icon, just plain column headers.
Here is my html:
<div ng-controller="IntroductionWizardCtrl">
<h3 class="text-muted">Step 2: Select Application To Describe</h3>
<div kendo-grid id="grid"
k-data-source="dataSource"
k-sortable="true"
k-on-change="selectedItem = data"
k-selectable="'row'"
k-pageable='{ "refresh": true, "pageSizes": 5 }'
k-filterable="true">
</div>
<div>
<p>{{selectedItem}}</p>
</div>
<br/>
<input type="submit" class="btn btn-primary" wz-next value="Proceed to Next Step"
data-ng-click="" />
</div>
here is the corresponding Angular controller:
'use strict';
angular.module('wizardApp').controller('IntroductionWizardCtrl', ['$scope', '$location', '$rootScope',
function ($scope, $location, $rootScope) {
$scope.dataSource = {
data: [{id: 1, name: "Account Underwriting - Misc App", bu: 50},
{id: 2, name: "Achieve - Distributed", bu: 43},
{id: 3, name: "ACT!", bu: 27},
{id: 4, name: "Actuarial Database", bu: 29},
{id: 5, name: "Adjustment Invoicing System (AIS)", bu: 34},
{id: 6, name: "buncy Download", bu: 43},
{id: 7, name: "Ariba", bu: 27},
{id: 8, name: "Athena NY", bu: 29},
{id: 9, name: "Authoria", bu: 34},
{id: 10, name: "Avenue", bu: 43},
{id: 11, name: "BC&IT - Services", bu: 27},
{id: 12, name: "Billing Website", bu: 29},
{id: 13, name: "Blue Butler", bu: 34},
{id: 14, name: "BOE External", bu: 43},
{id: 15, name: "Builders Risk", bu: 27},
{id: 16, name: "Business Intelligence", bu: 29},
{id: 17, name: "Care Center", bu: 34}],
pageSize: 5, serverFiltering: true
};
$scope.rowSelected = function(e) {
var grid = e.sender;
var selectedRows = grid.select();
for (var i = 0; i < selectedRows.length; i++) {
$scope.selectedItem = grid.dataItem(selectedRows[i]);
break;
}
};
$scope.categoryDataSelectedRows=[];
$scope.categoryData=
{
data:
[{name: "General Application Information"},
{name: "User Interface configuration description"},
{name: "Application Architecture"},
{name: "Database"},
{ name: "Backup & DR"},
{name: "Design"},
{ name: "Operational data"},
{ name: "Testing"},
{name: "Application Configuration details"},
{ name: "Application connectivity requirements"},
{name: "Deployment Requirements"},
{name: "Application dependencies"},
{name: "Infrastructure dependencies"},
{ name: "Business value assessment"},
{ name: "Data requirements"},
{name: "Hosting OS requirements"},
{ name: "License requirements"}], pageSize: 5
}
$scope.rowSelectedCategory = function(e) {
var gridCategory = e.sender;
var selectedRowsCategory = gridCategory.select();
for (var i = 0; i < selectedRowsCategory.length; i++) {
$scope.selectedItemCategory = gridCategory.dataItem(selectedRowsCategory[i]);
break;
}
};
}
]);
I have looked over many examples, outside of Angular, where Kendo Grid has filtering working just fine. Yet, with angular-kendo I'm having this problem.
Well, as it turns out, my issue was with the order in which various css files were being loaded.
bootstrap was overwriting some other styles. Took me a while to sort this out, but now my angular-kendo grid is OK. Thanks for helping me!