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
  1. Home
  2. Forum
  3. Blazor
  4. Component TwoWay Databinding using ListBox

Component TwoWay Databinding using ListBox

how to implement TwoWay Databinding in custum component using Listbox
***************ListBoxComponent**************
@if (IsMultiSelect)
{
    <div class="col-lg-12 control-section">
        <div>
            <EjsListBox @ref="@ListBox" CssClass="e-custom-font" TValue="int[]" DataSource="DataSource" @bind-Value="@bindValue" EnableRtl="true" Query="@Query" Height="@Height">
                <ListBoxEvents TValue="int[]" DataBound="DataBound" Created="Created" ValueChange="ValueChange"></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="DataSource" TValue="int[]" @bind-Value="bindValue" ModelType="@Model" EnableRtl="true" Query="@Query" Height="@Height">
                <ListBoxEvents TValue="int[]" DataBound="DataBound" ValueChange="ValueChange"></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
        {
            if (_bindValue == value) return;
            _bindValue = value;
            BindingValueChanged.InvokeAsync(value);

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

    [Parameter]
    public IList<NameIdGroup> DataSource { get; set; } = null;





****************use ListBoxComponent*************************
<ListBoxComponent IsMultiSelect="true"  DataSource="@DiseasesList" ValueChange="@DiseasesSelect" @bind-bindValue="MainModel.Diseases" Header="@LabelValues.Diseases.QuestionLabel" Height="320px"></ListBoxComponent>




7 Replies
MV Madhan Venkateshan Syncfusion Team December 3, 2019 07:45 AM

Hi Ebi, 
 
Good day to you. 
 
We have checked your requirement. You can update the model property (two way binding property) of your custom component by invoking EventCallback of binding property ‘bindValue’ in ValueChange Event of EJ2 Listbox component. We have prepared a sample, please refer the below sample link and code snippets. 
 
 
ListBoxComponent.razor 
@inherits EjsListBox<int[]> 
    <EjsListBox CssClass="e-custom-font" TValue="int[]" DataSource="DataSource" @bind-Value="@_bindValue" EnableRtl="true" Height="Height"> 
        <ListBoxEvents TValue="int[]" ValueChange="ValueChangedHandler"></ListBoxEvents> 
        <ListBoxFieldSettings Text="Name" Value="Id" /> 
        <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings> 
    </EjsListBox> 
 
@code { 
    private int[] _bindValue { get; set; } 
 
    [Parameter] 
    public int[] bindValue 
    { 
        get => _bindValue; 
 
        set 
        { 
            this._bindValue = value; 
        } 
    } 
 
    [Parameter] 
    public EventCallback<int[]> bindValueChanged { get; set; } 
 
    public void ValueChangedHandler() 
    { 
        this.bindValueChanged.InvokeAsync(_bindValue); // Invoke EventCallback to update your model property 
    } 
} 
 
 
Index.razor 
<ListBoxComponent DataSource="DataSource" @bind-bindValue="@Value" Height="340"> 
        </ListBoxComponent> 
 
        <span>selected count: </span> @Value.Count() 
 
Regards, 
Madhan V 


ET ebi torabi December 3, 2019 09:42 AM

Hi Madhan V. Thank you very much. This example works very well, but I would like to override ValueChange in parent by EventCallback.
Please get sample.

MV Madhan Venkateshan Syncfusion Team December 4, 2019 08:00 AM

Hi Ebi, 
 
Good day to you. 
 
We would like to suggest you to add custom EventCallback for your custom component and invoke the custom EventCallback in the ValueChange Event of EJ2 Listbox. Please refer the below code snippets and sample link. 
 
 
ListBoxComponent.razor 
[Parameter] 
    public EventCallback<ListBoxChangeEventArgs> ListBoxValueChanged { get; set; } // Custom EventCallback 
 
    public void ValueChangedHandler(ListBoxChangeEventArgs args) 
    { 
        this.ListBoxValueChanged.InvokeAsync(args); // Invoke the Custom EventCallback 
    } 
 
Index.razor 
<ListBoxComponent DataSource="DataSource" @bind-bindValue="@Value" Height="340" ListBoxValueChanged="ListBoxValueChangedHandler"> 
        </ListBoxComponent> 
 
@code{ 
    public void ListBoxValueChangedHandler(ListBoxChangeEventArgs args) 
    { 
        Console.WriteLine(args); 
    } 
} 
 
Regards, 
Madhan V 


ET ebi torabi December 4, 2019 04:40 PM

Hi Madhan V .
Thanks a lot. With your help, the problem has been resolved


MV Madhan Venkateshan Syncfusion Team December 5, 2019 01:04 AM

Hi Ebi, 
 
Thank you for your update, Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Madhan V 


BL Blazor replied to ebi torabi June 1, 2020 03:14 PM

how to implement TwoWay Databinding in custum component using Listbox
***************ListBoxComponent**************
@if (IsMultiSelect)
{
   
       
           
               
               
               
           

       
   

}
else
{

   
       
           
               
               
               

               

                   
                        @{
                            NameIdGroup currentData = Context as NameIdGroup;
                           
                            if (!String.IsNullOrEmpty(currentData.Description))
                            {
                                @currentData.Description
                            }

                        }
                       
                   

               

           
       
   

}

@code{
   
    private int[] _bindValue { get; set; }
    [Parameter]

    public int[] bindValue
    {
        get => _bindValue;
        set
        {
            if (_bindValue == value) return;
            _bindValue = value;
            BindingValueChanged.InvokeAsync(value);

        }
    }
    [Parameter]
    public EventCallback BindingValueChanged { get; set; }

    [Parameter]
    public IList DataSource { get; set; } = null;





****************use ListBoxComponent*************************
@bind-bindValue="MainModel.Diseases" Header="@LabelValues.Diseases.QuestionLabel" Height="320px">




Hi Ebi ,
An other solution worked for me, you can try if you're interested.

Just to change your EventCallBack paramter name like :    BindingValueChanged  to bindValueChanged

MV Madhan Venkateshan Syncfusion Team June 2, 2020 02:04 AM

Hi Blazor, 
 
Thanks for your update. 
 
Regards, 
Madhan V 


Loader.
Live Chat Icon For mobile
Up arrow icon