DxRangeSelector.SelectedRangeUpdateMode Property

Specifies how the selected range should behave if new values are added to the data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(ChartVisualRangeUpdateMode.Reset)]
[Parameter]
public ChartVisualRangeUpdateMode SelectedRangeUpdateMode { get; set; }

Property Value

Type	Default	Description
ChartVisualRangeUpdateMode	Reset	An enumeration value.

Available values:

Name	Description
Shift	The visual range moves to the axis end and keeps its length. Applies to argument axes only.
Reset	The visual range matches the data range.
Keep	The visual range does not change.
Auto	Keep if the visual range is specified; otherwise, Reset.

Remarks

Use the SelectedRangeUpdateMode property to specify how the selected range should behave if new values are added to the data source.

Razor

<DxButton Text="Add a new day" Click="(e) => GenerateNewItem()" />

<DxRangeSelector Width="700px"
                 Data="@DataList"
                 SelectedRangeUpdateMode="ChartVisualRangeUpdateMode.Shift"
                 SelectedRangeLength="ChartAxisInterval.Days(3)">
    <DxRangeSelectorChart>
        <DxChartLineSeries T="DailyData"
                           TArgument="DateTime"
                           TValue="int"
                           ArgumentField="@(s => s.Date)"
                           ValueField="@(s => s.Value)" />
    </DxRangeSelectorChart>
    <DxRangeSelectorScale>
        <DxRangeSelectorScaleMarker>
            <DxRangeSelectorScaleMarkerLabel>
                <DxTextFormatSettings Type="TextFormat.ShortDate" />
            </DxRangeSelectorScaleMarkerLabel>
        </DxRangeSelectorScaleMarker>
    </DxRangeSelectorScale>
</DxRangeSelector>

@code {
    public List<DailyData> DataList;
    protected override void OnInitialized() {
        DataList = GetData();
    }

    void GenerateNewItem() {
        DataList.Add(new DailyData() {
            Date = new DateTime(2020, 05, 20).AddDays(++DaysNum),
            Value = random.Next(10, 20)
        });
        DataList = new List<DailyData>(DataList);
    }
}

DataList

public class DailyData {
    public DateTime Date { get; set; }
    public int Value { get; set; }
}
public List<DailyData> GetData() {
    DataList = new List<DailyData>();
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 12), Value = 22 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 13), Value = 18 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 14), Value = 19 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 15), Value = 14 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 16), Value = 15 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 17), Value = 18 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 18), Value = 24 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 19), Value = 21 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 20), Value = 20 });
    return DataList;
}