@onchange not working on select2
Dear support,
i installed blazor version successfully but can't devel @OnChange not working on this form componenet:
https://preview.keenthemes.com/metronic8/demo1/documentation/forms/select2.html
is there any sample or guide for it?
Regards
Replies (10)
Blazor and jQuery/JavaScript-based plugins like Select2 can sometimes have compatibility issues, particularly with event handling and data binding, because Blazor operates on a different paradigm (C# code running on WebAssembly or server-side) than traditional JavaScript with geometry dash lite .
Hi There,
Who are still struggling with "OnChange" event not firing in Blazor. There is a way to manually trigger the "Onchange" event when select option is changed in select2.
$(element).on("select2:select", function (e) {
element.dispatchEvent(new Event("change"));
});in file
scripts.bundle.js line 7080.This creates some CSS issues when new element is selected, so add class "select2-hidden-accessible" to the select2 select element in HTML.
Hope this helps.
OH MY GOD THANK YOU !
Thanks Lauris,
I tried your ways it's working but without search option like below sample:
https://preview.keenthemes.com/metronic8/demo1/account/settings.html
like country & Language columns
Also issue in DataTable the sort click not working
Also we tried to use another components from html it's not working properly ,
We need a guide how to use html like
Thanks
Thank you for your feedback.
We have an issue with select2 initialization.
To fix the issue you need to call the createInstances function of the KTApp instance.
JS.InvokeVoidAsync("KTApp.createInstances");Fix will be available in the next Metronic release.
Some of the components from our HTML version might require an additional initialization. Could you please specify which components you are trying to use?
Hi Lauris,
sorry for hooking in, just wanted to mention, that the following example will render the dropdown nicely, but not react on value change or "onchange"-event:
@inject IJSRuntime JsRuntime
<select @bind="@Value" class="form-select" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<h6>@Value</h6>
@code {
private string Value { get; set; } = "null";
protected override void OnAfterRender(bool firstRender)
{
JsRuntime.InvokeVoidAsync("KTApp.createInstances");
}
}can you tell us, what to fix?
Many thanks,
Max
yes we have same issue
Hi Max,
Event handling for select2 fields will work differently from classic HTML selects, the ways I described above will work only if you are using uninitialized select2 fields.
For initialized select2 fields please check a solution in the answer below:
https://stackoverflow.com/a/58795843/13267518
Hi Lauris,
does this select2 initialisation applies also to Html version ????, could you confirm !??
I got the same thing here : <a>https://devs.keenthemes.com/question/uncaught-referenceerror-is-not-defined</a>
If so, great, I can wait for the next update.
thank you
Hi,
You can try the example below:
<select @onchange="onChange" class="form-select" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>@code {
private string value { get; set; }
private void onChange(ChangeEventArgs e){
value = e.Value.ToString();
}
}Also as an alternative, you can just bind a value using the @bind attribute.
<select @bind="@value" class="form-select" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
