Loading jsGrid Async using jQuery promise from SOAP service using XmlHttpRequest

This code snippet shows how to use jQuery promise to load async data in jsGrid from a SOAP service using XmlHttpRequest.


function getDataPromise(pageIndex, pageSize) {

    // create a new jQuery Deferred object
    var deferred = $.Deffered();

    var xmlhttp = new XMLHttpRequest();

    var serviceUrl = "http://myserver/mySOAPservice";

    xmlhttp.open('POST', serviceUrl, true);
    xmlhttp.setRequestHeader('Content-Type', 'text/xml');
    xml.timeout = 30000;

    var xmlRequest = "some xml";

    xml.send(xmlRequest);

    // callback for timeout calling the service
    xmlhttp.ontimeout = function() { 
        // timeout 
    };

    // callback for xml response
    xmlhttp.onload = function() {
        if(xmlhttp.readyState == 4) {
            if(xmlhttp.status == 200) {

                var xmlResponse = xmlhttp.responseXML.documentElement;

                var myDataRecord = new Array();
                
                // traverse SOAP response and create array for jsGrid
                // myDataRecord.push( {....} );

                // ok we have the data, now resolve so the grid will load the data
                deferred.resolve({
                    data: myDataRecord,
                    itemCount: myDataRecordCount
                });

            }
        }
    };

    // promise for jsGrid to use, waiting for it to be resolved.
    return deferred.promise();
}

$("#jsGrid").jsGrid({
    height: "80%",
    width: "100%",
 
    autoload: true,
    paging: true,
    pageLoading: true,
    pageSize: 15,
    pageIndex: 2,
 
    controller: {
        loadData: function(filter) {
            // call a custom method which will return a jQuery promise 
            // which jsGrid will hold on to and wait for it to resolve
            return getDataPromise(filter.pageIndex, filter.pageSize);
        }
    },

    fields: [
        { name: "Name", type: "text", width: 150 },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
        { name: "Married", type: "checkbox", title: "Is Married" }
    ]
});

jsGrid Dynamics CRM Asynchronous Async XmlHttpRequest jQuery promise SOAP service