1

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

apelidoko
  • 782
  • 1
  • 7
  • 23

2 Answers2

1

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;
}();
apelidoko
  • 782
  • 1
  • 7
  • 23
0

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

Vladimir Georgiev
  • 1,949
  • 23
  • 26