The following code uses a DropDownList to select from three values. The selected value is supposed to display in the InPlaceEditor Value property. Works fine selecting and displaying values OTHER than the initialized value ("4.7"). When I select the initialized value, InPlaceEditor continues to display the previously selected value.
(NOTE: the code works as expected when used with SfTextBox alone)
<SfInPlaceEditor Mode="RenderMode.Inline"
EditableOn="EditableType.Click"
Type="InputType.Text"
TValue="string"
ShowButtons="false"
Value="@QuantityToShow.Value">
<EditorComponent>
<SfTextBox Value="@QuantityToShow.Value"></SfTextBox>
</EditorComponent>
</SfInPlaceEditor>
<SfDropDownList TValue="int"
TItem="QuantityModel"
DataSource="@QuantityList"
Value="@SelectedUnit">
<DropDownListTemplates TItem="QuantityModel">
<ItemTemplate>
<span>
<span>@context.Value</span> <span>@context.Symbol</span>
</span>
</ItemTemplate>
<ValueTemplate>
<span>@context.Symbol</span>
</ValueTemplate>
</DropDownListTemplates>
<DropDownListEvents TItem="QuantityModel" TValue="int" ValueChange="UnitChange"></DropDownListEvents>
<DropDownListFieldSettings Text="Symbol" Value="UnitValue"></DropDownListFieldSettings>
</SfDropDownList>
@code
{
protected ObservableCollection<QuantityModel> QuantityList = new();
protected QuantityModel QuantityToShow = new();
protected int SelectedUnit { get; set; }
protected override void OnInitialized()
{
QuantityToShow = new QuantityModel { Value = "4.7", Symbol = "SRM", UnitValue = 0 };
QuantityList.Add(new QuantityModel { Value = "4.7", Symbol = "SRM", UnitValue = 0 });
QuantityList.Add(new QuantityModel { Value = "9.2", Symbol = "EBC", UnitValue = 1 });
QuantityList.Add(new QuantityModel { Value = "4.0", Symbol = "L", UnitValue = 2 });
SelectedUnit = QuantityToShow.UnitValue;
}
protected void UnitChange(ChangeEventArgs<int, QuantityModel> args)
{
QuantityToShow = args.ItemData;
SelectedUnit = args.Value;
}
public class QuantityModel
{
public string Value { get; set; }
public int UnitValue { get; set; }
public string Symbol { get; set; }
}
}