7 Answer(s)
-
0
Select2 is not included in ASP.NET Zero by default. First you should include select2 javascript (select2.js) and css files (select2.min.css & select2-bootstrap.min.css).
Your select item also must have class name 'select2me' , because metronic handles it this way.
If you create modal on the fly, then you must also trigger jquery select2 by yourself on modal's 'shown.bs.modal' event.
Example html:
<select class="form-control select2me select2-multiple" multiple> <optgroup label="Alaskan"> <option value="AK">Alaska</option> <option value="HI" disabled="disabled">Hawaii</option> </optgroup> </select>
Example js for modal shown:
modal.on('shown.bs.modal', function () { modal.find('select.select2me').select2({ placeholder: "Select", width: 'auto', allowClear: true }); });
You can download metronic fom here <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/releases/download/v1.7.0/metronic-v4.5.3.zip">https://github.com/aspnetzero/aspnet-ze ... v4.5.3.zip</a>
I hope this helps .
-
0
Angular2 - asp core
Hi,
I'd like using the dropdown from keenthemes like the first one here <a class="postlink" href="http://keenthemes.com/preview/metronic/theme/admin_4_angularjs/index.html#/ui_select.html">http://keenthemes.com/preview/metronic/ ... elect.html</a>
I included the select2 version 4.0.3 in the package.json. Then I added the select2.js and the select2.css in the angular-cli.json
So if I'm in my modals html I try to use it like this:
<div class="form-group"> <label class="control-label col-md-3">Small</label> <div class="col-md-4"> <select id="selectPreview" class="form-control select2me select2-bootstrap-prepend" data-placeholder="Select..."> <option value=""></option> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select> <span class="help-block"> .input-small </span> </div> </div>
if I try to call in the modal ts file in the afterViewInit the
$('#selectPreview').select2 ({ placeholder: "Select", width: 'auto', allowClear: true }); });
It doesn't know the select2 in jQuery
Could you help me please ?
-
0
Hi,
Can you try it with a setTimeout ? If it does not work, please send your project to us, <a href="mailto:[email protected]">[email protected]</a> and we will take a look at it.
Thanks.
-
0
Befor I can try the timeout I need to remove the error with the $("#...").<span style="color:#FF0000">select2</span> ({ ...})
Visual Studio said Property 'select2' does not exist on type 'JQuery'
How can I remove this error ?
-
0
Hi,
You need to install select2 typings. You can install it as explained in here <a class="postlink" href="https://www.npmjs.com/package/@types/select2">https://www.npmjs.com/package/@types/select2</a>. Or you can define a custom typing like we do here <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/typings.d.ts#L58">https://github.com/aspnetzero/aspnet-ze ... s.d.ts#L58</a>
-
0
By casting to any, you could make TypeScript linter to skip the validation as well.
ANY, I couldn't get the look & feel of Select2 to be similar to other standard control when shown in Forms.
When playing with demo sample, it shown nicely, but mine isn't. Do I need to add any dedicated CSS?
-
0
Hi @doligence,
The above links belong to Metronic v4.x but we are using Metronic v5.x in ASP.NET Core & Angular version. Please be sure that you are using select2 as in this pag <a class="postlink" href="https://keenthemes.com/metronic/preview/?page=crud/forms/widgets/select2&demo=default">https://keenthemes.com/metronic/preview ... mo=default</a>.