Back to Devexpress

DxRangeSelector.Data Property

blazor-devexpress-dot-blazor-dot-dxrangeselector.md

latest3.0 KB
Original Source

DxRangeSelector.Data Property

Specifies an object that supplies Range Selector data.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[Parameter]
public IEnumerable<object> Data { get; set; }

Property Value

TypeDescription
IEnumerable<Object>

A data source.

|

Remarks

Use the Data property to bind the Range Selector to data. Follow the steps below to display data within the component:

  1. Bind the Data parameter to a C# field or property.
  2. Populate this field or property with data in the OnInitialized lifecycle method.

razor
<DxRangeSelector Data="@Data">
    <DxTitleSettings Text="Population by Country, 2023" />
    <DxRangeSelectorChart>
        <DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
                          ValueField="@((PopulationPoint s) => s.Value)" />
    </DxRangeSelectorChart>
</DxRangeSelector>

@code {
    List<PopulationPoint> Data;
    protected override void OnInitialized() {
        Data = GetData();
    }
}
csharp
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;
    }
}

See Also

DxRangeSelector Class

DxRangeSelector Members

DevExpress.Blazor Namespace