Search This Blog

Tuesday, March 22, 2016

Web DetailView layout styling with the CustomCSSClassName attribute in the Model Editor

This small feature is available for the new XAF Web UI only, which is enabled by default in new projects starting from v15.2.7 and on. In short, the CustomCSSClassName attribute allows you to set a CSS class for a layout item or a group. Let's see how this works in practice.

For instance, to customize the color and size of the FullName view item, add the FullNameCSS CSS class in YourSolutionName.Web/Default.aspx file exactly as you would do this in a regular non-XAF ASP.NET application:
  
<!--...-->
<head runat="server">
    <title>Main Page</title>
    <meta http-equiv="Expires" content="0" />
    <style type="text/css">
        .FullNameCSS
        {
            font-size: 25px;
            color: darkblue;
        }
<!--...-->

Invoke the Model Editor. Navigate to the Views | <DetailView> | Layout node, find the FullName layout item node and set the CustomCSSClassName property value to FullNameCSS:

The result is demonstrated in the image below:

Please let us know whether this new customization option is helpful for your projects. 

 BTW, if you are getting started with the new Web application style, you may find this article helpful: New Web UI FAQ









Автор:



на




























Ярлыки:
,
,
,
,
,
,

















6 comments:








  1. UnknownMarch 23, 2016 at 4:40 AM
    Great thing, Dennis!
    One question: Is customizing the application template already possible? (like it is possible for DefaultTemplateContent and DefaultVerticalTemplateContent in classic layout)
    ReplyDelete
    Replies
    1. Dennis GaravskyMarch 23, 2016 at 5:01 AM
      Thanks for your feedback, Andreas!
      Sure, that is possible with v15.2.4+: https://documentation.devexpress.com/#eXpressAppFramework/CustomDocument113153
      I hope this helps.
      Delete
    2. UnknownApril 17, 2016 at 9:21 AM
      Sorry I noticed your reply only now. Yes this helps. I'll test it in our solution and come back to you if there are problems.
      Delete
    3. Dennis GaravskyApril 18, 2016 at 12:04 AM
      You're always welcome!
      Delete
  2. MohALMarch 30, 2016 at 2:10 PM
    Thank you Dennis
    Why it's not applicable for the enum property editor?
    ReplyDelete
    Replies
    1. Dennis GaravskyApril 1, 2016 at 8:29 AM
      I could not replicate any problems with ASPxEnumPropertyEditor in my tests with the "Title Of Courtesy" layout item in our MainDemo.Web app. Please submit a new ticket via the Support Center and attach your test project so we can see exactly what you did and what did not function as expected.
      Delete




























        

      









Subscribe to:
Post Comments (Atom)