cascading parameter in custom ListBox component Do not update

[ebi torabi]

*****************ListBox component*******************

@if (IsMultiSelect)

{

    <div class="col-lg-12 control-section">

        <div>

            <EjsListBox @ref="@ListBox" CssClass="e-custom-font" TValue="int[]" DataSource="MainDataSource" @bind-Value="@_bindValue" EnableRtl="true" Query="@Query" Height="@Height">

                <ListBoxEvents TValue="int[]" ValueChange="ValueChangedHandler"></ListBoxEvents>

                <ListBoxFieldSettings Text="Name" Value="Id" GroupBy="Group" />

                <ListBoxSelectionSettings ShowCheckbox="true" Mode="Syncfusion.EJ2.Blazor.DropDowns.SelectionMode.Multiple"></ListBoxSelectionSettings>

            </EjsListBox>

        </div>

    </div>

}

else

{

    <div class="col-lg-12 control-section">

        <div>

            <EjsListBox @ref="@ListBox" CssClass="e-custom-font" DataSource="MainDataSource" TValue="int[]" @bind-Value="_bindValue" ModelType="@Model" EnableRtl="true" Query="@Query" Height="@Height">

                <ListBoxEvents TValue="int[]" ValueChange="ValueChangedHandler"></ListBoxEvents>

                <ListBoxFieldSettings Text="Name" Value="Id" GroupBy="Group" />

                <ListBoxSelectionSettings Mode="Syncfusion.EJ2.Blazor.DropDowns.SelectionMode.Single"></ListBoxSelectionSettings>

                <ListBoxTemplates>

                    <ItemTemplate Context="Context">

                        @{

                            NameIdGroup currentData = Context as NameIdGroup;

                            <EjsRadioButton Name="FatStoragelistRadio" Label=@currentData.Name LabelPosition="RadioLabelPosition.After"></EjsRadioButton>

                            if (!String.IsNullOrEmpty(currentData.Description))

                            {

                                <span class="description">@currentData.Description</span>

                            }

                        }

                        <span class='e-seperator'></span>

                    </ItemTemplate>

                </ListBoxTemplates>

            </EjsListBox>

        </div>

    </div>

}

@code{

    private int[] _bindValue { get; set; }

    [Parameter]

    public int[] bindValue

    {

        get => _bindValue;

        set

        {

            this._bindValue = value;

        }

    }

    [Parameter]

    public EventCallback<int[]> bindValueChanged { get; set; }

    [Parameter]

    public EventCallback<ListBoxChangeEventArgs> ListBoxValueChanged { get; set; } // Custom EventCallback

    public void ValueChangedHandler(ListBoxChangeEventArgs args)

    {

        this.bindValueChanged.InvokeAsync(_bindValue); // Invoke EventCallback to update your model property

        this.ListBoxValueChanged.InvokeAsync(args); // Invoke the Custom EventCallback

    }

    [CascadingParameter(Name = "PatientInfoEntryPage")]

    Newsha.Client.Pages.PatientInfoEntryPage parent { get; set; }

    [Parameter]

    public List<NameIdGroup> DataSource { get; set; } = null;

    [Parameter]

    public string Header { get; set; } = null;

    [Parameter]

    public string Query { get; set; }

    [Parameter]

    public string Height { get; set; }

    [Parameter]

    public EventCallback<Syncfusion.EJ2.Blazor.DropDowns.ListBoxChangeEventArgs> ValueChange { get; set; }

    [Parameter]

    public bool IsMultiSelect { get; set; } = false;

    private List<NameIdGroup> MainDataSource = new List<NameIdGroup>();

    NameIdGroup Model = new NameIdGroup();

    EjsListBox<int[]> ListBox;

    protected override void OnParametersSet()

    {

        MainDataSource = DataSource != null ? DataSource : parent.MainDiseaseList;

    }

*************************** Parent*******************

  <CascadingValue Value="this" Name="PatientInfoEntryPage">

                                                        <ListBoxComponent IsMultiSelect="false" bindValue="@MainModel.MainDisease" Header="@LabelValues.MainDisease.QuestionLabel" Height="172px"></ListBoxComponent>

                                                    </CascadingValue>

public List<NameIdGroup> MainDiseaseList = new List<NameIdGroup>();

if (args.SelectedIndex == sourceTab.Items.IndexOf(MainDiseaseTab))

        {

            MainDiseaseList.Clear();

            foreach (var item in MainModel.Diseases)

            {

                var diseases = DiseasesList.Single(c => c.Id == item);

                MainDiseaseList.Add(diseases);

            }

            StateHasChanged();

        }

[Madhan Venkateshan]

Hi Ebi, 

 

Good day to you. 

 

We would like to suggest you to use ObservableCollection type to the DataSource property of the ListBox control to update the items in the ListBox when adding a new item in the DataSource. We have prepared a sample based on your requirement, please refer the below code snippets and sample link. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/149684/ze/ListboxObseravable-1467934799 

 

Index.razor 

@using System.Collections.ObjectModel 

 

<div> 

    <CascadingValue Value="this" Name="PatientInfoEntryPage"> 

        <ListBoxComponent @bind-bindValue="@Value" Height="340" ListBoxValueChanged="ListBoxValueChangedHandler"> 

        </ListBoxComponent> 

    </CascadingValue> 

    <button @onclick="changeData">Add Data</button> 

    <span>selected count: </span> @Value.Count() 

</div> 

 

@code{ 

    public int[] Value = new int[] { 1 }; 

    public ObservableCollection<object> DataSource = new ObservableCollection<object> 

{ 

        new { Name = "Hennessey Venom", Id = 1 }, 

        new { Name = "Bugatti Chiron", Id = 2 } 

    }; 

 

    public void changeData() 

    { 

        DataSource.Add(new { Name = "SSC Ultimate Aero", Id = 3 }); 

    } 

} 

 

ListboxComponent.razor 

@using  System.Collections.ObjectModel 

@inherits EjsListBox<int[]> 

<EjsListBox CssClass="e-custom-font" TValue="int[]" DataSource="MainDataSource" @bind-Value="@_bindValue" EnableRtl="true" Height="Height"> 

    <ListBoxEvents TValue="int[]" ValueChange="ValueChangedHandler"></ListBoxEvents> 

    <ListBoxFieldSettings Text="Name" Value="Id" /> 

    <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings> 

</EjsListBox> 

 

@code { 

    [CascadingParameter(Name = "PatientInfoEntryPage")] 

    public Index parent { get; set; } 

 

    public ObservableCollection<object> MainDataSource = new ObservableCollection<object>(); 

 

    protected override void OnParametersSet() 

    { 

        MainDataSource = this.parent.DataSource; 

    } 

 

} 

 

 

Regards, 

Madhan V 

[ebi torabi]

Hi Madhan V . Thank you very much for your solution. But this seems like a temporary solution. Do you have a plan to solve this problem more fundamentally in the future?

[Madhan Venkateshan]

Hi Ebi, 

 

Thanks for your update. 

 

We would like to inform you that when you change the complete datasource, change detection will be notified but when adding an item to the list, it will not be notified. so we suggested you to use ‘ObservableCollection’ to get notified when an item is added to the list. 

 

Regards, 

Madhan V