Metronic Select2 Issues in Modal #764

7 Answer(s)

• 

  0

  ismcagdas created 9 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:

  
  	
  		Alaska
  		Hawaii
  	
  
  

  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 8 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:

  
                                          Small
                                          
  
                                              
                                                  
                                                  Alabama
                                                  Wyoming
                                              
                                              
                                                  .input-small
                                              
                                          
                                      
  

  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 8 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:info@aspnetzero.com">info@aspnetzero.com</a> and we will take a look at it.

  Thanks.

  Save Cancel
• 

  0

  michaelhilgers created 8 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 8 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 7 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 7 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