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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Component TwoWay Databinding using ListBox

Thread ID:

Created:

Updated:

Platform:

Replies:

149583 Dec 2,2019 10:01 AM UTC Jun 2,2020 07:04 AM UTC Blazor 7
loading
Tags: ListBox
ebi torabi
Asked On December 2, 2019 10:01 AM UTC

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>




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


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

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


ebi torabi
Replied On December 4, 2019 09:40 PM UTC

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


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


Blazor
Replied On 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

Madhan Venkateshan [Syncfusion]
Replied On June 2, 2020 07:04 AM UTC

Hi Blazor, 
 
Thanks for your update. 
 
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