Trying to follow the docs provided here on their website, but still not able to get it to work.
I am scanning a table using AWS DynamoDB, and trying to display the information in the table within this UI grid.
My controller:
angular.module('App')
.controller('GridCtrl', ['modelObjects', '$scope', 'dbCall', function(modelObjects, $scope, dbCall) {
$scope.gridOptions = {
enablesorting: true,
columndefs: [{
field: 'ref id'
}, {
field: 'group'
}, {
field: 'cost center'
}, {
field: 'cost center description',
}, {
field: 'recruitment firm',
enablesorting: false
}],
};
$scope.updateGrid = function(data) {
// for (var key in data) {
// var item = data[key];
// for (var key2 in item) {
// console.log(item[key2]);
// $scope.gridOptions.data = item[key2];
// }
// }
$scope.gridOptions.data = data;
};
$scope.scanPosition = function() {
var params = {};
return dbCall('addGrid', params, $scope.check);
};
$scope.check = function(err, data) {
if (err) {
$scope.results = "Failure: Unable To Connect To Database";
console.log(err);
}
else {
$scope.results = "Success: Position Table Scanned";
console.log(data);
$scope.updateGrid(data);
}
};
setTimeout(function() {
$scope.scanPosition();
}, 50);
}]);
My View:
<!DOCTYPE html>
<html>
<head></head>
<body ng-app="App">
<div class="col-lg-10 col-lg-offset-2 col-sm-9 col-sm-offset-3 col-xs-12">
<div class="container-fluid">
<br>
<div class="panel panel-default" style="align: center; border:1px solid #d4d4d4;">
<div class="panel-heading" style="text-align: center;">
<h3>Grid Page</h3>
</div>
</div>
<div ui-grid="gridOptions" class="myGrid"></div>
</div>
</div>
</body>
</html>
My database is working; I am able to loop and display the information in the console. It just isn't being displayed in the grid. I have no console errors.
Thanks in advance for any help!
It looks like you need to set the grid data like this:
$scope.gridOptions.data = data.Items;
Since data.Items is the array of objects.
In Addition to #GDan, there's no controller specified in the HTML file. Only ng-app="App". Try adding ng-controller="GridCtrl" in one of the parent divs surrounding the ui-grid directive.
CodePen and Snippet below:
http://codepen.io/Lethargicgeek/pen/rLbZGp?editors=1010
angular.module('App', ['ui.grid']);
(function() {
angular.module('App').controller('GridCtrl', ctrlFn);
ctrlFn.$inject = ['modelObjects', 'dbCall', '$timeout'];
function ctrlFn(modelObjects, dbCall, $timeout) {
var $ctrl = this;
// BINDING
$ctrl.gridOptions = {
enableSorting: true,
columnDefs: [{
field: 'ref id'
}, {
field: 'group'
}, {
field: 'cost center'
}, {
field: 'cost center description',
}, {
field: 'recruitment firm',
enablesorting: false
}],
};
// END BINDING
// INIT
$timeout(function() {
scanPosition();
}, 1000);
// END INIT
function updateGrid(data) {
$ctrl.gridOptions.data = data;
};
function scanPosition() {
var params = {};
return dbCall.dbCall('addGrid', params, check);
};
function check(err, data) {
if (err) {
$ctrl.results = "Failure: Unable To Connect To Database";
console.log(err);
} else {
$ctrl.results = "Success: Position Table Scanned";
console.log(data);
updateGrid(data);
}
};
}
})();
// Mocked Service modelObjects
(function() {
angular.module('App').service('modelObjects', svcFn);
function svcFn() {}
})();
// Mocked Service dbCall
(function() {
angular.module('App').service('dbCall', svcFn);
function svcFn() {
var svc = this;
svc.dbCall = dbCall;
function dbCall(action, params, callBackFn) {
// Should really use a promise rather than a callbackFn
callBackFn(null, [{
'ref id': "fooRef",
'group': "fooGroup",
"cost center": "fooCostCenter"
}]);
}
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head></head>
<body ng-app="App">
<div class="col-lg-10 col-lg-offset-2 col-sm-9 col-sm-offset-3 col-xs-12" ng-controller="GridCtrl as $ctrl">
<div class="container-fluid">
<div>$ctrl.results: {{$ctrl.results}}</div>
<div class="panel panel-default" style="align: center; border:1px solid #d4d4d4;">
<div class="panel-heading" style="text-align: center;">
<h3>Grid Page</h3>
</div>
</div>
<div ui-grid="$ctrl.gridOptions" class="myGrid"></div>
</div>
</div>
</body>
</html>
Try changing "columndefs" to "columnDefs" and "enablesorting" to "enableSorting". That's what I see off of the top, but I'm still looking. You're also missing "ng-controller="GridCtrl" after ng-app="App" in your HTML. Also, make sure you included the script for the grid and injected into your module.
Related
This is The Data in the sql db
and this is the AngulaJJ Ui-Calendar
The Problem is: the data in the db presented with another values in the UI
'use strict';
app.controller('eventController', ['$scope', 'uiCalendarConfig', '$http', 'ngAuthSettings', function ($scope, uiCalendarConfig, $http, ngAuthSettings) {
var serviceBase = ngAuthSettings.apiServiceBaseUri;
$scope.SelectedEvent = null;
var isFirstTime = true;
$scope.events = [];
$scope.eventSources = [$scope.events];
//get the events data from server
$http.get(serviceBase + 'api/Event/GetEvents', {
cache: true,
params: {}
}).then(function (data) {
//get and push events data to calendar here
console.log(data.data);
$scope.events.slice(0, $scope.events.length);
angular.forEach(data.data, function (value) {
$scope.events.push({
title: value.EventTitle,
description: value.EventDescription,
start:parseInt(value.StartDate),
end: parseInt(value.EndDate),
allDay: value.IsFullDay,
stick: true
});
});
});
//Calender configration in angular
$scope.uiConfig = {
calendar: {
height: 700,
editable: true,
displayEventTime: false,
header: {
left: 'month basicWeek basicDay agendaWeek agendaDay',
center: 'title',
right: 'today prev,next'
},
eventClick: function (event) {
$scope.SelectedEvent = event;
},
eventAfterAllRender: function () {
if ($scope.events.length > 0 && isFirstTime) {
//Focus first event
uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
isFirstTime = false;
}
}
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1 class="form-login-heading">Calendar</h1>
<div ng-controller="eventController">
<div class="row">
<div class="col-md-12 col-lg-12">
<div id="calendar" ui-calendar="uiConfig.calendar" class="bold blue" ng-model="eventSources" calendar="myCalendar"></div>
</div>
<div class="row col-md-4 text-center center">
<div ng-show="SelectedEvent" class="alert alert-success" style="margin-top:50px">
<h2 style="margin-top:0px"> Selected Event:</h2>
<h3 style="color:#A9A50E">{{SelectedEvent.title}}</h3>
<p>{{SelectedEvent.description}}</p>
</div>
</div>
</div>
</div>
I used:
start: new Date(parseInt(value.StartDate)) > Not Working
and also used:
the data type in the db of this col > DateTime , Date , nvarchar. > Not Working and Same Error.
To sum up:
The problem is: in db the date = 2018-09-09 but in the Ui-view( using angularJS) date = 1-1-1970.
I need to know where is the problem, and how to solve it
The date you have received from service is in string format you need to convert it to javascript date object.
so in your case you can do it as follows
start: new Date(value.StartDate)
I study AngularJS, now try to add an attribute based on one (or multiple) condition(s).
But this code (CodePen here) doesn't seem to work:
function myController($scope) {
console.log("start");
$scope.item = { myBool: false };
$scope.myClick = function(e) {
var myHref = angular.element(e.delegateTarget).data(href);
console.log(myHref);
};
}
.test{background: lightblue; height: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div np-app ng-controller="myController">
<div class="test"
data-href="{undefined: !item.myBool, 'http://yes.com': item.myBool}"
ng-click="myClick($event);console.log('end');">click & see the console</div>
</div>
actually the data-href attribute should not be defined, as myBool == false...
Use interpolation for that:
angular.module('myApp', [])
.controller('myController', function($scope) {
console.log("start");
$scope.item = {
myBool: false
};
$scope.myClick = function(e) {
$scope.item.myBool = !$scope.item.myBool;
console.log(angular.element(e.target).attr("href"));
};
});
.test{background: lightblue; height: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="test" href="{{item.myBool ? 'http://yes.com' : undefined}}" ng-click="myClick($event)">
click & see the console
</div>
</div>
Finally, updated a little bit the Vanojx1 answer to:
angular.module('myApp', [])
.controller('myController', function($scope) {
console.log("start");
$scope.item = { myBool: false };
$scope.myClick = function(e) {
$scope.item.myBool = !$scope.item.myBool;
console.log(angular.element(e.target).attr("href"));
console.log(angular.element(e.target).attr("noarg"));
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="test" ng-attr-href="{{item.myBool? 'http://yes.com' : undefined}}" ng-click="myClick($event)">
click & see the console
</div>
</div>
Important improvements:
updated the Angular version to be > 1.3 (actually I used an ancient one);
used the ng-attr-xxx attribute that is removed (the attribute itself, not just its value) if its value estimated to undefined;
I have two separate controllers which shared a property. If the first controller changes the property the second controller should recognize it and should change the text in the codemirror text area. I tried to figure it out in this fiddle example but I could not find a solution.
var app = angular.module('myApp', ['ui.codemirror']);
app.service('sharedProperties', function() {
var objectValue = {
data: 'test object value'
};
return {
setText: function(value) {
objectValue.data = value;
},
getText: function() {
return objectValue;
}
}
});
app.controller('myController1', function($scope, $timeout, sharedProperties) {
$scope.setText = function(text){
sharedProperties.setText(text);
console.log(sharedProperties.getText().data);
}
});
app.controller('myController2', function($scope, sharedProperties) {
$scope.editorOptions = {
lineWrapping: true,
lineNumbers: true,
readOnly: 'nocursor',
mode: 'xml'
};
$scope.mappingFile = sharedProperties.getText();
console.log($scope.mappingFile);
});
<div ng-app="myApp">
<div ng-controller="myController1">
<input type="text" ng-model="newText"></input>
<button ng-click="setText(newText)">Set Text</button><br/>
</div>
<div ng-controller="myController2">
<ui-codemirror ui-codemirror-opts="editorOptions" ng-model="mappingFile.data" ui-refresh="true"></ui-codemirror>
</div>
</div>
At first, the way that you're doing you have 2 controllers in the same page but without any relation, I'd suggest you to make one of them as child of another.
So, to achieve what you want you need do a kind of watch on that variable from the parent controller.
Steps:
Use the $broadcast to send data to the child controller
$scope.$broadcast('newText', $scope.newText);
Use $on to receive the data from the parent controller:
$scope.$on('newText', function(event, text) {
...
});
Here's the code working based on your original code:
(function() {
'use strict';
angular
.module('myApp', ['ui.codemirror'])
.controller('myController1', myController1)
.controller('myController2', myController2);
myController1.$inject = ['$scope', '$timeout'];
function myController1($scope, $timeout) {
$scope.setText = function(text) {
console.log('Sent...', $scope.newText);
$scope.$broadcast('newText', $scope.newText);
}
}
myController2.$inject = ['$scope'];
function myController2($scope) {
$scope.editorOptions = {
lineWrapping: true,
lineNumbers: true,
readOnly: 'nocursor',
mode: 'xml'
};
$scope.$on('newText', function(event, text) {
if (!text) return;
$scope.mappingFile = text;
console.log('Received... ', $scope.mappingFile);
});
}
})();
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-codemirror/master/src/ui-codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController1">
<input type="text" ng-model="newText">
<button ng-click="setText()">Set Text</button>
<hr>
<div ng-controller="myController2">
<textarea ui-codemirror-opts="editorOptions" ng-model="mappingFile"></textarea>
</div>
</div>
</div>
</body>
</html>
Some notes:
You don't need to pass ngModel as parameter in your ngClick, you can access it directly in your controller simply calling $scope.newText (as I did);
<input> is a self-closing tag, so of course, you don't need to close it.
I hope it helps.
I am trying to create a custom filter , but despite following the correct structure I think something is wrong.
angular.module('App', [])
.filter("htmlToPlaintext", function() {
return function(text) {
return String(text).replace(/<[^>]+>/gm, '');
}
})
.controller ('mainCtrl',['$scope','$filter', function($scope,$filter){
$scope.items=[
{id: '1', title: '<b>Chicago</b>'},
{id: '2', title: '<b><i>New York</i></b>'},
{id: '3', title: '<div><p>Washington</p></div>'}
];
};
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-app="App">
<div ng-controller="mainCtrl">
<div ng-repeat="item in items">
{{item.title | htmlToPlainText}}
</div>
</div>
</div>
Ideally you should declare your filter within it's own module and then inject it into the App module. But you can attach the filter to the App module directly. Below is a working example:
angular.module('App', [])
.filter("htmlToPlaintext", function() {
return function(input) {
return input.replace(/<[^>]+>/gm, '');
}
})
.controller('mainCtrl', ['$scope',
function($scope) {
$scope.items = [{
id: '1',
title: '<b>Chicago</b>'
}, {
id: '2',
title: '<b><i>New York</i></b>'
}, {
id: '3',
title: '<div><p>Washington</p></div>'
}];
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
<div ng-controller="mainCtrl">
<div ng-repeat="item in items">
{{item.title | htmlToPlaintext}}
</div>
</div>
</div>
You don't need to use $filter as you are using HTML Template Binding.
Extracting text from HTML via Regexps it not good idea. Especially if you encounter with something weird, like this html
<span>2 < 3<span>
Your filter gives you 2, but actually here should be 2 < 3.
If you want to manage all possible cases properly, you should use some DOM-API:
.filter("htmlToPlaintext", function() {
return function(text) {
var div = document.createElement("div");
div.innerHTML = html;
return div.textContent || "";
}
})
Look at this answer for similar question to know more.
I want to open a Pop Up window on the click of a link on a Kendo Grid column. The Pop window should contain the detailed data of the current row. Something like given in http://demos.telerik.com/kendo-ui/grid/custom-command link. But I want this to work on click of a link of an existing column rather than a new custom button.
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div id="grid" kendo-grid k-options="kendoGrid"></div>
</div>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', function ($scope, myService) {
$scope.kendoGrid = myService.getKGrid();
});
Service:
myApp.service('myService', function () {
this.getKGrid = function () {
var kGrid = {
dataSource: [{"Col1":"Val1","Col2":"Val2"}],
columns: [{
field: "Col1",
title: "Col1"
},
{
field: "Col2",
title: "Col2",
template: "<a href='\\#' class='link' **ng-click='TBD(Open Pop-up window with row details)'**>#=Col2#</a>"
}
]
};
return kGrid;
};
});
Please guide how to achieve this.
Thanks in Advance.
I am able to display the pop up kendo window with row details by making below changes.
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div id="grid" kendo-grid k-options="kendoGrid"></div>
<div id="details"></div>
<div id="detailsTemplate" style="display: none;">
<div class="row">
<text>Data :</text> <text>#=Col1#</text><!--We can add more data here-->
</div>
</div>
</div>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', function ($scope, myService) {
$scope.kendoGrid = myService.getKGrid();
$scope.showDetails = function (dataItem) {
myService.showWindow(dataItem);
}
});
Service:
myApp.service('myService', function () {
this.showWindow function () {
var window = angular.element(details)
.kendoWindow({
title: "Details",
modal: true,
visible: false,
resizable: false,
width: 600
}).data("kendoWindow");
var detailsTemplate = kendo.template(angular.element(detailsTemplate).html());
window.content(detailsTemplate(dataItem));
window.center().open();
};
this.getKGrid = function () {
var kGrid = {
dataSource: [{"Col1":"Val1","Col2":"Val2"}],
columns: [{
field: "Col1",
title: "Col1"
},
{
field: "Col2",
title: "Col2",
template: "<a href='\\#' class='link' ng-click='showDetails(dataItem)'>#=Col2#</a>"
}
]
};
return kGrid;
};
});