JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums DropDownList Drop Down List With On Demand Ajax Calls

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #100529
    admin
    Keymaster

    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

    #100532
    Hristofor
    Member

    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();
        }
    }
    
    #100533
    admin
    Keymaster

    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();
    }

     

    #100534
    Hristofor
    Member

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.