@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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)

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>

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 : https://devs.keenthemes.com/question/uncaught-referenceerror-is-not-defined

If so, great, I can wait for the next update.

thank you

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(