CODEWITHSUNDEEP
ajaxdatagridshieldui
apelidoko
apelidoko

Reputation: 790

Loading AJAX Data on ShieldUI Data Grid

I just want to share how I was able to load the Data from AJAX Request into ShieldUI DataGrid, I didn't see any related post which has direct and clear answer so I thought maybe someone can use this as a guide.

$(document).ready(function(){

$("#shieldui-grid1").shieldGrid({
        dataSource: {
            data: gridData
        },
        selection: {
            type: "row",
            multiple: true,
            toggle: false
        },
        columns: [
            {   
                field: "product_name", width: "30%", title: "Product Name" 
            },
            {   
                field: "source_name", title: "Source Name", width: "30%" 
            }
        ]
    });
});

var gridData = function() {
    $.ajax({
        async: false,
        url: "/your-api-url",
        dataType: 'json',
        type: 'GET',
        success: function(data){
            console.log(data);
            gridData = data;
        }
    });
    return gridData;
}();

});

This will automatically pickup the data result from the Ajax request assigned into 'gridData' variable

Upvotes: 1

Views: 248

Answers (2)

Vladimir Georgiev
Vladimir Georgiev

Reputation: 1949

Shield UI Grid demos have examples of this - namely, how to connect to a RESTful and similar web services.

Upvotes: 0

apelidoko
apelidoko

Reputation: 790

I was able to pass the result into the gridData variable using this,

var gridData = function() {
    $.ajax({
        async: false,
        url: "/your-api-url",
        dataType: 'json',
        type: 'GET',
        success: function(data){
            console.log(data);
            gridData = data;
        }
    });
    return gridData;
}();

Upvotes: 1

Related Questions