I'm going to turn a REST dataset into an ng-grid component. I'm using the basic demo which ships with ng-grid component but using an $http.get to populate the grid:
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script language="javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('Hello', function($scope, $http) {
$http.get('http://server/json').
success(function(data) {
$scope.myData = data;
});
});
$scope.gridOptions = {
data: 'myData',
enableRowSelection: false,
enableCellEditOnFocus: true,
multiSelect: false,
columnDefs: [
{ field: 'name', displayName: 'name', enableCellEdit: false } ,
{ field: 'surname', displayName: 'surname', enableCellEdit: false }
]
};
});
</script>
</head>
<body ng-controller="Hello">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
I've tried the above code, however the REST service is not invoked and the grid is displayed as a blank div. I've tried with several variations of the $http.get method with no luck.
Any help ?
Thanks!
Your gridOptions seem to be set outside the controller. Move it inside and it should work.
You need to change
http://server/json
to the endpoint you're calling to actually get the data. ://server/json is just a placeholder for your actual endpoint. The div is empty because there's no data there.
Related
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 first time trying to use a Kendo control, and my BA is requiring it for my current project (I have been using Angular-ui-grid). I can't get the Kendo grid to show at all with test data and I am clueless as to what I am missing. The Console in Chrome says "Kendo requires JQuery to be loaded before Angular. However, the JQuery bundle is set to load first. I even put jquery-1.8.2.js before the angular.js script tag, but it still says the same thing I have the following script tags in my _Layout.cshtml page:
#Styles.Render("~/CSS/bootstrap")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="~/Scripts/dirPagination.js"></script>
<script src="~/Scripts/app/checklist-model.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-touch.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/pdfmake/pdfmake.min.js"></script>
<script src="~/Scripts/pdfmake/vfs_fonts.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<link href="~/Content/ui-grid.css" rel="stylesheet" />
<script src="~/Scripts/ui-grid.js"></script>
<script src="~/Scripts/draggable-rows.js"></script>
<script src="~/Scripts/app/Home/OperatorHomeCtrl.js"></script>
<script src="~/Scripts/app/Home/operatorHomeService.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2015.1.429/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="~/Scripts/angular-kendo.js"></script>
Here is my module:
var app = angular.module('myModule', ['ui.bootstrap', 'checklist-model', 'kendo.directives','ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ui.grid.draggable-rows'])
Here is my Controller:
angular.module('myModule').controller("TestCtrl", function ($compile, $scope, $log) {
$scope.gridOptions = {
pageable: false,
batch: false,
reorderable: true,
sortable: true,
editable: "inline",
dataSource: new kendo.data.DataSource({
data: [
{ id: 1, name: "x" },
{ id: 2, name: "y" }
],
schema: {
model: {
id: "id",
fields: {
'Name': { type: "string", editable: true },
}
}
}
}),
columns: [
{ field: "name" },
{ template: '<button class=\'k-button\' ng-click=\'test("custom1")\'><i class="icon-edit"></i>custom1</button>' },
{
command: [
{ name: "edit", text: " " },
{ name: "destroy", text: " " },
{ template: '<button class=\'k-button\' ng-click=\'test("custom2")\'><i class="icon-edit"></i>custom2</button>' }
]
}
]
};
$scope.test = function (m) {
alert(m)
};
});
Here is my HTML:
<script src="~/Scripts/app/Test/TestCtrl.js"></script>
<div ng-app="myModule" ng-controller="TestCtrl">
<kendo-grid k-options="gridOptions">
</kendo-grid>
</div>
Can someone please tell me what I am missing here?
Any assistance is greatly appreciated!
Got the grid to show up, although the headers don't line up correctly with the body. It did not like the Script tag written as:
<script src="~/Scripts/angular-kendo.js"></script>
I had to change it to:
<script src="#Url.Content("~/Scripts/angular-kendo.js")"></script>
Something's causing the header cells to not line-up correctly, but at least the grid is showing. Thanks all for trying to help!
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;
}
}]
};
}]);
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();
}
}
]