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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

cascading parameter in custom ListBox component Do not update

Thread ID:

Created:

Updated:

Platform:

Replies:

149684 Dec 5,2019 11:40 AM UTC Dec 18,2019 02:08 PM UTC Blazor 3
loading
Tags: ListBox
ebi torabi
Asked On December 5, 2019 11:40 AM UTC

*****************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 [Syncfusion]
Replied On 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 


ebi torabi
Replied On 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?

Madhan Venkateshan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon