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
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"));
});
scripts.bundle.js line 7080.
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");
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");
}
}
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();
}
}
<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>