Here i have created a record using ng-grid but wat i need is when i select the selectAll checkbox the selected records should appear in the same page .when i unselect any checkbox in a record the tick mark in selectAll checkbox should not appear in the checkbox the same example which we use in our g-mail plz help me wit this
-----here is my index.html-------
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<label>
<input type="checkbox"
ng-model="allChecked"
ng-click="checkAll()" /> Select All
</label>
<span ng-model="person.check" ng-click="changeCheckAll()">
<div class="gridStyle" ng-grid="gridOptions" ></div>
</span>
<span ng-repeat="person in people | filter: {check:true}">
<div class="gridStyle" ng-grid="gridOptions1" ></div>
</span>
</body>
</html>
And here is my script...
-------script.js-------
// Code goes here
// script.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.people = [{
name: "Moroni",
age: 50,
}, {
name: "Tiancum",
age: 43,
}, {
name: "Jacob",
age: 27,
}, {
name: "Nephi",
age: 29,
}, {
name: "Enos",
age: 34,
}];
$scope.gridOptions = {
data: 'people',
columnDefs: [{field: 'check',
displayName: 'Check',
cellTemplate: '<input type="checkbox">'
}, {
field: 'age',
displayName: 'Age'
}, {
field: 'name',
displayName: 'Name'
}]
};
$scope.gridOptions1 = {
data: 'people',
columnDefs: [ {
field: 'age',
displayName: 'Age'
}, {
field: 'name',
displayName: 'Name'
}]
};
$scope.checkAll = function() {
for(var i=0; i < $scope.people.length; i++) {
$scope.people[i].check = $scope.allChecked;
}
};
$scope.changeCheckAll = function() {
for(var i = 0; i < $scope.people.length; i++) {
if (!$scope.people[i].check) {
$scope.allChecked = false;
return false;
}
}
$scope.allChecked = true;
};
});
here is my plnkr:http://plnkr.co/edit/ubatnOV83gz1sF3zaVTf?p=preview
Use showSelectionCheckbox to set grid options. Here is the link
http://angular-ui.github.io/ui-grid/
Related
I just started trying our lumX. I am trying to use the datatable from this link.
But I think the controller data is not binding. I am new to AngularJs so any help would be appreciated.
I have attached the screenshot of output.
Following is the code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LumX</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Head -->
<link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
<link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">
<div class="toolbar has-divider has-divider--dark">
<div class="toolbar__label pl">
<span>{{ vm.selectedRows.length || 0 }} selected item(s)</span>
</div>
<div class="toolbar__right">
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length === 1">
<i class="mdi mdi-pencil"></i>
</lx-button>
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length >= 1">
<i class="mdi mdi-delete"></i>
</lx-button>
</div>
</div>
<lx-data-table id="lolo" lx-selectable="true" lx-thead="vm.dataTableThead" lx-tbody="vm.dataTableTbody"></lx-data-table>
<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
<script src="app.js"></script>
<script src="datatable.js"></script>
</body>
</html>
app.js
(function()
{
'use strict';
angular
.module('lumxdemo', [
'lumx',
'Controllers'
]);
angular.module('Controllers', []);
})();
datatable.js
(function()
{
'use strict';
angular
.module('Controllers')
.controller('DemoDataTableController', DemoDataTableController);
DemoDataTableController.$inject = ['$filter', '$scope'];
function DemoDataTableController($filter, $scope)
{
var vm = this;
vm.dataTableThead = [
{
name: 'dessert',
label: 'Dessert',
sortable: true
},
{
name: 'calories',
label: 'Calories',
sortable: true
},
{
name: 'fat',
label: 'Fat (g)',
sortable: true,
sort: 'asc'
},
{
name: 'comments',
label: 'Comments',
icon: 'comment-text',
sortable: false
}];
vm.advancedDataTableThead = angular.copy(vm.dataTableThead);
vm.advancedDataTableThead.unshift(
{
name: 'image',
format: function(row)
{
return '<img src="' + row.image + '" width="40" height="40" class="img-round">';
}
});
vm.dataTableTbody = [
{
id: 1,
image: '/images/placeholder/1-square.jpg',
dessert: 'Frozen yogurt',
calories: 159,
fat: 6.0,
comments: 'Lorem ipsum'
},
{
id: 2,
image: '/images/placeholder/2-square.jpg',
dessert: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
comments: 'Lorem ipsum',
lxDataTableDisabled: true
},
{
id: 3,
image: '/images/placeholder/3-square.jpg',
dessert: 'Eclair',
calories: 262,
fat: 16.0,
comments: 'Lorem ipsum'
}];
$scope.$on('lx-data-table__select', updateActions);
$scope.$on('lx-data-table__unselect', updateActions);
$scope.$on('lx-data-table__sort', updateSort);
////////////
function updateActions(_event, _selectedRows)
{
vm.selectedRows = _selectedRows;
}
function updateSort(_event, _column)
{
vm.dataTableTbody = $filter('orderBy')(vm.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false);
}
}
})();
Looks like you're just missing an ng-controller in your example so the data can bind correctly.
If you add it to the <body> element for example, it should work as expected.
So change:
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">
to:
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }" ng-controller="DemoDataTableController as vm">
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 ui-grid for testing purpose. I added a checkbox on each row and a select on header.
HTML
<!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>
<script src="main.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
</body>
</html>
JS
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{
name: 'Items',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{value: '0', label: 'Unselect'},
{value: '1', label: 'Selected'}
]
},
cellTemplate: '<input type="checkbox" name="select_item"/>'
},
{
name: 'Name',
field: 'name'
},
{
name: 'Age',
field: 'age'
}
]
};
$scope.gridOptions.data = [
{ name: 'User 1', age: 20},
{ name: 'User 2', age: 30},
{ name: 'User 3', age: 40}
];
}]);
And this is the result
So how can I filter items by checked/uncheck checkbox? I only want to see all checked or unchecked items using filter.
I added the attribute selected to your data in order to be able to filter using the checkbox. You can delete it if you want to send data to the server.
modifications:
template:
`cellTemplate: '<input type="checkbox" name="select_item" value="true" ng-model="row.entity.selected"/>`'
data:
$scope.gridOptions.data = [
{ name: 'User 1', age: 20,selected:false},
{ name: 'User 2', age: 30,selected:false},
{ name: 'User 3', age: 40,selected:false}
];
here is a plunnker: pluncker
But,I recommand to use the selector of the ui-grid: tutorial of ui-grid selector
here i want to get the hyperlink value ( in my case data in json object) ie 6 and 7 in hyperlink format. I have converted the cell template but i m not able to get the value of json in the grid. i get "link" as text not its value
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>var app = angular.module('myApp', ['ngGrid']);
main.js
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50, link: 6},
{name: "Tiancum", age: 43, link: 7},
];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'Name' },
{ field: 'age', displayName: 'Age' },
{ field: 'link', displayName: 'Link',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">link</div>'
}]
};
});
Give a name to your links:
$scope.myData = [{
name: "Moroni",
age: 50,
link: "http://www.google.com",
linkname: "Google"
}, {
name: "Tiancum",
age: 43,
link: "http://www.stackoverflow.com",
linkname: "Help me!"
}, ];
Then use this celltemplate:
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.linkname}}</a></div>'
Have a look at this Plunker with the full code
Or, if you can not add a field to your json try this template:
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.link}}</a></div>'
Change your template to this:
<div class="ngCellText" ng-class="col.colIndex()">{{ col.link }}</div>
How can we display a selected column in angular.js and copy it to clipboard?
Currently I am trying to display user selected column. Also need to know how each row item of a column could be copied in this scenario:
debugger;
var app = angular.module('myApp', ['ngGrid']);
app.controller('GridExampleCtrl', function($scope, $http, $timeout) {
debugger;
$scope.myData = [];
$scope.grid1 = [{
name: "grid1a",
age: 50
}, {
name: "grid1b",
age: 43
}, {
name: "grid1c",
age: 50
}, {
name: "grid1d",
age: 29
}, {
name: "grid1e",
age: 34
}];
$scope.grid2 = [{
lastname: "grid2a",
age: 50,
state: 'Idaho'
}, {
lastname: "grid2b",
age: 43,
state: 'NewYork'
}, {
lastname: "grid2c",
age: 50,
state: 'California'
}, {
lastname: "grid2d",
age: 29,
state: 'Arizona'
}, {
lastname: "grid2e",
age: 34,
state: 'Utah'
}];
$scope.gridSels = [{
GridSelId: 1,
GridSelName: 'Grid 1'
}, {
GridSelId: 2,
GridSelName: 'Grid 2'
}]
debugger;
$scope.gridOptions = {
data: 'myData',
enableColumnResize: true,
showGroupPanel: true
//pagingOptions: $scope.pagingOptions
};
$scope.selectedCls = function(index) {
if ($scope.sortColumn === $scope.columnHeaders[index].Value) {
return $scope.sortColumn;
}
};
debugger;
$scope.display = function() {
debugger;
console.log("User selected grid : " + $scope.gridSelectedId);
if ($scope.gridSelectedId == 1) {
$scope.myData = $scope.grid1;
console.log("User selected grid : " + $scope.gridSelectedId + ", Column : " + $scope.selectedCls + " : " + " Column : " + $scope.columnHeaders[index].Value);
} else {
$scope.myData = $scope.grid2;
console.log("User selected grid : " + $scope.gridSelectedId + ", Column : " + $scope.selectedCls + " : " + " Column : " + $scope.columnHeaders[index].Value);
}
};
});
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
.green {
background-color: green;
color: white;
}
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>test</title>
<link href="Content/ng-grid.css" rel="stylesheet" />
<link href="Content/Style.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Gridata_refqam.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ng-grid.js"></script>
</head>
<body ng-controller="GridExampleCtrl">
<div>
Grid Selection:
<select ng-model="gridSelectedId">
<option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option>
</select>
<br />User selected: {{gridSelectedId}}
<br>
<hr>
<br />Cols: {{$scope.selectedCls}}
<br>
<hr>
<br />Cols2: {{$scope.sortColumn}}
<br>
<hr>
<div>
<button ng-click="display()">Display</button>
<hr>
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
</html>
Please find my mock UI i did to get the solution , hope this helps to resolve the issue
http://plnkr.co/edit/BEz6YSkXuT4WwZQWUh5P
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Bala", age: 25},
{name: "Vinoth", age: 45},
{name: "Kumar", age: 51},
{name: "Santhosh", age: 38},
{name: "Praveen", age: 21}];
var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" >'+
'<div ng-click="copyColumn($event,col)" ng-class="\colt\ + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
'</div>';
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'First Name', width: 90, headerCellTemplate: myHeaderCellTemplate },
{ field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader', headerCellTemplate: myHeaderCellTemplate} ]
};
$scope.copyColumn = function(evt,col) {
var clipBoard = '';
for(var i=0;i< $scope.myData.length; i++){
if(col.index === 0){
clipBoard = clipBoard +' '+ $scope.myData[i].name;
}
else{
clipBoard = clipBoard +' '+ $scope.myData[i].age;
}
}
alert(clipBoard);
};
});
/*style.css*/
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
.green {
background-color: green;
color: white;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>