Component TwoWay Databinding using ListBox

[ebi torabi]

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]

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. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/149583/ze/CustomListboxWithTwoWay1537162136 

 

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]

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]

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. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/149583/ze/CustomListboxWithTwoWay-788433707 

 

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]

Hi Madhan V .

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

[Madhan Venkateshan]

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]

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]

Hi Blazor, 

 

Thanks for your update. 

 

Regards, 

Madhan V