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 :)
Related
I am trying to make flash messages in my AngularJs app with the use of sachinchoolur's angularjs-flash module.
The flashes work but they don't disappear after the set TimeOut.
I followed the documentation correctly and I made a minimum code in plnkr to demonstrate the problem.
https://plnkr.co/edit/OaLbAjqZDmeWoPxr5uaf?p=preview
app.js
// public/js/app.js
angular.module('myApp', ['ngFlash'
])
.config(['$locationProvider', '$httpProvider', 'FlashProvider',
function($locationProvider, $httpProvider, FlashProvider) {
FlashProvider.setTimeout(5000);
}])
.controller('MainCtrl', function($scope, $rootScope, $http, $location, $window, Flash) {
$scope.test = "test";
$scope.show = function() {
var message = 'Welcome '
var id = Flash.create('success', message, 0, {class: 'custom-class', id: 'custom-id'}, true);
alert("show");
}
});
html template:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/script.js/2.4.0/script.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular-flash.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
{{ test }}
<flash-message duration="5000"></flash-message>
<button ng-click="show()">Test</button>
</body>
</html>
According to how to use | angular-flash for Flash.create(...),
Third argument (number, optional) is the duration of showing the flash. 0 to not automatically hide flash (user needs to click the cross on top-right corner).
Hence, I changed your Flash.create function to contain 5000 instead of 0 which was your timeout:
Flash.create('success', message, 5000, {
class: 'custom-class',
id: 'custom-id'
}, true);
And, it works!
Here's working example
Coding is new to me and I tried to play with Papaparse and AngularJS. My code is below. I seem to miss something and hope someone could help me.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="mainController">
<p>{{test}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('papa', function() {
Papa.parse("test.csv", {
download: true,
header: true,
dynamicTyping: true,
complete: function(results) {
console.log(results.data);
}
})
});
app.controller('mainController', function($scope, papa) {
$scope.test = papa;
console.log($scope.test);
});
</script>
</body>
</html>
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;
}]);
This is my code
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'gender' },
{ field: 'company', enableSorting: false }
]
};
$timeout(function () {
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}, 2000);
}])
.directive('gridLoading', function () {
return {
restrict: 'C',
require: '^uiGrid',
link: function ($scope, $elm, $attrs, uiGridCtrl) {
$scope.grid = uiGridCtrl.grid;
}
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.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="font-awesome#*" data-semver="4.1.0" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
<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 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">
Click on a column header to sort by that column. (The third column has sorting disabled.)
<br />
<br />
<div ui-grid="gridOptions" class="grid">
<div class="well grid-loading" ng-show="grid.rows.length == 0">
<i class="fa fa-spin fa-spinner"></i>
<strong>Data Loading...</strong>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
In the above code i got loading symbol on ui-grid before data rendering on grid, but the loading symbol appear on down of ui-grid.so i want to display loading symbol inside on ui-grid before data rendering on grid.
This is my plunker http://plnkr.co/edit/6ED6fPdGGwLNb1Zqubls?p=preview
One quick fix that may do what you need is purely a CSS change.
I added top: 0px; left: 0px; to the styles for the loading progress container, and it seems to cover the grid as you wish.
Here's my plunker.
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();
}
}
]