Scenario
In this example, it is demonstrated how highlight focused editors in an editable DetailView for both Windows and the Web:
Additionally, the following Model Editor extensions are implemented for more convenience:
- The HighlightFocusedLayoutItem attribute at the Application | Options node level allows you to control this functionality globally per application via the Model Editor.
- The HighlightFocusedLayoutItem attribute at the Views | DetailView node level allows you to customize only certain DetailViews via the Model Editor
Steps to implement
1. Modify YourSolutionName.Module/Module.xx file as shown in the WinWebSolution.Module\Module.xx file of this example.
Note: The approach from the eXpressApp Framework > Concepts > Application Model > Extend and Customize the Application Model in Code article is used here.
2. Copy the WinWebSolution.Module\HighlightFocusedLayoutItemDetailViewControllerBase.xx file into the YourSolutionName.Module project.
Note: The approaches from the eXpressApp Framework > Concepts > Application Model > Access the Application Model in Code and Controller.Active Property articles is used here.
3. Copy the WinWebSolution.Module.Win\WinHighlightFocusedLayoutItemDetailViewController.xx file into the YourSolutionName.Module.Win project.
Note: In Windows Forms applications, the functionality is provided with the help of the LayoutControl and its HighlightDisabledItem and AllowItemSkinning options. The approach from the eXpressApp Framework > Concepts > UI Construction > View Items Layout Customization article is used to access LayoutControl.
4. Copy the WinWebSolution.Module.Web\WebHighlightFocusedLayoutItemDetailViewController.xx file into the YourSolutionName.Module.Web project. Then copy the WinWebSolution.Web\E2106.js file into the YourSolutionName.Web project.
Finally, add the <script type="text/javascript" src="E2106.js"></script> line into the <head> element of your YourSolutionName.Web\Default.aspx file.
Note: In ASP.NET applications, the functionality is implemented manually as per How to highlight a focused editor via client-side scripting via client-side events provided by our ASP.NET editors. The approach from the eXpressApp Framework > Getting Started > Comprehensive Tutorial (MainDemo Application) > Extend Functionality > Access Editor Settings article is used to access PropertyEditor controls.
IMPORTANT NOTES
It is possible to register your JavaScript functions at runtime via the DevExpress.ExpressApp.Web.WebWindow.CurrentRequestWindow.RegisterXXXScript methods called from a Controller when it is activated or when page controls are created. Refer to the How to automatically refresh data in a View after a certain period of time on the Web article for an illustration of this approach.
Question Comments
Added By: tzanis tasos at: 1/27/2015 11:52:22 AM
Hello,
In version V2014 14.2.4.0 this sample not work on web. It works only for combobox and not for other controls.
When i run the sample in debug mode, the existingHandler return empty string when eventName="GotFocus"
string existingHandler = control.GetClientSideEventHandler(eventName);
I like this. Does it work when using E2034,?
Added By: Dennis (DevExpress Support) at: 3/16/2015 5:26:02 AM @Carlitos: No, because the E2034 example disables skinning.Added By: Abel Acosta 1 at: 4/30/2015 10:46:42 AMHi DevExp Team,
I Have tried to implement this nice functionality, its works fine while i am running both xaf windows form and web application, from Visual Studio. However, when i deploy the windows form application its fail.
it says.
Exception Occurs while assigning the 'DetailView, ID: BussinessClass_DetailView' view to WinWindow
Unabled To Cast object of type 'ModelDetailView' to type 'Solution.Module.IModelDetailViewHightlightFocusedLayoutItem'.
What i am missing or doing wrong? The web application works fine even deployed.
Added By: Dennis (DevExpress Support) at: 4/30/2015 1:54:57 PM @Abel: According to the error message you have missed the first step from the Steps to Implement section above.