Drop Down List With On Demand Ajax Calls

[admin]

Hey there,
Im wondering if there is a way to like up a remote data source to a drop down list using Ajax to gather the data. Im not seeing anything in the documentation that explains how to do this.
 
Being able to do so will play a major role in whether or not we decide to move forward with Smart for our ui development

[Hristofor]

Hi ctstrist,
you can set the dataSource property in your Ajax success function in order to load the new data to the element. The dataSource property can be set at any time with new data.
Also dataSource property accepts a callback function which allows to load custom data according to the filter input. This means that by entering a new value inside the filter field anew dataSource according to it will be loaded. Fitlering can be enabled by setting the filterable property. Here’s an example:

window.onload = function () {
    //Sample data
    const data = [
        { "name": "Afghanistan", "code": "AF" },
        { "name": "land Islands", "code": "AX" },
        { "name": "Antarctica", "code": "AQ" },
        { "name": "Antigua and Barbuda", "code": "AG" },
        { "name": "Argentina", "code": "AR" },
        { "name": "Armenia", "code": "AM" }
    ];
    const dropDownList = document.querySelector('smart-drop-down-list');
    //Setting properties to the element
    dropDownList.filterable = true;
    dropDownList.displayMember = 'name';
    dropDownList.valueMember = 'code';
    dropDownList.dataSource = function (query, callback) {
        let result = [];
        // Creating a new dataSource according to the new input
        for (let d = 0; d < data.length; d++) {
            if (data[d].name.toLowerCase().indexOf(query.toLowerCase()) > -1) {
                result.push(data[d]);
            }
        }
        //The Ajax request goes here
       let xhttp = new XMLHttpRequest();
       xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
             // Call the callback function here with the new result
             callback(result);
           }
       };
       xhttp.open("GET", "filename", true);
       xhttp.send();
    }
}

[admin]

Is there anything that needs to be down to initiate the data binding? Below is my code and it does not appear to be working (none of the console.log messages are being shown)

groupDropDown.dataSource = function (query, callback) {
console.log(‘here’);
//The Ajax request goes here
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
console.log(‘here2’);
if (this.readyState == 4 && this.status == 200) {
console.log(result);
callback(result);
}
};
xhttp.open(“GET”, “/Ajax/Ajax_group.aspx/GetDeviceGroupsForSmartDropDown”, true);
xhttp.send();
}

 

[Hristofor]

Hi ctstrist,
if the dataSource is set to a callback function it will be used only by the filtering logic which will call the callback when the value of filter input inside the drop down is changed to a new value (by default is empty). If not the dataSource function is never called. The ‘query’ argument represents the current filtering query that can be used to filter the dataSource to return a custom list of data. The ‘callback’ argument represents the function that handles the new data and populates the drop down.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts