Can't get my ui-grid expandable to bind data

Question

I'm trying the expandable grid using angularjs ui-grid. But I can't get the databinding in the expandable ui-grid to work. Everything seems to be fine, I can expand rows and no errors is given but when I try to open a row theres no data there. When typing in data[i] in the console when debugging I get a json object but when typing in data[i].subGridOptions I get undefined. What have I missed?

Heres my code:

"head"- html

    <div class="col-md-12" style="padding-top:10px">
        <div ui-grid="log_grid"
             ui-grid-pagination
             ui-grid-exporter
             ui-grid-selection
             ui-grid-expandable
             ui-grid-pinning
             id="log_grid"
             style="height:620px;overflow:hidden">
        </div>
    </div>
</div>

subgrid.html

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>

code in controller trying to bind the data:

    var r = logging.get_log(url);
    r.promise.then(function () {

        $scope.config.logs = r.logs;
        var data = $scope.config.logs;

        if (data.length == 0) {
            $scope.popup("Too bad..", "No result were found.");
        }
        else {
            for (i = 0; i < data.length; i++) {
                data[i].subGridOptions = {
                    columnDefs: [{ name: "Logger", field: "logger" }],
                    data: data[i].logger
                }
            }
        }
        $scope.log_grid.data = $scope.config.logs;
    });
}

setting up gridoptions in the controller:

$scope.log_grid = {
    enableGridMenu: true,
    enableColumnResizing: true,
    enableRowSelection: true,
    multiSelect: false,
    enableRowHeaderSelection: false,
    paginationPageSizes: 18,
    paginationPageSize: 18,
    enableHorizontalScrollbar: 0,
    expandableRowTemplate: 'static/packages/logging/views/subgrid.html',
    expandableRowHeight: 150,
    expandableRowScope: {
        subGridVariable: 'subGridScopeVariable'
    },
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
        gridApi.selection.on.rowSelectionChanged($scope, function (row) {
        });
    },
    columnDefs: [
        {
            displayName: 'Logger',
            field: 'logger',
            width: '10%',
            enableCellEdit: false
        },
        {
            displayName: 'Node',
            field: 'node',
            width: '10%',
            enableCellEdit: false
        },
        {
            displayName: 'TimeStamp',
            field: 'timestamp',
            width: '15%',
            enableCellEdit: false
        },
        {
            displayName: 'Type',
            field: 'severity',
            width: '15%',
            enableCellEdit: false,
        },
        {
            displayName: 'Message',
            field: 'msg',
            width: '35%',
            enableCellEdit: false,
        },
        {
            displayName: 'Source',
            field: 'srcfile',
            visible: false,
            enableCellEdit: false,
        },
        {
            displayName: 'Line',
            field: 'lineno',
            visible: false,
            enableCellEdit: false,
        }
    ],

    data: null
};

Answer 1

我现在解决了，我没有意识到你绑定的数据是像这样的json中的json：https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json。

我完成的代码现在看起来像这样：

for (i = 0; i < data.length; i++) {
    data[i].subGridOptions = {
        columnDefs: [{ name: "Column", field: "Column" }],
        data: [
            { Column: "Source: " + data[i].srcfile },
            { Column: "Line: " + data[i].lineno }
        ]
    }
}