Skip to main content

GridXlExportOptions.CustomizeColumn Property

Allows you to customize an individual column in the exported document.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public Action<GridExportCustomizeColumnEventArgs> CustomizeColumn { get; set; }

Property Value

Type Description
Action<GridExportCustomizeColumnEventArgs>

A delegate method that customizes a column.

Remarks

Implement the CustomizeColumn action delegate to customize an individual column in the exported document: change its width or formatting, or hide the column.

View Example: Customize Export Settings

The example below demonstrates how to change column widths and format settings in the exported document:

<DxGrid @ref="Grid" Data="@Data" >
    <Columns>
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="ContactTitle" />
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="Country" />
    </Columns>
</DxGrid>
<DxButton Text="Export to XLSX" Click="ExportXlsx_Click" />
@code {
    IEnumerable<object> Data { get; set; }
    IGrid Grid { get; set; }
    bool ExportSelectedRowsOnly { get; set; }

    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetCustomersAsync();
    }
    async Task ExportXlsx_Click() {
        var options = new GridXlExportOptions();
        options.CustomizeColumn = CustomizeColumn;
     await Grid.ExportToXlsxAsync("ExportResult", options);
    }

    void CustomizeColumn(GridExportCustomizeColumnEventArgs e) {
        // Create format settings for odd columns 
        XlCellFormatting odd_formatting = new XlCellFormatting();
        odd_formatting.Fill = XlFill.SolidFill(XlColor.FromArgb(227,232,255));
        odd_formatting.Font = new XlFont();
        odd_formatting.Font.Name = "Calibri";
        odd_formatting.Font.Size = 14;
        odd_formatting.Font.Color = XlColor.FromArgb(33,49,125);
        odd_formatting.Font.Italic = true;
        odd_formatting.Alignment = XlCellAlignment.FromHV(XlHorizontalAlignment.Center, XlVerticalAlignment.Center);
        odd_formatting.Border = XlBorder.OutlineBorders(XlColor.FromArgb(26,54,187), XlBorderLineStyle.Hair);

        // Create format settings for even columns 
        XlCellFormatting even_formatting = new XlCellFormatting();
        even_formatting.Font = new XlFont();
        even_formatting.Font.Name = "Calibri";
        even_formatting.Font.Size = 14;
        even_formatting.Alignment = XlCellAlignment.FromHV(XlHorizontalAlignment.Center, XlVerticalAlignment.Center);

        if (e.Column.ColumnIndex % 2 == 1) {
            e.Column.Formatting = even_formatting;
        } else 
            e.Column.Formatting = odd_formatting;

        if (e.FieldName == "Country") {
            e.Column.WidthInPixels = 100;
        } else if (e.FieldName == "CompanyName") {
            e.Column.WidthInPixels = 280;
        }
    }
}

Grid export - Formatted columns

The grid exports data of every data column unless its ExportEnabled property is set to false. A column whose Visible property is set to false is hidden in the document (has a zero width). You can use the Column.IsHidden property in the CustomizeColumn action to show and hide columns in the resulting document.

await Grid.ExportToXlsxAsync("ExportResult", new GridXlExportOptions() {
    CustomizeColumn = CustomizeColumn,
});

void CustomizeColumn(GridExportCustomizeColumnEventArgs e) {
    e.Column.IsHidden = true;
}

For more information about data export in the Grid component, refer to the following topic: Export Data in Blazor Grid.

See Also