I'm trying to sort a grid on a column where the values are in dollars (with $ and , included) but the sorting doesn't work correctly on that - is there a way to get the sorting to work on this, or if necessary, set the values to numbers and then display as money?
i have:
$scope.data = [
{ 'value': '$1,000,000' },
{ 'value': '$100,000' },
....
{ 'value': '$1,000' }
];
$scope.gridOptions = {
enableSorting: true,
data: $scope.data,
columnDefs: [
...
{ name: 'Value', field: 'value', width: 110 }
]
I dont see your exact Html and other JS code , So I tried myself Click on a column header to sort by that column. If you missed anything in your code please include it.I posted my working example.,
Html code ,
<!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/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
<br>
</div>
<script src="app.js"></script>
</body>
</html>
JS Code
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.data = [
{ 'value': '$1,000,000' },
{ 'value': '$100,000' },
{ 'value': '$1,000' }
];
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'value',
name:'value'},
],
};
$scope.gridOptions1.data = $scope.data;
}]);
Related
when I set pinning and rowTemplate together,the rowTemplate repeat 3 times in single row
I think it is influenced by the pinning col,but i don't know how to fix it
here's the plunker: http://plnkr.co/edit/XoXMbmqa1IjegT1RQ297?p=preview
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ name:'id', width:50, enablePinning:true, hidePinLeft: false, hidePinRight: true },
{ name:'name', width:100, pinnedLeft:true },
{ name:'age', width:100, pinnedRight:true },
{ name:'address.street', width:150 },
{ name:'address.city', width:150 },
{ name:'address.state', width:50 },
{ name:'address.zip', width:50 }
];
$scope.gridOptions.rowTemplate='<div>helloworld</div>'
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
.grid {
width: 100%;
height: 400px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.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/docs/grunt-scripts/lodash.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.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="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
</div>
<script src="app.js"></script>
</body>
</html>
I'm trying to make a table with multi headers to show date info,and each row has a name as the first column ,the second column is a line chart which can show business data.
I draw a pic to show this
Assuming you can do without pinning, I would remove the pinning extension from your grid. This makes working with header templates easier... You would otherwise run into the same issue with your header (three repeated headers).
See this plunker: http://plnkr.co/edit/nvuUKIQczdY2E6KuMEVG?p=preview
I removed pinning, removed rowTemplate, used a single headerCellTemplate (placeholder) to accomodate your calender header, and used a cellTemplate to accomodate you graph logic.
Html:
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
Javascript:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ field:'id', name:'id', width:'25'},
{ field:'name', name:'name', width:'*' },
{ name:'chart', headerCellTemplate:'<div>Include header code here', width:'*', cellTemplate: '<div>include graph code here</div>' }
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
Hope I interpreted your goal correctly and I hope this helps :)
Im new to ui-bootstrap. actually im trying to use some components as tabs to make a menu for my app. My solution is unfortunately not working. Who can please help.
Here is my code.
angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']);
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']).controller('TabsDemoCtrl', function ($scope, $window) {
$scope.tabs = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
];
$scope.alertMe = function () {
setTimeout(function () {
$window.alert('You\'ve selected the alert tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
<html ng-app="scolarite">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accueil</title>
<link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<script src="${pageContext.request.contextPath}/js/angular-1.6.1.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-animate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-animate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-touch.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-touch.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/acc.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.tpls.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-tpls-2.5.0.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.min.js" type="text/javascript"></script>
</head>
<body ng-controller="TabsDemoCtrl">
<style type="text/css">
form.tab-form-demo .tab-pane {
margin: 20px 20px;
}
</style>
<uib-tabset type="pills">
<uib-tab heading="Inscription">Tab 1 content</uib-tab>
<uib-tab heading="Liste Etudiants" classes="btn-sm">Tab 2 content</uib-tab>
</uib-tabset>
</body>
</html>
Thanks in Advance
You can do this simply
$scope.groups = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"open" : true
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden",
"open": false
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico",
"open" : false
},
{
"Name" : "Ernst Handel",
"Country" : "Austria",
"open" : false
}
]
in HTML
<uib-accordion close-others="true">
<div uib-accordion-group class="panel-default" heading="{{group.Name}}" ng-repeat="group in groups" is-open="group.open">
{{group.Country}}
</div>
</uib-accordion>
Have a look at this plunker
It looks as though you are getting your modules mixed up. You have set up two modules scolarite and ui.bootstrap.demo and then you have attached the TabsDemoCtrl controller to one of them - the ui.bootstrap.demo module, yet you are using the scolarite module in the app's ng-app directive.
To fix, you can change your ng-app directive so that your app uses your ui.bootstrap.demo module (the one with the controller), like this:
<html ng-app="ui.bootstrap.demo">`
Then you can remove the declaration of the scolarite module by removing this line:
angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']);
Side note: You can do this the other way around, the key is to attach the controller to the module that you specify in your ng-app directive.
Try this solution its working fine
// Code goes here
angular.module('scolarite', ['ui.bootstrap.demo']);
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) {
$scope.tabs = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
];
$scope.alertMe = function () {
setTimeout(function () {
$window.alert('You\'ve selected the alert tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
This is my code
var app = angular.module('app', ['ui.grid']);
app.controller('TableCrtl', ['$scope', '$filter', function ($scope, $filter) {
var myDummyData = [{name: "Moroni",address:"one", age: 50},
{name: "Tiancum",address:"vij", age: 43},
{name: "Jacob",address:"dfr", age: 27},
{name: "Nephi",address:"mnc", age: 29},
{name: "Enos",address:"trr", age: 34}];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOpts = {
data: myDummyData,
// enableFiltering: true,
columnDefs: [
{name: 'Name', field: 'name', enableFiltering: true},
{name: 'Address', field: 'address', enableFiltering: true}
]
};
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('filter')(myDummyData, $scope.searchText, undefined);
};
}]);
/* Styles go here */
.cart-item.ng-enter {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
background-color: yellow;
}
.cart-item.ng-enter-active {
background-color: white;
}
.myGrid {
width: 1200px;
height: 800px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.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 data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.css" rel="stylesheet" type="text/css"/>
<script src="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js" type="text/javascript"></script>
</head>
<body ng-controller="TableCrtl">
<div>
<br>
<br>
<input type="text" class="form-control" ng-change="refreshData()" placeholder="Produkt Name" ng-model="searchText">
<br>
<div range-slider min="0" max="100" model-min="15" model-max="35"></div>
<br>
<div id="grid1" ui-grid="gridOpts" class="grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>
This is my plunker :- http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview
In the above code i have 3 columns data , but i want to display two columns in ui-grid. when i search text entire data filterd,but i want to filter display data like (name and address only) in ui-grid.i tried the following code
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('filter')(myDummyData.name, $scope.searchText, undefined);
};
May be this is what you are looking for.
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var today = new Date();
$scope.gridOptions = {
enableFiltering: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
},
columnDefs: [
{ field: 'name' },
{ field: 'address' }
]
};
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[ 'name', 'address'].forEach(function( field ){
if ( row.entity[field].match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};
}])
});
The code is copied from this link. The
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
}
and "$scope.singleFilter" is the main thing you need to look.
Instead of using the default filter, define a custom filter which filters based on the name and address only. Here is the basic logic.
Filter:
app.filter('customfilter', function () {
//Your logic to filter based on name and address
});
Controller:
Inject filter in the controller and use it.
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('customfilter')(arguments for filter);
};
I am using angularjs ui-grid and it's working well on desktop as well as on mobile also but when I try to move ui-grid columns on mobile or touchable devices then they are not being moved.
Here is my plunkr:
Any help would be appreciated.
Below is code attached also.
<!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="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-move-columns class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
And js file code is:-
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.moveColumns']);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [{
name: 'firstName',
field: 'first-name'
}, {
name: '1stFriend',
field: 'friends[0]'
}, {
name: 'city',
field: 'address.city'
}, {
name: 'getZip',
field: 'getZip()',
enableCellEdit: false
}],
data: [{
"first-name": "Cox",
"friends": ["friend0"],
"address": {
street: "301 Dove Ave",
city: "Laurel",
zip: "39565"
},
"getZip": function() {
return this.address.zip;
}
}]
};
}]);
Hello all fellow programmers,
my requirement is to add a column in a grid at runtime or dynamically using ui-grid. I am able to achieve the same using a button, but what I want is to override the predefined functionality of the icon which in on the header of grid used for sorting and some predefined tasks(), I want add one more functionality there
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.columns = [{ field: 'name' }, { field: 'gender' }];
$scope.gridOptions = {
enableSorting: true,
columnDefs: $scope.columns,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
$scope.add = function() {
$scope.columns.push({ field: 'company', enableSorting: false });
}
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
.grid {
width: 500px;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/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">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
Try clicking the Add button to add the company column.
<br>
<br>
<button id="button_add" class="btn" ng-click="add()">Add</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
of adding a column there
You can use $watch in the add method:
$scope.add = function() {
$scope.columns.push({ field: 'company', enableSorting: false });
$scope.$watch('columns', function(newVal, oldVal){
console.log('added');
}, true);
}
and i noticed that you have a minified script before the doctype of document which should not have to be there.
As I can see from your code example, you got until example 113 of the ui-grid Tutorial.
If you have read a little bit further you would have found this:
Example 303 - Customizing column menu
http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu
As you can see there, you can add items to the columns menu by defining it in the columnDefs.
columnDefs: [
{ field: 'name', enableColumnMenu: false },
{
field: 'company',
menuItems: [
{
title: 'Outer Scope Alert',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
$scope.doWhateverYouLike();
}
}
]