Base solution for your next web application
Open Closed

Metronic Select2 Issues in Modal #764


User avatar
0
montanaprogrammer created

Has anyone gotten the Metronic select2 (multiple select) working in a Modal in AspNetZero?

It doesn't appear to work for me even when I copy & paste directly from Metronic's theme definition page.

[attachment=0:3mmho2vq]Capture.PNG[/attachment:3mmho2vq]


7 Answer(s)
  • User Avatar
    0
    ismcagdas created
    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 .

  • User Avatar
    0
    michaelhilgers created

    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 ?

  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    michaelhilgers created

    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 ?

  • User Avatar
    0
    ismcagdas created
    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>

  • User Avatar
    0
    doligence created

    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?

  • User Avatar
    0
    ismcagdas created
    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>.