DxMemoSettings.TextAreaCssClass Property

Assigns a CSS class to the memo’s text area.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string TextAreaCssClass { get; set; }

Property Value

Type	Default	Description
String	null	CSS class names delimited by spaces.

Remarks

Use the TextAreaCssClass property to apply custom CSS classes to the memo’s text area.

Razor

@inject EmployeeService EmployeeData

<style>
    .my-memo-style{
        font-style: italic;
    }
</style>

<DxGrid Data="@employees" PageSize="4" KeyFieldName="ID"
        EditMode="GridEditMode.EditForm">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Notes" Visible="false" >
            <EditSettings>
                <DxMemoSettings Rows="3" 
                                TextAreaCssClass="my-memo-style" 
                                ResizeMode="MemoResizeMode.Disabled" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout >
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                @EditFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("BirthDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                @EditFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Notes:" ColSpanMd="12">
                @EditFormContext.GetEditor("Notes")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

EmployeeService.cs

public class EmployeeService {
    public Task<Employee[]> GetData() {
        List<Employee> employee = new List<Employee>();

        employee.Add(new Employee() { ID = 00156, FirstName = "Nancy", LastName = "Davolio", BirthDate = new DateTime(1978, 08, 12), HireDate= new DateTime(2002, 10, 01), Notes = "Education includes a BA in psychology from Colorado State University. She also completed 'The Art of the Cold Call.' Nancy is a member of Toastmasters International."});
        employee.Add(new Employee() { ID = 01200, FirstName = "Andrew", LastName = "Fuller", BirthDate = new DateTime(1974, 02, 11), HireDate = new DateTime(2002, 06, 21), Notes = "Andrew received his BTS commercial and a Ph.D. in international marketing from the University of Dallas. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager and to vice president of sales. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association."});
        employee.Add(new Employee() { ID = 00567, FirstName = "Janet", LastName = "Leverling", BirthDate = new DateTime(1985, 06, 30), HireDate = new DateTime(2010, 07, 17), Notes = "Janet has a BS degree in chemistry from Boston College. She has also completed a certificate program in food retailing management. Janet was hired as a sales associate and promoted to sales representative."});
        employee.Add(new Employee() { ID = 00168, FirstName = "Margaret", LastName = "Peacock", BirthDate = new DateTime(1990, 12, 25), HireDate = new DateTime(2014, 11, 09), Notes = "Margaret holds a BA in English literature from Concordia College and an MA from the American Institute of Culinary Arts. She was assigned to the London office temporarily from July through November 2015."});
        employee.Add(new Employee() { ID = 01290, FirstName = "Steven", LastName = "Buchanan", BirthDate = new DateTime(1995, 03, 05), HireDate = new DateTime(2020, 01, 13), Notes = "Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree. Upon joining the company as a sales representative, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses 'Successful Telemarketing' and 'International Sales Management'. He is fluent in French." });
        employee.Add(new Employee() { ID = 00938, FirstName = "Michael", LastName = "Suyama", BirthDate = new DateTime(1987, 02, 28), HireDate = new DateTime(2018, 03, 22), Notes = "Michael is a graduate of Sussex University (MA, economics) and the University of California at Los Angeles (MBA, marketing). He has also taken the courses 'Multi-Cultural Selling' and 'Time Management for the Sales Professional.' He is fluent in Japanese and can read and write French, Portuguese, and Spanish."});
        employee.Add(new Employee() { ID = 01098, FirstName = "Robert", LastName = "King", BirthDate = new DateTime(1992, 11, 08), HireDate = new DateTime(2018, 12, 15), Notes = "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan, the year he joined the company. After completing a course entitled 'Selling in Europe' he was transferred to the London office in March 2017."});
        employee.Add(new Employee() { ID = 03027, FirstName = "Laura", LastName = "Callahan", BirthDate = new DateTime(1991, 10, 18), HireDate = new DateTime(2015, 11, 03), Notes = "Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French."});
        employee.Add(new Employee() { ID = 00633, FirstName = "Anne", LastName = "Dodsworth", BirthDate = new DateTime(1983, 01, 21), HireDate = new DateTime(2004, 08, 21), Notes = "Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German." });
        return Task.FromResult(employee.ToArray());
    }
}

Employee.cs

public class Employee {
    public int ID { get; set; }
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public DateTime? BirthDate { get; set; }
    public DateTime? HireDate { get; set; }
    public string? Notes { get; set; }
}

To apply a CSS class to the text area at runtime, use the IMemoSettings.TextAreaCssClass property instead.

For more information on how to apply CSS classes to DevExpress Blazor components, refer to the following help topic: CSS Classes.

If your custom CSS ruleset includes only one class selector (.my-memo-style in the code sample above), some property declarations can be ignored. DevExpress themes can apply predefined CSS rules that are more specific and have higher priority than a single-selector rule. Make your rule more specific to increase the priority of your ruleset. See the following help topic for an example: Apply Styles to Components. For more information about how a browser calculates rule priority, refer to the following topic: Understanding the cascade.

You can use the !important flag to override other CSS rules. However, note that this flag modifies the standard behavior of the cascade, which can make troubleshooting CSS issues quite challenging, particularly in large stylesheets.

Implements

TextAreaCssClass