Render AngularJS directive within jqxGrid

Question

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>

score 1 · Accepted Answer · answered Nov 09 '14 at 21:41

1

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

answered Nov 09 '14 at 21:41

Sebastian Piu

7,838
1
32
50

You mean in the compile function of the directive or in insertActionMenu()? – Thierry Blais Nov 09 '14 at 21:49
the $compile service can only be used inside a directive, and you need to compile adding the actionMenu directive inside the function, so that angular knows it needs to replace that with the real directive dom. I realise that code is probably not in a jqxgrid directive in your case so I´m not sure if you can do it. Maybe trying this: http://stackoverflow.com/questions/22370390/how-can-we-use-compile-outside-a-directive-in-angularjs – Sebastian Piu Nov 09 '14 at 21:53

score 1 · Answer 2 · answered Nov 10 '14 at 16:01

Ok so the only way I found this to work is to use the 'rendered' event in settings and $compile my actionmenus one by one.

Unfortunately, I could not $compile it before injecting it as jqx-gid will only inject text and HTML and any attempt to append an object results in [Object object] being appended.

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

            { text: 'A', cellsrenderer: insertActionMenu, width: 50 },
           ...
        ],
        rendered: function(){ 
            $element.find('actionmenu').each(function(i,e){
                $compile(e)($scope);
            });
        }
    }

For me this is not a good solution for the following reasons:

Despite having the jqwidgets imposed for this task, I wanted to avoid using jQuery as much as possible
I don't know how this will affect performance over thousands of rows
I still need to tinker to bind this directive to the data model corresponding to the row

However I did get it to render.

Did you find a better solution yet? – badera Feb 04 '16 at 13:13 — badera, Feb 04 '16 at 13:13

Render AngularJS directive within jqxGrid

2 Answers2