I need to open multiple ngDialog with same id, when clicking the close button it should close only the currently opened ngDialog.
For closing ngDialog I need to call one event which collects the data then closes the ngDialog.
It depends if you're trying to close it (1) from its own controller, or (2) the controller that instantiates it:
(1) From its own controller:
scope.closeThisDialog(value);
see doc: https://github.com/likeastore/ngDialog
(2) From controller that instantiates it:
var dialog = ngDialog.open();
// for closing the dialog call dialog.close()
As mentioned by Satish Salvador's response.
Cheers!
Assign the ngDialog.open() to a variable like var dialog = ngDialog.open(); for closing the dialog call dialog.close()
In some cases, you can avoid this issue by specifying disableAnimation options when creating the dialog:
ngDialog.open({
template: 'template.html',
appendClassName: 'ngdialog-custom',
disableAnimation: true
});
You could use .getOpenDialogs()
There is a method on ngDialog object called getOpenDialogs. What you could with this function is to get a list of all opened dialogs and close the one you are interested in by calling .close() on the "selected" one.
Beyond closeThisDialog() you can do:
vm.myDialog = ngDialog.open(... omissis ...);
...
vm.myDialog.close();
or
vm.myDialog = ngDialog.open(... omissis ...);
...
ngDialog.close(vm.myDialog.id);
Related
I am using ng-multiselect-dropdown,and I have to load the data based on the selected list.
Hence,I am using "onDropDownClose" event to get all the selected values and load the other data based on the selected multiple values.
<ng-multiselect-dropdown
[placeholder]="'Select Project'"
[settings]="dropdownSettings"
[data]="projects"
[required]='requiredField'
[(ngModel)]="selectedItems"
name="projectName"
[ngClass]='setClass()'
#projectName="ngModel"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDropDownClose)="saveFunction($event)">
But the close event is triggering all the time even I click outside the dropdown always.
Is there any alternate approach it? Please help.
This should be fixed at their end but until then you can use this trick:
In addition to (onDropDownClose), listen to a click event on ng-multiselect-dropdown
// this act as a differentiator between other calls(bug) and an intended call
(click)="dropDownSelect = true".
In your component, declare your variable and use it like this:
dropDownSelect = false;
saveFunction($event) {
if (this.dropDownSelect) {
// close the opening to subsequent actions
this.dropDownSelect = false;
// Perform action;
};
}
I am using Angular 6 and see in home.component.ts file variable being defined at the beginning: public hasResults = false;
And then in home.component.html file - section for displaying:
<span style="padding-left:5px" [hidden]="hasResults">
<ang-shortcut-display></ang-shortcut-display>
</span>
(which will display section once hasResults is not False anymore).
Now I need to have action on a Home Button to hide section again (I am assuming to set hasResults to False again).
How to set this variable hasResults to False again when e.g. someone hits Home button.
So far I found that action after hitting Home Button is in home.component.ts
homeRouteAction() {
\\ set hasResults to false
}
but not sure if hasResults is visible at that moment and how properly to set it to false (pass value) so that can change value (and set above html section to hidden again)?
for this, you have two things you can pass this value in service or maintain local storage,
when you initiate this value that time you can call set value in service and when you need to call get user service using observable, rxjs
You can set a method in your home.component.ts
setResults () {
this.hasResults=false;
}
and then, in the home.component.html call the method for it to propagate
(click)="setResults()"
Such as:
Home
In my controller I'm using this to open my Kendo UI Core window:
$scope.winQuestion.setOptions($scope.DlgOptions);
$scope.winQuestion.open();
This is the code in my html:
div kendo-window="winQuestion" k-title="'Question 1'" k-position="{ top: 60, left: 100 }"
k-width="730" k-height="300" k-visible="false"
k-content="{ url: 'questions.html' }"
k-on-open="winQuestion = true" k-on-close="winQuestion = false" style="background-color:#ffffff;"></div>
Now inside that questions.html I have a button that I try to trigger this in the same controller thats inside of another function where I process a cancel click:
$scope.winQuestion.close();
This call which in my search for answers on StackOverflow is supposed to work just returns:
TypeError: $scope.winQuestion.close is not a function
I suspect that its a scope issue but not sure why because I get into the
$scope.closeWindow = function(){
$scope.winQuestion.close();
};
Sorry I don't have a plunker for this but couldn't get kendo core ui to work there, only locally.
I have not tested it but from what it looks like you are overriding the variable of the window, with true/false in the k-on-open and k-on-close events.
When you open the window with $scope.winQuestion.open(); the on-open event will set $scope.winQuestion = true;.
So all subsequent method calls on $scope.winQuestion are no longer made on the reference of that window, but instead on a boolean value (which does not implement an open() function)
I am not sure what the proper heading / title for this question should be. I am new to WinJS and am coming from a .NET webform and winclient background.
Here is my scenario. I have a navigation WinJS application. My structure is:
default.html
(navigation controller)
(settings flyout)
pages/Home.html
pages/Page2.html
So at the top of the default.js file, it sets the following variables:
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;
It seems like I cannot use these variables anywhere inside my settings flyout or any of my pages:ready functions. They are only scoped to the default.js?
In the same regard, are there resources on the interwebs (links) that show how to properly share variables, events, and data between each of my "pages"?
The scenario that I immediately need to overcome is settings. In my settings flyout, I read and allow the user to optionally set the following application setting:
var applicationData = Windows.Storage.ApplicationData.current;
var localSettings = applicationData.localSettings;
localSettings.values["appLocation"] = {string set by the user};
I want to respond to that event in either my default.js file or even one of my navigation pages but I don't know where to "listen". My gut is to listen for the afterhide event but how do I scope that back to the page where I want to listen from?
Bryan. codefoster here. If you move the lines you mentioned...
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;
...up and out of the immediate function, they'll be in global scope and you'll have access to them everywhere. That's one of the first things I do in my apps. You'll hear warnings about using global scope, but what people are trying to avoid is the pattern of dropping everything in global scope. As long as you control what you put in there, you're fine.
So put them before the beginning of the immediate function on default.js...
//stuff here is scoped globally
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;
(function () {
//stuff here is scoped to this file only
})();
If you are saving some data and only need it in memory, you can just hang it off the app variable instead of saving it into local storage. That will make it available to the whole app.
//on Page2.js
app.myCustomVariable = "some value";
//on Page3.js
if(app.myCustomVariable == "some value") ...
Regarding your immediate need:
like mentioned in the other answer, you can use datachanged event.
Regards sharing variables:
If there are variables that you would like to keep global to the application, they can be placed outside the anonymous function like mentioned in the Jeremy answer. Typically, that is done in default.js. Need to ensure that scripts using the global variables are placed after the script defining the global variable - in default.html. Typically - such variable will point to singleton class. For example: I use it in one of my apps to store authclient/serviceclient for the backend service for the app. That way - the view models of the multiple pages need not create instance of the object or reference it under WinJS namespace.
WinJS has also concept of Namespace which lets you organize your functions and classes. Example:
WinJS.Namespace.define('Utils.Http',
{
stringifyParameters: function stringifyParameters(parameters)
{
var result = '';
for (var parameterName in parameters)
{
result += encodeURIComponent(parameterName) + '=' + encodeURIComponent(parameters[parameterName]) + '&';
}
if (result.length > 0)
{
result = result.substr(0, result.length - 1);
}
return result;
},
}
When navigating to a page using WinJS.Navigation.navigate, second argument initialState is available as options parameter to the ready event handler for the page. This would be recommended way to pass arguments to the page unless this it is application data or session state. Application data/session state needs to be handled separately and needs a separate discussion on its own. Application navigation history is persisted by the winjs library; it ensures that if the app is launched again after suspension - options will be passed again to the page when navigated. It is good to keep the properties in options object as simple primitive types.
Regards events:
Typically, apps consume events from winjs library. That can be done by registering the event handler using addEventListener or setting event properties like onclick etc. on the element. Event handlers are typically registered in the ready event handler for the page.
If you are writing your own custom control or sometimes in your view model, you may have to expose custom events. Winjs.UI.DOMEventMixin, WinJS.Utilities.createEventProperties can be mixed with your class using WinJS.Class.mix. Example:
WinJS.Class.mix(MyViewModel,
WinJS.Utilities.createEventProperties('customEvent'),
WinJS.UI.DOMEventMixin);
Most often used is binding to make your view model - observable. Refer the respective samples and api documentation for details. Example:
WinJS.Class.mix(MyViewModel,
WinJS.Binding.mixin,
WinJS.Binding.expandProperties({ items: '' }));
Here is what I ended up doing which is kinda of a combination of all the answers given:
Created a ViewModel.Settings.js file:
(function () {
"use strict";
WinJS.Namespace.define("ViewModel", {
Setting: WinJS.Binding.as({
Name: '',
Value: ''
}),
SettingsList: new WinJS.Binding.List(),
});
})();
Added that file to my default.html (navigation container page)
<script src="/js/VMs/ViewModel.Settings.js"></script>
Add the following to set the defaults and start 'listening' for changes
//add some fake settings (defaults on app load)
ViewModel.SettingsList.push({
Name: "favorite-color",
Value: "red"
});
// listen for events
var vm = ViewModel.SettingsList;
vm.oniteminserted = function (e) {
console.log("item added");
}
vm.onitemmutated = function (e) {
console.log("item mutated");
}
vm.onitemchanged = function (e) {
console.log("item changed");
}
vm.onitemremoved = function (e) {
console.log("item removed");
}
Then, within my application (pages) or my settings page, I can cause the settings events to be fired:
// thie fires the oniteminserted
ViewModel.SettingsList.push({
Name: "favorite-sport",
Value: "Baseball"
});
// this fires the itemmutated event
ViewModel.SettingsList.getAt(0).Value = "yellow";
ViewModel.SettingsList.notifyMutated(0);
// this fires the itemchanged event
ViewModel.SettingsList.setAt(0, {
Name: "favorite-color",
Value: "blue"
});
// this fires the itemremoved event
ViewModel.SettingsList.pop(); // removes the last item
When you change data that needs to be updated in real time, call applicationData.signalDataChanged(). Then in the places that care about getting change notifications, listen to the datachanged on the applicationData object. This is also the event that is raised when roaming settings are synchronized between computers.
I've found that many times, an instant notification (raised event) is unnecessary, though. I just query the setting again when the value is needed (in ready for example).
I want to route from one page to another page.
Candidatesvas- controller
Here I have code,
[Authorize, HttpPost,HandleErrorWithAjaxFilter]
public ActionResult Details(FormCollection collection)
{
Order order = _repository.GetOrder(LoggedInOrder.Id);
order.CreateDate = DateTime.Now;
order.Amount = 360;
order.Validity = 60;
_repository.Save();
}
when I click Index page,"any link", it saves in db and go to next details page.
Index.aspx:
<%:Html.actionlink("Details","Details","Candidatesvas")%>
like that...
Global.ascx:
routes.MapRouteLowercase(
"SaveVas",
"details/candidatesvas",
new { controller = "Candidatesvas", action = "Details" }
);
But when i click link, it shows "resource cannot be found". i changed many way. please help me. i can't find out the issue?
Your controller action is decorated with the [HttPost] attribute which means that this action is only accessible with the POST verb. Then you have shown some link on your page:
<%:Html.ActionLink("Details","Details","Candidatesvas")%>
But as you know a link sends GET request. If you want to be able to invoke this action you should either remove the [HttpPost] attribute from it or use an HTML <form> instead of a link.
try this
<%:Html.actionlink("Details","Details","Candidatesvas",null,null)%>
You can't use Html.actionlink for post method.
go for jquery
Or call form submit on click function.