Starting with 14.2, please use this example.
This approach can be applied starting with 13.2.9.
This example demonstrates how to check whether the user is logged in and display a login view when it is necessary during navigation.
It is necessary to perform the following steps to accomplish this task:
1. Add a new view and place a dxPopup in it.
2. Implement the required logic for this view in a corresponding view model.
3. Handle the HtmlApplication.initialized event. In this event handler, get the login view template using the HtmlApplication.getViewTemplate method and add the view to the view port. This will allow you to display its internal popup using options from its view model.
4. Bind the login view model to the view markup using Knockout.
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.
6. Handle the HtmlApplication.navigating event. In this event handler, we can get a view info (see HtmlApplication.getViewTemplateInfo) for the navigated view and check user credentials if necessary. For this purpose, we added the secure option to those views that should not be displayed for unauthorized users. If the user unauthorized, we can call a method from the login view model to display dxPopup from the login view. Moreover, you can cancel navigation by setting the cancel parameter of the event handler to true.
See also:
How to send authenticated requests to the OData service
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]);
});
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 AMI 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 AMHi 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
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.
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.
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:
ngView
Routing & 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.