2. Implement the required logic for this view in a corresponding view model.
5. Declare a global variable for determining when a user is logged in. In this example we set this option to false by default, and we will set it to true when a user is logged in. This variable can be accessed from any part of the application and we can change its value in the login view model.
Question Comments
Added By:
Alexandre Henriques at:
4/28/2014 7:36:44 AM How do I make this piece of code in version 13.2.7?
app.initialized.add(function() {
var $view = app.getViewTemplate("LogOnPopup");
$view.appendTo(".dx-viewport");
LogOnAsPopupView.loggedOn = ko.observable(false);
LogOnAsPopupView.logOnPopupViewModel = LogOnAsPopupView.LogOnPopup();
ko.applyBindings(LogOnAsPopupView.logOnPopupViewModel, $view[0]);
});
Added By:
Nikolai (DevExpress Support) at:
4/28/2014 11:00:20 PM Hi Alexandre,
I have created a separate ticket for this issue. Please post comments to the
How to display a login view as a popup window during navigation between views (13.2.7) ticket.Added By:
Faraz Faheem at:
6/1/2014 3:28:54 AM Im having error on initialized event. Error says 'Error: cannot ready property 'add' of undefined' on app.initialized.add(funtion() { line.
Please help me
Added By:
Faraz Faheem at:
6/1/2014 3:52:38 AM I just upgraded my project to 13.2.9 by project converter and viola everything works.
Thanks for the self-explanatory post.
Added By:
Nikolai (DevExpress Support) at:
6/2/2014 12:15:33 AM You are always welcome, Faraz.Added By:
Faraz Faheem at:
6/3/2014 7:56:19 AM Hi Nikolai,
With authentication implementation, my LogOn.js file looks like below
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
AESalesApp.LogOnPopup = function (params) {
var viewModel = {
userid: ko.observable(""),
password: ko.observable(""),
visible: ko.observable(false),
authenticated: ko.observable(false),
redirectParam: this.redirectParams,
logOn: function () {
var user = {
Name: this.userid(),
UserName: this.userid()
};
AESalesApp.UserDb.authenticateUser(user).done(function (data) {
AESalesApp.loggedOn(true);
AESalesApp.credentialStore.insert({
id: 1,
accessToken: "34234234234234234",
expiry: 234,
refreshToken: "134234234234234",
name: "faraz"
});
if (viewModel.redirectParam) {
AESalesApp.app.navigate(viewModel.redirectParam.uri, viewModel.redirectParam.options);
}
viewModel.close();
});
},
show: function (redirectParams) {
viewModel.visible(true);
viewModel.redirectParam = redirectParams;
},
close: function () {
viewModel.visible(false);
delete viewModel.redirectParam;
}
};
return viewModel;
};
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
where:
AESalesApp.UserDb is CustomStore getting data from Web Api. It is working fine and data is coming back from authenticalUser call.
I am having 2 problems here.
1. Done function param 'data' is not getting results from authenticateUser function
2. Popup is not closing down
Added By:
Nikolai (DevExpress Support) at:
6/4/2014 2:40:03 AM Hi Faraz,
I have created a separate ticket for this issue. Please post all comments in the
How to implement authentication with a popup login viewAdded By:
Jerther at:
11/28/2014 2:08:30 PM this line should be updated:
<div data-bind="dxTextBox:{ type: 'password', value: password }"></div>
with
<div data-bind="dxTextBox:{ mode: 'password', value: password }"></div>
Added By:
Nikolai (DevExpress Support) at:
12/1/2014 3:52:34 AM Hi Jerther,
Thank you for bringing this to our attention. I've updated this example.Added By:
V.Mangione at:
12/4/2014 7:55:59 AM Hi, this sample doesn't appear to be working anymore on just released v 14.2.3
The popup stays hidden.
Added By:
Nikolai (DevExpress Support) at:
12/5/2014 2:23:56 AM Hi,
Starting with 14.2, please use
this example.Added By:
IMiron at:
10/9/2015 2:06:22 PM Hi,
Can you please tell me how this can be accomplished with the Angular approach?
A sample would be best.
Thanks,
Ionut.
Added By:
Nikolai (DevExpress Support) at:
10/12/2015 1:38:07 AM Hello IMiron,
The DevExtreme framework is based on KnockoutJS and jQuery. AngularJS has its own navigation mechanism. I suggest that you refer to Angular documentation and forums regarding this issue.
See also:ngViewRouting & Multiple ViewsAdded By:
Julian Leung at:
4/6/2016 9:07:30 PM I am using this login sample, but I got some problems when I change the dxList to dxDataGrid. I seems that the problem come from data source, it cannot get the data from it.
<div data-bind="dxDataGrid: { dataSource: dataSource, columns: [ { dataField: 'ItemCode'}, { dataField: 'BatchNum'}, ]
}">
var dataSource = { store: new DevExpress.data.CustomStore({ load: function () { return $.getJSON('
http://localhost:55960/DataService.svc/efSeason'); } })}
Added By:
Nikolai (DevExpress Support) at:
4/7/2016 3:55:00 AM Hello Julian,
To process your recent post more efficiently, I created a separate ticket on your behalf: T365094: dxDataGrid - Ho to implement a custom data source. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.