DxGridDataColumn.ExportWidth Property

Specifies the column’s export width.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(200)]
[Parameter]
public int ExportWidth { get; set; }

Property Value

Type	Default	Description
Int32	200	The column’s width, in pixels.

Remarks

The grid allows you to export data to XLS, XLSX, CSV, and PDF. When exporting to formats other than CSV, use the ExportWidth property to specify the column width in the exported document.

Export to Excel Formats

Note that Microsoft Excel performs width calculation in characters. When you open a document, Excel converts the column width in pixels to characters. The column width in characters differs on a machine with more than 100% DPI - the resulting width in pixels differs from the specified value. You can handle the CustomizeColumn action and specify the Column.WidthInCharacters property to set the column width in characters.

The following example applies the ExportWidth property to Contact Name and Contact Title columns:

<DxGrid @ref="Grid" Data="@Data" >
    <Columns>
        <DxGridDataColumn FieldName="ContactName" ExportWidth="300"/>
        <DxGridDataColumn FieldName="ContactTitle" ExportWidth="150"/>
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="Country" />
    </Columns>
</DxGrid>

<OptionButton Text="Export to XLSX" OnClick="ExportXlsx_Click" />

@code {
    IEnumerable<object> Data { get; set; }
    IGrid Grid { get; set; }
    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetCustomersAsync();
    }
}

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

Export to PDF

When exporting to PDF, the Grid component recalculates column widths so that the output table occupies all available space. Disable the FitToPage export option to use the exact ExportWidth values for exported columns. If a page does not have enough space to render a column, then this and subsequent columns are moved to the next page (similar to the Summary column in the image below).

You can also handle the CustomizeColumn event and specify the Width event argument to modify the export width.

The following example exports Grid data to PDF. Columns in the exported document have the following widths:

• Date - 200 pixels (default)
• Temperature (C) and Temperature (F) - 350 pixels
• Summary - 450 pixels

Razor

@rendermode InteractiveServer
@using DevExpress.Drawing;
@inject WeatherForecastService ForecastService

<DxGrid @ref="Grid" Data="@forecasts">
    <Columns>
        <DxGridDataColumn Caption="Date" FieldName="Date" />
        <DxGridDataColumn Caption="Temperature (C)" FieldName="TemperatureC" ExportWidth="350" />
        <DxGridDataColumn Caption="Temperature (F)" FieldName="TemperatureF" ExportWidth="350" />
        <DxGridDataColumn Caption="Summary" FieldName="Summary" ExportWidth="450" />
    </Columns>
    <ToolbarTemplate>
        <DxToolbar>
            <DxToolbarItem Text="Export to PDF" Click="ExportPdf_Click" BeginGroup="true" />
        </DxToolbar>
    </ToolbarTemplate>
</DxGrid>

@code {
    IGrid Grid;
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
    }
    async Task ExportPdf_Click() {
        await Grid.ExportToPdfAsync("ExportResult", new GridPdfExportOptions() {
            FitToPage = false,
            CustomizeDocument = args => { 
                args.PaperKind = DevExpress.Drawing.Printing.DXPaperKind.A6;
                args.Margins = new DXMargins(50, 50, 50, 50);
            },
        });
    }
}

WeatherForecast.cs

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
}

WeatherForecastService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

public class WeatherForecastService {
    private List<WeatherForecast> Forecast { get; set; }

    private static string[] CloudCover = new[] {
        "Sunny", "Partly cloudy", "Cloudy", "Stormy"
    };

    Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
        Tuple.Create( 22 , "Hot"),
        Tuple.Create( 13 , "Warm"),
        Tuple.Create( 0 , "Cold"),
        Tuple.Create( -10 , "Freezing")
    };

    public WeatherForecastService() {
        Forecast = CreateForecast();
    }

    private List<WeatherForecast> CreateForecast() {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Enumerable.Range(1, 30).Select(index => {
            var temperatureC = rng.Next(-10, 30);
            return new WeatherForecast {
                Date = startDate.AddDays(index),
                TemperatureC = temperatureC,
                CloudCover = CloudCover[rng.Next(0, 4)],
                Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
            };
        }).ToList();
    }

    public List<WeatherForecast> GetForecast() {
        return Forecast;
    }

    public Task<WeatherForecast[]> GetForecastAsync(CancellationToken ct = default) {
        return Task.FromResult(Forecast.ToArray());
    }
}

Program.cs

// ...
builder.Services.AddSingleton<WeatherForecastService>();

Implements

ExportWidth