Hi I need to have a expandable ui-gird, while expanding a row need to show the detail view of the selected row in Ul li.
I check in official site, but doesn't found anything, is it possible in ui-grid ?
Thanks
You need to provide your own expandableRowTemplate, showing the details of that row.
For example, see this Plunkr, based on the example's Plunkr :
expandableRowTemplate.html:
<div >{{row.entity.name}} ({{row.entity.age}})</div>
app.js:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable']);
app.controller('MainCtrl', function MainCtrl($http, $log) {
var vm = this;
vm.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: '*',
showExpandAllButton: false
};
vm.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
vm.gridOptions.data = response.data;
});
vm.gridOptions.onRegisterApi = function(gridApi){
vm.gridApi = gridApi;
};
});
I have a requirement to create a multiselect dropdown using angularjs with values coming from database based on different parameters.I have implemented following code. It is working fine when the page loads at first time. If come to this page second time, the $http.get function is not executing and still showing the same data as in the first page load.
This is my .js file:
var app = angular.module("myModule", ["angularjs-dropdown-multiselect"]);
app.controller("myController", ['$scope','$http', function ($scope,$http) {
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
This is my html file :
<div ng-app="myModule" ng-controller="myController" >
<div class="container">
<div id="divRight" style="min-height:5px;display: inline-block; width: 40%; vertical-align: top;">
<label style="float:left;">Error Description : </label>
<div style="float:left;width:200px;margin-left:10px" ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="AllDescriptions" selected-model="DescriptionsSelected" checkboxes="true"></div>
</div>
</div>
</div>
This is my .cs file :
public JsonResult MethodName()
{
List<string> errorDescriptions = //Get from server
return new JsonResult() { Data=errorDescriptions,JsonRequestBehavior=JsonRequestBehavior.AllowGet};
}
Kindly help me to execute this JSON method for every page request instead of only in the first page request. Thank you.
I think the problem is with cache. Try to put your get method in variable ($scope.GetDescriptions = function () { $http.get... }) and use ng-init directive
(<div class="container" ng-init="GetDescriptions()">). Also try to empty array before push elements in it ($scope.AllDescriptions = [], $scope.AllDescriptions.push(...)
Try adding $route.reload(), this reinitialise the controllers but not the services:
app.controller("myController", ['$scope','$http','$route' function ($scope,$http,$route) {
$route.reload(); // try pass parameter true to force
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
If you want to reset the whole state of your application you can use $window.location.reload(); instead route like:
app.controller("myController", ['$scope','$http','$route' function ($scope,$http,$route) {
$window.location.reload(); // try pass parameter true to force
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
Hope this works.
I have a map built on angular. https://vineyardcincinnati.com/nigeria-map
I have a field updating based on the google marker clicked. Is there a way to initialize an angular object based on the page load? The content box is currently blank until the user sends JSON data based on a click event.
Here is my angular code:
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow({
maxWidth: 200
});
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.location,
image: info.img,
date: info.date,
quote: info.quote
});
marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent(marker.content);
$scope.selectedMarker = marker;
$scope.$apply();
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});
Here is my view
<div id="containter" ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<div id="class">
<h1> {{selectedMarker.title}}</h1>
<p>{{selectedMarker.quote}}</p>
<p>Completed {{selectedMarker.date}}</p>
</div>
</div>
Use $timeout from inside your directive's controller:
$timeout(function() {
// initialize plugin on load here...
});
You can use module.run.
angular.module('myModule',[])
.run(function($rootScope){
$rootScope.selected = "foo";
// code runs on module init
}
I am using John Papa's Angular HotTowel and I don't know how to incorporate Angulars ng-grid into the html. Here is what I've added thanks to wonderful help from stondo. Breeze seems to be adding extra information that is no allowing ng-grid to render the data in the grid. Is there a way to strip the extra info that breeze sends or a work around for ng-grid to behave correctly with breeze data?
angular.module('app').controller(controllerId,
['common', 'datacontext','$scope', '$http', grid2]);
function grid2(common, datacontext, $scope, $http) {
.....
.....
} else {
$http.get('/breeze/Breeze/NoBadgePersonnels').success(function (largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
activate();
function activate() {
common.activateController([mockData()], controllerId)
.then(function() { log('Activated Grid View'); });
function mockData() {
return datacontext.getEmployeePartialsNoBadges().then(function (data) {
return vm.grid2 = data.results;
});
}
}
Additional information
Datacontext.js looks as follows:
(function () {
'use strict';
var serviceId = 'datacontext';
angular.module('app').factory(serviceId,
['common', 'config', 'entityManagerFactory', datacontext]);
function datacontext(common, config, emFactory ) {
var EntityQuery = breeze.EntityQuery;
var getLogFn = common.logger.getLogFn;
var log = getLogFn(serviceId);
var logError = getLogFn(serviceId, 'error');
var logSuccess = getLogFn(serviceId, 'success');
var manager = emFactory.newManager();
var $q = common.$q;
var service = {
getPeople: getPeople,
getMessageCount: getMessageCount,
getEmployeePartials: getEmployeePartials,
getEmployeePartialsNoBadges: getEmployeePartialsNoBadges
};
var entityNames = {
personnel: 'Personnel'
};
return service;
function getEmployeePartialsNoBadges() {
var orderBy = 'lname';
var employees; //variable to hold employees once we get them back
//use query using Employees resource
return EntityQuery.from('NoBadgePersonnels')
.select('id, fname, lname, class, zip, cntySnrDte')
.orderBy(orderBy)
.toType('Personnel')
.using(manager).execute()
.then(querySucceeded, _queryFailed)
function querySucceeded(data) {
employees = data.results;
log('Retrieved [Employee Partials] from remote data source', employees.length, true);
//log('Retrieved [Employee Partials] from remote data source');
return employees;
}
}
function _queryFailed(error) {
var msg = config.appErrorPrefix + 'Error retrieving data from entityquery' + error.message;
logError(msg, error);
throw error;
}
=================================
It seems like the grid sees 5 items that I queried for, however the items don't want to display on the cells. Red arrow indicates that it allocated 5 rows, and green arrow indicates that I have selected one of the rows. Still doesn't display the records.
thanks
nick
I had to modify John Papa's Hottowel.Angular template, because it wasn't working as expected with latest angular/breeze versions. I'll later share a github link and a blog post about that.
I was able to get ng-grid working just adding $scope and $http to the controller. Read the comment inside the code block to see how it could be entirely done without inject $http.
(function () {
'use strict';
var controllerId = 'corrieri';
angular.module('app').controller(controllerId, ['common', 'datacontext', '$scope', '$http', corrieri]); //'$http', '$scope',
function corrieri(common, datacontext, $scope, $http) { //,$http, $scope
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var vm = this;
$scope.corrieriList = [];
vm.corrieri = [];
vm.news = {
title: 'Corrieri',
description: 'Lista Corrieri'
};
vm.title = 'Corrieri';
//ng-grid test
$scope.filterOptions = {
filterText: "",
useExternalFilter: false
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [10, 20, 30],
pageSize: 10,
currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
data = data.map(function (item) {
return {
PK_ID: item.PK_ID,
Ragione_Sociale: item.Ragione_Sociale,
Telefono: item.Telefono,
Nazionalita: item.Nazionalita,
Indirizzo: item.Indirizzo,
Cap: item.Cap,
Provincia: item.Provincia,
Descrizione: item.Descrizione
};
});
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.corrieriList = pagedData; //.results;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('breeze/Corrieri/GetCorrieri').success(function (largeLoad) {
var myModArray = largeLoad.map(function (item) {
return {
Pk_ID: item.Pk_ID,
Ragione_Sociale: item.Ragione_Sociale,
Telefono: item.Telefono,
Nazionalita: item.Nazionalita,
Indirizzo: item.Indirizzo,
Cap: item.Cap,
Provincia: item.Provincia,
Descrizione: item.Descrizione
};
});
data = myModArray.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
$http.get('breeze/Corrieri/GetCorrieri').success(function (largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.gridOptions = {
data: 'corrieriList',
enablePaging: true,
showFooter: true,
showFilter: true,
enableCellEdit: true,
enableColumnResize: true,
enableColumnReordering: true,
pinSelectionCheckbox: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions
};
//ng-grid test end
activate();
function activate() {
var promises = [getCorrieri()];
common.activateController(promises, controllerId)
.then(function () {
log('Activated Corrieri View');
});
}
//This function was used to get data using Breeze Controller
//and I was even able to use it to bind data to ng-grid
//calling the function getCorrieri inside my controller and binding
//gridOptions data to vm.corrieri or just the name of the function (in my case getCorrieri)
// $scope.gridOptions = { data: getCorrieri}
//Be aware that since we r using a Breeze Controller data retrieved have additional
//informations, so we have to remove those, if we bind using vm.corrieri.
//I found it easier to implement paging using $http and $scope, even though I think
//I could do it using only $scope and breeze.
//getCorrieri().then(function() {
// angular.forEach(vm.corrieri, function (cor) {
// delete cor._backingStore['$id'];
// delete cor._backingStore['$type'];
// $scope.corrieriList.push(cor._backingStore);
// });
//});
function getCorrieri() {
return datacontext.getCorrieri().then(function (data) {
return vm.corrieri = data.results;
});
}
}
})();
Below you can find my html for reference. Make sure to surround your's ng-grid div with data-ng-controller or just ng-controller='corrieri'
<section id="corrieri-view" class="mainbar" data-ng-controller="corrieri as vm">
<section class="matter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="widget wgreen">
<div data-cc-widget-header title="Corrieri" allow-collapse="true"></div>
<div class="widget-content text-center text-info">
<div data-ng-controller='corrieri'>
<div class="gridStyle col-md-12" ng-grid="gridOptions">
</div>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
Btw, don't forget to add 'ngGrid' to your modules list in app.js
var app = angular.module('app', ['ngGrid', other modules])
and also include ng-grid css and js in index.html (that is obvious, but better safe than sorry)
I struggled a few days to get this working properly, so I hope to help anyone out there having the same problem.
Try this out:
angular.module('app').controller(controllerId, ['common', 'datacontext', '$scope', grid]);
function grid(common, datacontext, $scope) {
$scope.gridOptions = {
data: 'vm.employees'
};
activate();
function activate() {
common.activateController([getEmployees()], controllerId)
.then(function () { log('Activated Grid View'); });
}
//get data for employees
function getEmployees() {
return datacontext.getEmployeePartialsNoBadges().then(function (mydata) {
return vm.employees = data;
});
}
}
here is an image of what I see
and here is the code I changed:
function getEmployees() {
return datacontext.getEmployeePartialsNoBadges().then(function (mydata) {
log(JSON.stringify(mydata));
return vm.employees = mydata.data;
});
Here is some additional info showing the data is coming through. Remote data source shows 1496 records. The preview for /breeze/breeze show data. I've blanked out sensitive info.
Here is the getEmployeePartialsNoBadges() method in my datacontext that was using entity framework:
function getEmployeePartialsNoBadges() {
var orderBy = 'lname';
var employees; //variable to hold employees once we get them back
//use query using Employees resource
return EntityQuery.from('NoBadgePersonnels')
.select('id, fname, lname, class, zip, cntySnrDte')
.orderBy(orderBy)
.toType('Personnel')
.using(manager).execute()
.then(querySucceeded, _queryFailed)
function querySucceeded(data) {
employees = data.results; //fillup the variable for employee with results
log('Retrieved [Employee Partials] from remote data source', employees.length, true);
//log('Retrieved [Employee Partials] from remote data source');
return employees;
}
}
============================== Nick ==============================
This is what my new mockup looks like now and I put this in datacontext calling it getPeople:
function getPeople() {
var people = [
{ firstName: 'John', lastName: 'Papa', age: 25, location: 'Florida' },
{ firstName: 'Ward', lastName: 'Bell', age: 31, location: 'California' },
{ firstName: 'Colleen', lastName: 'Jones', age: 21, location: 'New York' },
{ firstName: 'Madelyn', lastName: 'Green', age: 18, location: 'North Dakota' },
{ firstName: 'Ella', lastName: 'Jobs', age: 18, location: 'South Dakota' },
{ firstName: 'Landon', lastName: 'Gates', age: 11, location: 'South Carolina' },
{ firstName: 'Haley', lastName: 'Guthrie', age: 35, location: 'Wyoming' }
];
return $q.when(people);
}
I have reworked html and controller code to clean things up. The html is now call grid2.html and the controller is called grid2.js
(function () {
'use strict';
var controllerId = 'grid2';
angular.module('app').controller(controllerId,
['common', 'datacontext','$scope', grid2]);
function grid2(common, datacontext, $scope) {
var vm = this;
vm.grid2 = [];
$scope.gridOptions = {
data: 'vm.grid2'
};
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
vm.activate = activate;
vm.title = 'Grid2';
activate();
function activate() {
common.activateController([mockData()], controllerId)
.then(function() { log('Activated Grid View'); });
function mockData() {
return datacontext.getPeople().then(function (mydata) {
log(JSON.stringify(mydata));
return vm.grid2 = mydata.data;
});
}
}
}
})();
controller grid2.js
<section class="mainbar" data-ng-controller="grid2 as vm">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wgreen">
<div data-cc-widget-header title="Grid 2"></div>
<div class="widget-content user">
</div>
this is grid2 test
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
Here what the screen looks like now. still no data in the grid:
In the debug, the data property shows undefined still
The mydata does contain array of data
The vm is an empty array on the return statement
The vm.grid becomes empty after the return and I'm unsure what the vm is also
The console show data being present
Insert backbone rendered view in twitter bootstrap popover like below. Problem is that when insert throught content option backbone events for that view don`t fire. I inserted view in div for test with $(selector).html attendanceShow.render().el events work without problem. Thank you in advance
attendance = new Attendance()
attendance.url = "#{attendanceUrl}/#{attendanceId}"
attendance.fetch
success: ->
attendanceShow = new ExamAttendanceShow({model: attendance })
currentTarget.popover
html : true
content: ->
attendanceShow.render().el
Best regards,
Georgi.
From what I understand, based on your code and your description you are only creating an instance of the popover but never showing it. I have a live demo working but not with CoffeeScript (I personally hate CoffeeScript), you can see the code below and at this jsfiddle.
data1.json
{"content": "lorem ipsum dolor sit amet"}
index.html
<div class="container">
<div class="row">
<button class="btn" data-target="popover">Popover</button>
</div>
<div class="row"> </div>
<div class="row">
<button class="btn" data-action="change-content">Change Content</button>
</div>
</div>
main.js
var Main = Backbone.View.extend({
model: null,
item: null,
popover: false,
events: {
'click .btn[data-target]': 'button_click',
'click .btn[data-action="change-content"]': 'change_content'
},
initialize: function() {
_.bindAll(this);
this.model = new PopoverModel();
this.model.view = new PopoverContentView({model: this.model});
this.item = this.$('.btn[data-target]');
this.item.popover({
html: true,
content: this.model.view.render().el
});
},
button_click: function(event) {
if (!this.popover) {
this.model.url = 'js/data1.json';
this.model.fetch({
success: this.model_fetched
});
} else {
this.popover = false;
}
},
model_fetched: function() {
if (!this.popover) {
this.item.popover('show');
} else {
this.item.popover('hide');
}
this.popover = !this.popover;
},
change_content: function(event) {
this.model.set('content', 'Some random content... ' + parseInt(Math.random() * 10));
}
});
var PopoverModel = Backbone.Model.extend({
defaults: {
content: ''
}
});
var PopoverContentView = Backbone.View.extend({
initialize: function() {
_.bindAll(this);
this.listenTo(this.model, 'change', this.render);
},
render: function() {
this.$el.html(_.template('<%= content %>', this.model.toJSON()));
return this;
}
});
var main = new Main({
el: '.container'
});
I have a similar issue, to expand on Georgi's answer, please try this:
Place a button or a link in your popup (instead of the dynamic text you place) and handle an event, say click event on it.