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">
Related
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
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;
}
}]
};
}]);
I am not able to get the kendo-grid on my html screen. It does not shows any error but does not shows the outut as well.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="KendoDemos">
<h1>Customer list</h1>
<div ng-controller="CustomerController">
<!--<kendo-grid options="mainGridOptions">
</kendo-grid>-->
<div ng-controller="CustomerController" id="myKendoDemos" kendo-grid k-data-source="gridData" k-columns="gridColumns"></div>
</div>
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
<!--<script src="Scripts/kendo/2014.2.716/kendo.grid.min.js"></script>
<script src="Scripts/kendo/2014.2.716/kendo.core.min.js"></script>-->
<script>
var app = angular.module("KendoDemos", ["ngRoute"]);
app.controller("CustomerController", function ($scope) {
$scope.gridData = [
{ customerId: 1, customerName: 'shikhar1' },
{ customerId: 2, customerName: 'shikhar2' },
{ customerId: 3, customerName: 'shikhar3' },
{ customerId: 4, customerName: 'shikhar4' }
//{
//dataSource: "http://localhost:58816/api/Values"
// }
];
$scope.gridColumns = [{
field: "customerId",
title: "customerId",
width: "120px"
}, {
field: "customerName",
title: "customerName",
width: "120px"
}];
});
</script>
</body>
</html>
First of all since you are using kendo-grid, k-data-source and k-columns which are directives, you need to add kendo.directives as an app dependency
var app = angular.module("KendoDemos", ["ngRoute", "kendo.directives"]);
Here's a Working Plunk of a Kendo Grid using your options. Hope this helps
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>
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/