Blazor fire onchange event when Chosen drop down value changes

I have following html that works but when I render drop down with Chosen it stops working. because chosen do not update actual drop down value it creates its own element that holds selected value. but i can not access that so how to trigger the onchange event then?

<select id="search" single class="chosen-select" @onchange="UpdateValue" bind="@searchValue">
        ...
</select>
...In @Code
void UpdateValue(ChangeEventArgs e)
{
    searchValue = e.Value.ToString();
    ... 
}

Now if I initialize drop down with chosen then I can not detect on change but can other wise. I am using Blazor GL - Server Side with .net core 3.0.1

Answers:

Answer

I implement it sigly different by adding an onclick event on each option item:

<select id="search" single class="chosen-select" value="@searchValue">
   @foreach(var value in values)
   {
      <option @onclick="() => OnItemClicked(value)>@value</option>
   }
</select>
@Code {
    private string searchValue;
    private IEnumerable<string> values = new string[]
    {
       // configure here your list of options
       "option1",
       "option2",
    }

    void OnItemClick(string value)
    {
       searchValue = value;
       StateHasChanged();
    }
}
Answer

I have the same problem. My temp fix is using IJSRuntime for manual binding value for this type component which is rendered by 3rd js libraries (Example: select2 library). - Component.razor:

<select id="Name" class="form-control select2">
    <option @key="key">...</option>
</select>
  • form.js:

    window.forms = {
    
    init: function () {
        $('.select2').select2();
    },
    selecte2BindOnChange2: function (id, dotnetHelper, nameFunc, namePro) {
    $('#' + id).on('select2:select', function (e) {
        dotnetHelper.invokeMethodAsync(nameFunc, namePro, $('#' + id).val());
    });
    

    } }

  • class function:

        public async Task InitFormAsync()
        {
            await _jSRuntime.InvokeVoidAsync("forms.init");
            var properties = this.GetType().GetProperties()
                .Where(c => c.GetCustomAttributes(false)
                    .Any(ca => ca is FieldAttribute && ((FieldAttribute)ca).Type == FieldType.Combobox));
            foreach (var p in properties)
            {
                await _jSRuntime.InvokeVoidAsync("forms.selecte2BindOnChange2", p.Name, DotNetRef, "Change_" + this.GetType().Name, p.Name);
            }
        }
    
        [JSInvokable("Change_Model")]
        public void Change(string nameProperty, string value)
        {
            if (value == "null")
            {
                this.SetValue(nameProperty, null);
            }
            else
            {
                this.SetValue(nameProperty, value);
            }
        }
    
Answer

<select @bind="productInfo.CategoryId" 
                                           @bind:event="oninput"
                                @onchange="categoryClick"
                                           class="form-control">
                            @if (categories is null)
                            {
                                <p><em>Loading</em></p>
                            }
                            else
                            {
                                @foreach (var item in categories)
                                {
                                    <option value="@item.Id">@item.CategoryName</option>
                                }
                            }
                        </select>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.