Search code examples
javascriptangularjsjqxgridjqwidget

Render AngularJS directive within jqxGrid


Using jqxGrid to make a table with data (obviously).

I've got my angular directive element loaded in the jqxGrid, data updates the grid fine, but it just stays there, unrendered and I can't figure out how to trigger the rendering.

Here are my jqx settings:

   AppvisAgentsCtrl.settings = {
        autowidth: true,
        ...
        columns: [

            { text: 'A', cellsrenderer: insertActionMenu, width: 50 },
           ...
        ]
    }

Where insertActionMenu is simply this right now:

function insertActionMenu(){

    var output = [
        '<actionmenu></actionmenu>'
        ].join('');

    return output;
}

My problem is that in the DOM inspector, I'll just see <actionmenu></actionmenu> sitting there on the page in every column and I want to tell it to render into the directive it's supposed to be.

Yes, the actionmenu directive works I use it several other times throughout the application.

EDIT

Everything is inside jqx-grid directive:

<jqx-grid 
    jqx-settings="appvisagents.settings" 
    jqx-source="appvisagents.testData.things">
</jqx-grid>

Solution

  • Assuming this is happening inside a directive, you'll need to compile '<actionmenu></actionmenu>' before adding it. see $compile service here