[SOLVED] I figured this out. The issue is related to modal sizing, if you resize the window the grid will be displayed. Adding auto-resizing directive solved the problem. See more details at http://ui-grid.info/docs/#/tutorial/213_auto_resizing
I have the impression that there is some sort of conflict between the grid's style and bootstrap style (CSS and DIVs structure)...
[ORIGINAL POTS]
Help wanted!
I am not able to display an ui-grid in a modal window generated by ui-bootstrap. The modal window comes up but the grid is not rendered. I am able to render other grids outside a modal window.
Basically speaking, it is hosted in Plunker. This is what I have:
index.html
<div ng-controller="TradeListController">
<button type="button" ng-click="openBoardgamegeekSearchWindow()">Search Board Game in Modal Window</button>
</div>
components/MtApp.js
var mtApp = angular.module('mtApp', ['ui.bootstrap', 'ui.grid']);
var TradeListController = function($scope, $modal) {
//=== Modal Window : Boardgamegeek Search ===//
$scope.openBoardgamegeekSearchWindow = function() {
console.log("Opening boardgamegeek search in modal window.");
var modalWindow = $modal
.open({
templateUrl: 'components/boardgamegeek/boardgamegeek-search.html',
controller: 'BoardgamegeekSearchController',
});
modalWindow.result.then(function(modalReturn) {
console.log("Boardgamegeek search window returned: ", modalReturn);
}, function() {
console.log('Boardgamegeek search window returned dismissed.');
});
};
};
angular.module('mtApp').controller('TradeListController', TradeListController);
var BoardgamegeekSearchController = function($scope, $modalInstance) {
//=== Properties ===//
$scope.boardGames = [{
tradeListId: 666666666,
boardgamegeekId: 42533,
name: "QWERTY",
thumbnailURL: "http://cf.geekdo-images.com/images/pic485388_mt.jpg"
}];
//=== Grid to render board games ===//
$scope.gridOptions = {
data: $scope.boardGames,
columnDefs: [{
field: 'name',
name: 'Name'
}]
};
};
angular.module('mtApp').controller('BoardgamegeekSearchController', BoardgamegeekSearchController);
components/boardgamegeek/boardgamegeek-search.html
<div ui-grid="gridOptions"></div>
gridOptions = {{gridOptions}}
I figured this out. The issue is related to modal sizing, if you resize the window the grid will be displayed.
Adding auto-resizing directive solved the problem.
See more details at http://ui-grid.info/docs/#/tutorial/213_auto_resizing
I have the impression that there is some sort of conflict between the grid's style and bootstrap style (CSS and DIVs structure)...
This link can be useful , it covers a basic guide to migrate from ng-grid to ui-grid https://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/
Related
I have a ion-view that shows a list of items in a modal. I want to dismiss the modal once I select an item. I have associated the modal template with a controller using an ng-controller attribute.
How do I dismiss the modal form inside the controller where I will be getting click events ?
try like this
$scope.modal.hide();
If you are using multiple modals, give different names to scope variables..
$ionicModal.
fromTemplateUrl('example.html', {
scope: $scope,
animation: 'slide-in-up' }).
then(function(modal) {
$scope.exmapleModal = modal;
$scope.exmapleModal.show();
$scope.closeExample = function() {
$scope.exmapleModal.hide();
$scope.exmapleModal.remove();
};
});
Close the modal the same name as
$scope.closeExample();
I'm trying to show angular-strap popover when hovering on fullcalendar items.
I am using eventMouseover/eventMouseout callbacks to show/hide the popover:
$scope.calendarConfig = {
defaultView: 'basicWeek',
eventMouseover: function(event, jsEvent, view) {
element = $(jsEvent.target).closest('.fc-event');
popover = $popover(element, {placement: 'bottom', contentTemplate: 'calendar-item-popover.html'});
popover.$promise.then(popover.show);
},
eventMouseout: function() {
popover.hide();
popover = null;
}
};
Then I have a popover body template:
<script type="text/ng-template" id="calendar-item-popover.html">
<p>Event</p>
<p>event: {{event | json}}</p>
</script>
My question is how can I pass the 'event' to popover scope?
Here is the plunker: http://plnkr.co/9c6BDWsYuuWAfI4HnJAH
I have a working solution; popover's scope can be accessed with popover.$scope:
popover.$scope.event = event
Working plunker:
http://plnkr.co/W8n6LxsLCyZFO6ufPHvW
Not sure if that's an optimal solution, so I will wait some time for feedback.
I want to show list of videos in Bootstrap modal. and when user clicks on any video from the list that video should play in modal only. similarly I want to show albums in modal and on click of specific album I want to show slideshow in the same modal, for this I am using angular js and Codeigniter with bootstrap. Please help me.
Not a very descriptive question, but I recommend you check out Angular UI's Bootstrap directives.
I use their modal directive a lot and being able to specify a template and controller for a modal is priceless when it comes to working with things like you're describing.
Update to address your comment:
I have no idea where $scope.hall_videos is coming from, but you need to use the resolve property to return the correct videos. For instance, if $scope.hall_videos was an object where the key was the id and the value was an array of videos like so:
$scope.hall_videos = {
'1': ['video1', 'video2'],
...
'7': ['video14', 'video15']
};
You could populate with the correct videos like this:
$scope.open = function (size, id) {
var modalInstance = $modal.open({
templateUrl: 'video_gallery.html',
controller: 'HomeCtrl',
size: size,
resolve: {
hall_videos: function () {
var videos = [];
angular.forEach($scope.hall_videos, function(video) {
if (video.hall_info_id === id) {
videos.push(video);
}
});
return videos;
}
}
});
};
I'm using Angular-UI Calendar directive and Bootstrap 3 popover to attempt to create a popover on click. I tried using the day click event:
$scope.dayClick = function(event, allDay, jsEvent, view){
jsEvent.stopPropagation();
jsEvent.preventDefault();
var eventID = event.getDate();
eventID = jsEvent.target;
$(eventID).popover({
html: true,
title: 'Hello',
placement: 'bottom',
content: '<button id="close-me">Close Me!</button>'
}).parent().delegate('button#close-me', 'click', function() {
jsEvent.stopPropagation();
$(eventID).popover('hide');
return false;
});
$(eventID).popover('show');
};
The problem with this way is that it causes the calendar cells to push to the right at times or duplicate. Is there a better way I could attach the popover to the existing calendar?
Are you trying to create pop-over when any day is clicked?
If yes, then dayClick is the correct way for a popover.
Can you create a Plunk to provide more details.
I think the problem may be due to CSS.
Does anyone have any experience using KendoUI's window with AngularJS?
I'm currently using Angular-Kendo but I'm not entirely sure hot to cleanly use the window. Or if there is any other solutions for presenting a modal dialog and filling it with a form loaded via a partial I'm open to that as well.
My current code looks something like this:
HTML:
<div kendo-window id="addWindow" ng-hidden></div>
JS:
$scope.addSection = function() {
$("#addWindow").data("kendoWindow").open();
return false;
};
But I hate this, and it feels wrong for how I'm doing everything else. Any thoughts on a better way?
Check out this blog post:
http://www.kendoui.com/blogs/teamblog/posts/13-06-24/announcing-angular-kendo-ui.aspx?utm_content=bufferbbe83&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer
They rewrote Angular-Kendo and have an example of a clean way to use a window.
#anise thanks for ur information
finally i also resolve the issue.
Controller
$scope.window;
$scope.OpenWindow= function() // custom function on click
{
$scope.DlgOptions = {
width: 550,
height: 400,
visible: false,
actions: [
"Maximize",
"Close"
]
};
$scope.window.setOptions($scope.DlgOptions);
$scope.window.center(); // open dailog in center of screen
$scope.window.open();
};
View
<div kendo-window="window" k-visible="false" k-modal="true"> </div>
Check out this library
https://github.com/kjartanvalur/angular-kendo-window
var windowInstance = $kWindow.open({
options:{
modal: true,
title: "Window title",
width: 400,
},
templateUrl: 'modal1.html',
controller: 'modalController',
resolve: {
parameter1: function () {
return "Test...";
}
}
});
windowInstance.result.then(function (result) {
// Here you can get result from the window
});