Selectize plugin in HTML

menashe

I am using HTML to stylize the layout and positioning of Editor form fields.

       </div>
    </div>
    <div class="flex-container DTE_Field form-group row">
        <label class="flex-child col-lg-4 col-form-label">Limit:</label>
        <div class="flex-child purchase_limit_quantity col-sm-1">
            <div class="DTE_Field_InputControl" style="display: block;">
                <input id="purchase_limit_quantity" type="text" class="form-control">
            </div>
        </div>
        <div class="flex-child purchase_limit_units col-sm-2">
            <div class="DTE_Field_InputControl" style="display: block;">
                <select id="purchase_limit_units" name="purchase_limit_units" class="form-control" style="appearance: menulist">
                    <option value="" disabled selected hidden>Please select a unit...</option>
                    <option value=0> </option>
                    <option value=1>Items</option>
                    <option value=2>Offers</option>
                </select>
            </div>
        </div>
    </div>
    <!-- <editor-field name="crosswalk_prices_to_discounts.purchase_limit_quantity"></editor-field>

I have been able to use the select element.

How could I implement the selectize plugin (which use extensively elsewhere within my Editor code?

allan

We have a plug-in for Editor to support Selectize field types.

Allan

menashe

Hi Allan,

Not exactly what I meant.

As I mentioned, I use the below type of code multiple times in my web app.

     "label": "Priority:",
     "name": "priority",
     "type": "selectize",
     "options": [
         { "label": "1 (highest)", "value": "1" },
         { "label": "2",           "value": "2" },

What I would like to do is use selectize instead of select in the below example:

        <div class="flex-child must-buy-restriction col-sm-5">
            <div class="DTE_Field_InputControl" style="display: block;">
                <select id="must-buy-restriction" name="must-buy-restriction" class="form-control" style="appearance: menulist">
                    <option value="" disabled selected hidden>Please select a Restriction...</option>
                    <option value=0> </option>
                    <option value=1>Must Buy</option>
                    <option value=2>When You Buy</option>
                </select>
            </div>
        </div>

Thank you for all of your help!

allan

That is what "type": "selectize", should do. If the plug-in is loaded, it should convert the select into a Selectize field.

If that isn't happening for you, could you give me a link to a page showing the issue please?

Thanks,
Allan

menashe

Allan,

In the second image above, I am using html in the Editor template (not DataTables Editor code) because I want to format the look of the Editor form and the layout of fields.

In html, can I utilize selectize?

allan

I'm a bit confused since you posted an Editor field configuration. So you don't want an Editor field, but you do want Selectize? That being the case, I'm not clear why you can't just initialise it as a standard Selectize control?

Sorry, I'm a bit confused

Allan