1. Home
  2. Forum
  3. Blazor
  4. cascading parameter in custom ListBox component Do not update

cascading parameter in custom ListBox component Do not update

*****************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" [email protected] 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();
        }





3 Replies
MV Madhan Venkateshan Syncfusion Team December 10, 2019 05:25 PM UTC

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. 
 
 
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 


ET ebi torabi December 10, 2019 10:20 PM UTC

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?

MV Madhan Venkateshan Syncfusion Team December 18, 2019 02:08 PM UTC

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 


Loader.
Up arrow icon