How do I execute code after koGrid completely renders?

I am working with kogrid. I want to apply a tooltip to every cell in a specific column, based on the data in that column. My problem is finding exactly when/where to place my tooltip jquery:

$('[data-toggle="tooltip"]').tooltip();

The colDef that I am using is:

var myCol = {
    headerClass: 'koGridCentered',
    displayName: 'My Display',
    field: 'RootError',
    cellTemplate: '<div style="margin-top: 3px;" >' +
        '<div data-bind=" attr: { \'class\': \'kgCellText colt\' + $index() }">' +
            '<a href="#" data-toggle="tooltip" data-bind=" attr: { \'title\': $data.getProperty($parent) }, html: $data.getProperty($parent)"></a>' +
        '</div>' +
    '</div>',
    sortable: true, resizeable: true
}

The data is returned from an ajax request. I have tried placing the jquery into an axaxStop block:

$(document).ajaxStop(function() {
    $('[data-toggle="tooltip"]').tooltip();
}

But this is called prior to kogrid rendering all of it's rows.

I have resorted to using setTimeout and simply delaying for X milliseconds and then applying the tooltip, and this works, but it feels like a hack.

$(document).ajaxStop(function() {
    setTimeout(function() {
        $('[data-toggle="tooltip"]').tooltip();
    }, 10);
});

I have also tried calling the tooltip after pushing my data into my viewmodel.

for (var i = 1; i < data.length; ++i) {
    _this.SharedViewModel.MyCollection.push(ko.mapping.fromJS(data[i]));
}
$('[data-toggle="tooltip"]').tooltip();

This ends up applying the tooltip to the first approx 7 rows and not to the remaining rows.

What I am really looking for is a way to access some kogrid event that fires when the grid has completely rendered. I have searched for this and haven't come up with anything, so I'm asking the community.

There is one other minor issue I noticed, which is that my tooltip is hidden under the kogrid cell above it. But this is minor and I'm hoping to solve with a z-index.

Solution

In Knockout, you should only interact with View elements via binding handlers. Knockout-Bootstrap provides many binding handlers for Bootstrap widgets.