Framework | Framework

Button Chart Checkbox / Toggle Confirmation Popover DataTables DateTime Datepicker Email Error Page Error Messages Export CSV/PDF Form Upload Image/File Namespaces Number Plugins Scanner Select / Autocomplete Text / Textarea

Basic Select

In order for the placeholder to appear, the first option in the list must be empty

Output: ____ // Event Type: ____

HTML

<select data-fd-control="select" data-fd-callback="setOutputText" class="form-control" data-fd-allowsearch="false" data-fd-placeholder="Choose an option!">
    <option></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Multiselect

Output: ____ // Event Type: ____

HTML

<select data-fd-control="select" data-fd-callback="setOutputText" class="form-control" multiple="multiple">
    <option value="-1">Select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Default Ajax Options (Provider Only)

Default options contain a few assumptions:

The controller action referenced in the asp-action attribute has a single string parameter called "term"
The action returns a Json object with a single property: "results". The results field is a list of objects with two properties: ID (int) and Text (string).

Output: ____ // Event Type: ____

HTML

<select class="form-control" 
    data-fd-control="select" 
    data-fd-callback="setOutputText" 
    data-fd-minimuminputlength="1"
    asp-action="GetDefaultSearch">
</select>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Custom Ajax Options with Initial Value

Output: ____ // Event Type: ____

HTML

<select class="form-control" 
    data-fd-control="select" 
    data-fd-callback="setOutputText" 
    data-fd-minimuminputlength="1"
    data-fd-ajaxbuilder="buildCustomAjax">
    <option value="1" selected>Initially Selected Option!</option>
</select>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

FD.Page.buildCustomAjax = function () {
    let that = this;
    return {
        url: "/Framework/Select/GetCustomSearch",
        data: function (params) {
            var query = {
                searchTerm: params.term,
                parentID: that.options.parentid
            };

            // Query parameters will be ?searchTerm=[term]&parentID=[this.options.parentid]
            return query;
        },
        processResults: function (data) {
            for (var x = 0; x < data.results.length; x++) {
                data.results[x].text = data.results[x].text + ' [Modified in JS]';
            }

            return {
                results: data.results
            };
        }
    };
};