Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

data-allow-clear="true" with .Net 6 with asp-items="ViewBag.ClientRole" does not clear the selection


Dear support!

I am using Metronic 8 with Html theme 8 and .Net 6 to develop my application.

In the SELECT element, I am using data-allow-clear="true" and options are loads from the server and used in HTML as showed below:

a) Instruction in server controller:

ViewData["ClientRole"] = new SelectList(_context.ClientRole.Where(x => x.ClientAccountId.Equals(_clientAccountId)).OrderBy(o => o.Name), "ClientRoleId", "Name");

b) Select element in HTML page:

<div class="col-lg-6 fv-row">
<label asp-for="ClientRoleId" class="required form-label"></label>
<select id="input-client-role-id" asp-for="ClientRoleId" class="form-select" data-control="select2" data-allow-clear="true" asp-items="ViewBag.ClientRole"><option disabled selected>Select an option</option></select>
</div>


When the page is loaded, the disabled option is showed, but if I select some option in the list, I can not clear the selection any more. The behave desired after clicking the "x" button is to clear the selection mad before and the element show the disabled option again.

Thanks


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 (5)


Hi,

May I know what is your Metronic version ?
In the recent version of Metronic we fixed this issue and you can check it here

Please try to get latest Metronic ASP.NET Core version from Metronic Downloads.

Regards.



Hi!

I am using version 8.1.6.

I am using demo 8 and the link you have posted for ASP.NET Core does not have demo 8 available.

Regards.



Hi,

data-allow-clear should be used in combination with the placeholder attribute.
Try to add data-placeholder attribute to your select element.
data-placeholder="your place holder"

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Lauris, thanks for your instructions about data-allow-clear. After I have put data-placeholder attribute, the clear option worked properly.

Best regards.



Glad to hear that. All the best with your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
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  :(