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>

Sebastian Piu · Accepted Answer · 2014-11-09 21:41:40Z

1

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

answered Nov 9, 2014 at 21:41

Sebastian Piu

8,0581 gold badge35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thierry Blais Over a year ago

You mean in the compile function of the directive or in insertActionMenu()?

Sebastian Piu Over a year ago

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: stackoverflow.com/questions/22370390/…

Thierry Blais · Accepted Answer · 2014-11-10 16:01:34Z

1

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.

answered Nov 10, 2014 at 16:01

Thierry Blais

2,85825 silver badges41 bronze badges

1 Comment

badera Over a year ago

Did you find a better solution yet?

Collectives™ on Stack Overflow

Render AngularJS directive within jqxGrid

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related