I have a table with a list of records on the main landing page.
We can click records from the table to open a bootstrap modal for detail view.
I want to access the main landing page table to open another bootstrap modal, I mean opening and keeping two of them simultaneously.
I have achived this using angular-kendo window , Now able to open multiple popup.
http://plnkr.co/edit/BE6ADurYGqikkcNKQVl7?p=preview
var windowInstance = $kWindow.open({
options:{
modal: false,
title: "Window title",
height: 150,
width: 400,
visible: false
},
templateUrl: 'modal1.html',
controller: 'modalController',
resolve: {
parameter1: function () {
return "Test...";
}
}
});
windowInstance.result.then(function (result) {
// Here you can get result from the window
});
Related
I've created an AngularJS navigation menu and I'm trying to highlight the active menu item based on ng-repeat.
So far I have the menu working with ng-repeat, but I don't know what to put in the ng-click function for the active class to get applied.
Here's what I have:
Here is my view:
//View (in jade):
ul(ng-controller='MenuCtrl')
li(ng-repeat='navLink in navLinks', ng-click='select(navLink)', ng-class='{active: navLink.linkhref == path}')
a(href='{{navLink.linkhref}}') {{navLink.linktext}}
And here is my controller:
//Controller:
...
controller('MenuCtrl', function ($scope,$location) {
$scope.navLinks = [{
linkhref: '/',
linktext: 'View Dashboard',
}, {
linkhref: '/rpm',
linktext: 'View RPMs',
}, {
linkhref: '/status',
linktext: 'View Status',
}, {
linkhref: '/database',
linktext: 'View Database',
}, {
linkhref: '/config',
linktext: 'View Configurations',
}];
$scope.path = $location.path();
$scope.select = function(navLink) {
//idk what to put here to make the "active" class toggle between nav links
//I could try this:
//remove "active" class from nav links
//then add "active" class to this link
};
})
...
Here's a fiddle with my code:
http://jsfiddle.net/bATZ5/1/
So far here is the behavior:
when I go to http://localhost/status, the "View status" link has the "active" class on it. great!
when I click another link, the "View status" link stays "active", and the new link does not get the "active" class added.
basically nothing happens when i click, but refreshing the page works (because of the "path == path" thing)
Resources that were helpful:
ng-class to highlight active menu item based on ng-repeat. AngularJS
How to add and remove active class on click - angular way
http://jsfiddle.net/bATZ5/
On your list elements, the ngClick directive is comparing the scope's path value with the navLink element's linkhref value. So if you want the item to gain the class, simply set the values:
$scope.select = function(navLink) {
$scope.path = navLink.linkhref;
}
While this solves your problem, I believe there's a larger issue with this approach to a menu. Clicking the li element outside of the link will cause the item to appear active. Also, navigating with the keyboard (or in any way that doesn't trigger ngClick) will not update the menu.
Instead of binding the click, it might be worth exploring a method that watches the route:
function updateActiveLink(){
$scope.path = $location.path();
}
$scope.$on('$routeChangeSuccess', updateActiveLink);
Or another option that I don't like as much:
$scope.$watch(function(){
return $location.path();
}, updateActiveLink);
I am trying to create a kendo grid (angularjs) and attached a personalized editor <div my-directive-editor></div> via grid options editable.template. On my directive editor (angularjs directive), i specify the structure of HTML from remote file and link it via templateUrl. Upon running the application, everything works great when i first click the Add New Entry but when i cancel the popup dialog and click again the Add New Entry an error will show $digest already in progress in angular format.
I tried instead using templateUrl I used template and formatting the whole HTML structure as string and passed it there and it goes well without the error but as i can see, it is hard for the next developer to manage the very long HTML string so it would be great if i can separate it to remote file and just link it to templateUrl. I prepared a dojo to play with CLICK HERE the content of TestTemplate.html is the HTML string from template.
This is my directive
app.directive('grdEditor',
[
function () {
return {
restrict: 'A',
replace: true,
scope: {
dataItem: '=ngModel'
},
//template: '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>',
templateUrl: 'http://localhost/Angular/TestTemplate.html',
/*template: function(){
return '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>';
},*/
controller: function ($scope, $attrs, $timeout) {
$scope.optGender = {
dataTextField: 'Text',
dataValueField: 'Value',
dataSource:
{
data: [
{
Text: 'Male',
Value: 1
},
{
Text: 'Female',
Value: 2
}]
}
};
}
};
}
]);
and this is my kendo grid options (partial)
$scope.optGrid = {
editable: {
mode: "popup",
window: {
minHeight: '320px',
minWidth: '365px',
},
template: '<div grd-editor ng-model="dataItem"></div>',
},
toolbar: ['create', 'excel'],
excel: {
allPages: true
},
.....................
Any help would be appreciated.
TIA
i think a there is problem with templateUrl. you don't need to give http://
you just need to give path from your base directory or directory of your index.html
I am looking for a simple equivalent to a MsgBox.Show( message text) when using kendo UI in angular, without using BootstrapUI since I'm using kendo UI.
I've read http://blogs.telerik.com/kendoui/posts/13-06-24/announcing-angular-kendo-ui
but it has the modal window defined in markup.
Is there a counterpart to this jQuery version that dynamically creates the DIV and stuffs some markup into the html property?
$(".helpimg").on("click", function (e) {
$(document.createElement('div'))
.attr({ title: 'Help', 'class': 'help' })
.html(help[e.target.id])
.dialog({
buttons: { OK: function () { $(this).dialog('close'); } },
close: function () { $(this).remove(); },
draggable: true,
modal: true,
resizable: true,
width: '50%',
height: 'auto'
});
});
You can dynamically create kendo window objects by applying the kendoWindow() function on a dynamically created div to your document. Try this dojo and let me know if this is what you were looking for :
http://dojo.telerik.com/esaWi/2
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
});
Let's say I have a main controller, then my application has a controller for each "module". This main controller contains the viewport, then a header (with a menu) + a "centered" container, which is empty at the beginning.
A click in the menu will change the current module/controller and the adhoc view (which belongs to this controller) will be displayed in the centered container.
I think it's a very simple scenario, but strangely I didn't find the proper way to do it. Any ideas? Thanks a lot!
Here is what I do: I have a toolbar on top, a left navigation and the center location is work area (basically a tab panel) like you mentioned. Lets take each part fo the application and explain.First, here is how my viewport look like:
Ext.define('App.view.Viewport',{
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'App.view.menu.NavigationPane',
'App.view.CenterPane',
'App.view.menu.Toolbar'
],
initComponent: function() {
Ext.apply(this, {
items: [{
region: 'north',
xtype: 'panel',
height: 24,
tbar: Ext.create('App.view.menu.Toolbar')
},{
title: 'Navigation Pane',
region: 'west',
width: 200,
layout: 'fit',
collapsible: true,
collapsed: true,
items: Ext.create('App.view.menu.NavigationPane')
},{
region: 'center',
xtype: 'centerpane'
}]
});
this.callParent(arguments);
}
});
You can see that I have a toolbar (App.view.menu.Toolbar) with menu and left navigation (App.view.menu.NavigationPane). These two, components make up my main menu or gateway to other modules. Users select the menu item and appropriate module views (like form, grid, charts etc) get loaded into the 'centerpane'. The centerpane is nothing but a derived class of Ext.tab.Panel.
Like you said, I have a main controller that handles all the requests from the toolbar and navigation pane. It handled only the toolbar and navigation pane's click actions. Here is my AppController:
Ext.define('CRM.controller.AppController',{
extend: 'Ext.app.Controller',
init: function() {
this.control({
'apptoolbar button[action="actionA"]' : {
click : function(butt,evt) {
this.application.getController('Controller1').displayList();
}
},
.
. // Add all your toolbar actions & navigation pane's actions...
.
'apptoolbar button[action="actionB"]' : {
click : function(butt,evt) {
this.application.getController('Controller2').NewRequest();
}
}
});
}
});
Look at one of my button's handler. I get hold of the controller through the 'application' property:
this.application.getController('Controller2').NewRequest();
With the help of getController method, I get the instance of the controller and then call any method inside my controller. Now lets have a look at the skeleton of my module's controller:
Ext.define('CRM.controller.Controller2',{
extend: 'Ext.app.Controller',
refs: [
{ref:'cp',selector: 'centerpane'}, // reference to the center pane
// other references for the controller
],
views: ['c2.CreateForm','c2.EditForm','c2.SearchForm','c2.SearchForm'],
init: function() {
this.control({
'newform button[action="save"]' : {
// Do save action for new item
},
'editform button[action="save"]' : {
// update the record...
},
'c2gridx click' : {
// oh! an item was click in grid view
}
});
},
NewRequest: function() {
var view = Ext.widget('newform');
var cp = this.getCp(); // Get hold of the center pane...
cp.add(view);
cp.setActiveTab(view);
},
displayList: function() {
// Create grid view and display...
}
});
My module's controller have only the actions related to that module (a module's grid, forms etc). This should help you get started with rolling in right direction.
In main controller add child controller in the click event handler of menu
Ext.define('MyAPP.controller.MainController',{
...
init:function()
{
this.control({
'menulink':
{
click:this.populateCenterPanel
}
});
},
populateCenterPanel:function()
{
this.getController('ChildController');
}
});
In launch function add listener to controller add event like this -
Ext.application({
...
launch:function(){
this.controllers.addListener('add',this.newControllerAdded,this);
},
newControllerAdded:function(idx, ctrlr, token){
ctrlr.init();
}
});
Now put code for dynamically embedding views in the viewport in init method of ChildController.
Ext.define('MyAPP.controller.ChildController',{
...
refs: [
{ref:'displayPanel',selector:'panel[itemId=EmbedHere]'}
]
init:function(){
var panel=this.getDisplayPanel();
panel.removeAll();
panel.add({
xtype:'mycustomview',
flex:1,
autoHeight:true,
...
});
}
});
HTH :)