DxRangeSelector.Rendered Event

Fires after the Range Selector is rendered.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback Rendered { get; set; }

Remarks

Handle the Rendered event to track the moment when Range Selector rendering is finished and the component is completely loaded.

The following code snippet displays a custom Export to PDF button that exports the Range Selector to a PDF file. The button appears after the component is loaded. For demo purposes, the example imitates a time-consuming operation.

Razor

<DxRangeSelector Width="1000px"
                 Height="400px"
                 @ref="RangeSelector"
                 Data="@Data"
                 Rendered="@RangeSelectorRendered"
                 ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
    <DxTitleSettings Text="Population by Country">
        <DxSubtitleSettings Text="2023" />
    </DxTitleSettings>
    <DxRangeSelectorChart>
        <DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
                          ValueField="@((PopulationPoint s) => s.Value)" />
    </DxRangeSelectorChart>
</DxRangeSelector>

<DxButton Text="Export to PDF" Visible="@buttonVisible" Click="@ExportToPdf" />

@code {
    bool buttonVisible;
    DxRangeSelector RangeSelector;

    async Task ExportToPdf() {
        await RangeSelector.ExportToAsync("Range Selector", DataExportFormat.Pdf);
    }

    async Task RangeSelectorRendered() {
        await Task.Delay(2000);
        buttonVisible = true;
    }

    List<PopulationPoint> Data;

    protected override void OnInitialized() {
        Data = GetData();
    }
}

PopulationData

public List<PopulationPoint> GetData() {
    var result = new List<PopulationPoint>(14);
    result.Add(new PopulationPoint("India", 1428627663));
    result.Add(new PopulationPoint("China", 1425671352));
    result.Add(new PopulationPoint("United States", 339996563));
    result.Add(new PopulationPoint("Indonesia", 277534122));
    result.Add(new PopulationPoint("Pakistan", 240485658));
    result.Add(new PopulationPoint("Nigeria", 223804632));
    result.Add(new PopulationPoint("Brazil", 216422446));
    result.Add(new PopulationPoint("Bangladesh", 172954319));
    result.Add(new PopulationPoint("Russia", 144444359));
    result.Add(new PopulationPoint("Mexico", 128455567));
    result.Add(new PopulationPoint("Ethiopia", 126527060));
    result.Add(new PopulationPoint("Japan", 123294513));
    result.Add(new PopulationPoint("Philippines", 117337368));
    result.Add(new PopulationPoint("Egypt", 112716598));
    return result;
}

public class PopulationPoint {
    public string Country { get; set; }
    public long Value { get; set; }
    public PopulationPoint(string country, long value) {
        Country = country;
        Value = value;
    }
}