Metronic Select2 Issues in Modal #764

7 Answer(s)

• 

  0

  ismcagdas created 8 years ago

  Support Team

  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 .

  Save Cancel
• 

  0

  michaelhilgers created 7 years ago

  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 ?

  Save Cancel
• 

  0

  ismcagdas created 7 years ago

  Support Team

  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.

  Save Cancel
• 

  0

  michaelhilgers created 7 years ago

  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 ?

  Save Cancel
• 

  0

  ismcagdas created 7 years ago

  Support Team

  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>

  Save Cancel
• 

  0

  doligence created 6 years ago

  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?

  Save Cancel
• 

  0

  ismcagdas created 6 years ago

  Support Team

  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>.

  Save Cancel