Bind Value doesnt work when MultiSelect Dropdown in a wrapper

[Stefan Limpert]

Hi there,

in a current project i wrapped some Syncfusion stuff in wrappers. That works pretty much except Multiselect Dropdown. On the surface everthing looks fine. if i select od deselect values the textbox shows me exactly the changes. but the bind-value isnt changed.

1. initial

2. selection

3. after selection

The number 11 is the value of List<int>, so you can see underneath there is no change.

[Wrapper.razor]
@typeparam TValue
@typeparam TItem where TItem : class,new()
<SfMultiSelect TValue="@TValue" TItem="@TItem" DataSource="@DataSource" @bind-Value="@Value"
                   ShowClearButton="false" AllowFiltering="true" Mode="@VisualMode.CheckBox"
                   Placeholder="@LabelText" CssClass="@CSSClass" Readonly="@IsReadOnly" Enabled="@(!IsDisabled)" FloatLabelType="@FloatLabel"
                   ShowSelectAll="@SelectAll" EnableSelectionOrder="@SelectionOrder" ShowDropDownIcon="@DropdownIcon"
                   FilterBarPlaceholder="@FilterText" PopupHeight="@Height">
                <MultiSelectFieldSettings Text="@OptionText" Value="@OptionValue"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
    [Parameter] public string FilterText { get; set; } = "Suche ";
    [Parameter] public string CSSClass { get; set; } = null;
    [Parameter] public string Height { get; set; } = null;
    [Parameter] public bool IsReadOnly { get; set; } = false;
    [Parameter] public bool IsDisabled { get; set; } = false;
    [Parameter] public bool ShowThirdParty { get; set; } = true;
    [Parameter] public bool SelectAll { get; set; } = false;
    [Parameter] public bool DropdownIcon { get; set; } = true;
    [Parameter] public bool SelectionOrder { get; set; } = true;
    [Parameter] public IEnumerable<TItem> DataSource { get; set; }
    [Parameter] public string OptionValue { get; set; } = "Value";
    [Parameter] public string OptionText { get; set; } = "Text";
    [Parameter] public FloatLabelType FloatLabel { get; set; } = FloatLabelType.Always;
    [Parameter] public EventCallback<TValue> ValueChanged { get; set; }
    [Parameter] public virtual TValue Value {get;set;}

    protected override Task OnParametersSetAsync()
    {
        if (LabelText is null && (ShowThirdParty)) FloatLabel = FloatLabelType.Never;
        return base.OnParametersSetAsync();
    }
}

[index.razor]
<DisplayMultiSelectStandard TValue="List<int>" TItem="DetailModel" @bind-Value="@ParentData.DetailsIds"
            OptionText="@nameof(DetailModel.Beschreibung)"
            OptionValue="@nameof(DetailModel.Id)"
            DataSource="@Details"
            IsReadOnly="false"
            IsDisabled="false"
            ShowThirdParty="true">
        </DisplayMultiSelectStandard>
@if(@ParentData.DetailsIds is not null)
        {
            foreach(var id in ParentData.DetailsIds)
            {
                <span>@id,</span>
            }
        }
[classes]
public class DetailModel
{
   public int Id { get; set; }
   public string Beschreibung { get; set; }
}


public class ParentData
{
   public int Id { get; set; }
   public List<int> DetailsId { get; set; }
}

what am i missing?

Regards

Stefan

[Sureshkumar P]

Hi Stefan,

You can achieve your requirement by changing the child and parent component value as in the below code example. When you are using a two-way binding attribute to the child component you need to use value and valuechanged to the parent component to reflect the two-way bind variable in the parent component.

Find the code changed in your attached code:

[parent component]

 

<SfMultiSelect TValue="@TValue" TItem="@TItem" DataSource="@DataSource" Value="@Value" ValueChanged="@ValueChanged"

                   ShowClearButton="false" AllowFiltering="true" Mode="@VisualMode.CheckBox"

                   Placeholder="selectMultiVal" CssClass="@CSSClass" Readonly="@IsReadOnly" Enabled="@(!IsDisabled)" FloatLabelType="@FloatLabel"

                   ShowSelectAll="@SelectAll" EnableSelectionOrder="@SelectionOrder" ShowDropDownIcon="@DropdownIcon"

                   FilterBarPlaceholder="@FilterText" PopupHeight="@Height">

                <MultiSelectFieldSettings Text="@OptionText" Value="@OptionValue"></MultiSelectFieldSettings>

</SfMultiSelect>

 

Find the modified sample in the attachment.

Regards,

Sureshkumar P

Attachment: MultiselectCustomComponent_36b5f528.zip

[Stefan Limpert]

Hi Sureshkumar ,

thanks for your really fast and superb support, you saved my weekend. i'll give you 5 stars. :-)

Regards

Stefan

[Sureshkumar P]

Stefan,

Thanks for your update.

Regards,

Sureshkumar P