We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Problem when using the component inside the wrapper

I have created a Custom wrapper component around SfDropDownList, and I want to use it in the rest of my application. It has Value and OnChange parameters which I have bound to Value / ValueChange respectively (full code at the end of the post). But when I try to use it it causes two types of problems: If I don't call StateHasChanged in the parent component handler, the value is not set in the SfDropdownList If I call StateHasChanged in the parent component handler, ValueChange gets triggered twice: once with new value, and once with previous value, causing the SfDropdownList to always be set to the first value. Your documentation mostly everywhere uses @bind-Value which I don't want to use in my case. Do you have any suggestions or is this a bug on your end? CustomWrapper : @typeparam TValue @typeparam TItem public partial class CustomSelectBox { [Parameter, EditorRequired] public TValue Value { get; set; } = default!; [Parameter, EditorRequired] public string OptionDisplay { get; set; } = default!; [Parameter, EditorRequired] public string OptionValue { get; set; } = default!; [Parameter, EditorRequired] public IEnumerable Data { get; set; } = default!; [Parameter] public Action? OnChange { get; set; } } Parent component:

5 Replies

AM Amar April 4, 2023 07:43 AM UTC



<SfDropDownList TItem="TItem" TValue="TValue" Value="@BindingValue" DataSource="@Data">

        <DropDownListEvents TItem="TItem" TValue="TValue" ValueChange="@((args) => OnChange?.Invoke(args.Value))"></DropDownListEvents>

        <DropDownListFieldSettings Text="@OptionDisplay" Value="@OptionValue" />

    </SfDropDownList>



AM Amar April 4, 2023 07:43 AM UTC

public partial class CustomSelectBox


{


[Parameter] public TValue BindingValue { get; set; } = default!;


[Parameter, EditorRequired] public string OptionDisplay { get; set; } = default!;


[Parameter, EditorRequired] public string OptionValue { get; set; } = default!;


[Parameter, EditorRequired] public IEnumerable Data { get; set; } = default!;


[Parameter] public Action? OnChange { get; set; }

}



AM Amar April 4, 2023 07:43 AM UTC

            <CustomSelectBox TItem="@int" TValue="@int?" Value="@Model.Year" Data="@YearRange" OptionDisplay="@(nameof(Model.Year))" OptionValue="@(nameof(Model.Year))" OnChange="@((value) => Model.Year = value)">


                        </CustomSelectBox>



AM Amar April 4, 2023 07:44 AM UTC

There are

@typeparam TValue

@typeparam TItem
as well in the CustomSelectBox razor which your forum text editor for some reason deletes.



UD UdhayaKumar Duraisamy Syncfusion Team April 7, 2023 01:01 PM UTC

Based on the information you provided, we suspect that you are experiencing difficulty using the DropDownList as a custom component. You can refer to the Syncfusion forums shared below for assistance with your requirements.


Forums:



Loader.
Live Chat Icon For mobile
Up arrow icon