Wait until function is complete while Table is generating

I made a Table with Ajax and setting the columns like this:

var table = $('#customerTable').DataTable({
        "ajax": {
            "url": "api.php?getUsers&type=customers",
            "type": "GET",
            "dataSrc": ""
        },
        "columns": [
            { "data" : "id" },  // Get User ID
            { "data" : "email" },   // Get User Email
            {
                // Convert Usergroup
                "data" : "usergroup",
                render: function(data){
                    ConvertUserGroup(data).done(function(){
                    });

                }
            },

In my DataBase, usergroup is the id of a group which is in another Mysql table (for example -> 1, 2 or 3).

So I want to convert these numbers into a Bootstrap Badge, thats why i do this line:

ConvertUserGroup(data).done(function(){
});

And the function contains this:

// Convert Account Status
function ConvertUserGroup(usergroupID) {
    $.ajax({
        url: "api.php?getGroups&single="+usergroupID,
        type: "GET",
        dataType: "json",
        success: function(data){
            var returnString = '<span class="badge badge-'+data.groupcolor+'">'+data.groupname+'</span>';
            console.log(returnString);
            return returnString;
        }
    });
}

But this isn't working because i can't use two Ajax methods at once. I can't find a callback for render.

So my Question is, how can i tell to ajax in DataTables (while the columns are creating) that it has to wait until ConvertUserGroup() is finished?