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 12:45 PM UTC

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 02:42 PM UTC

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 01:00 PM UTC

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 09:40 PM UTC

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


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

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 08:14 PM UTC

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 07:04 AM UTC

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


Loader.
Up arrow icon