use angularjs directive as tile template

0 Answers 89 Views
TileLayout
Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
Vedad asked on 11 May 2022, 02:55 PM

Hi,

I am trying to build a dashboard with the tile layout and beside standard kendo ui charts and grids, I would like to have a couple of tiles with pre-built angularjs directive components. 

How can I inject the angularjs component and make it bound to data in tilelayout controller?

Html renders from the template, but it is not reachable from the controller, as (I presume it is not bound directly).

Any help would be appreciated.

Thanks,

Vedad

Nikolay
Telerik team
commented on 16 May 2022, 12:43 PM

Hi Vedad,

Do you need to inject an angularjs component inside a tile bodyTemplate? Can you please share a sample Dojo of what you are trying to achieve?

Additionally, please note support for Kendo UI widgets for AngularJS will be discontinued in the near future.

Regards,

Nikolay

Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
commented on 16 May 2022, 03:13 PM

Hi Nikolay, 

thank you for your response. That was idea, to use some custom directives we already have, as tiles. 

Meanwhile I managed to solve this, by simply using $compile which was necessary to compile code for the directive.

Then I gave up on this idea, as I want to make it little bit more versatile.

Thanks for the reminder about AngularJS, though I hope it won't happen too soon.. :)

Here is piece of code if someone needs it for the future reference:

  var myDirectiveTemplateString = `<div id="my-directive"> <div data-my-directive></div></div>`;
  var myTemplate = kendo.template(myDirectiveTemplateString);
           
///rest of tileLayout omitted for brevity
 containers: [{
                        colSpan: 4,
                        rowSpan: 1,
                        header: {
                            text: "myDirectiveChart"
                        },
                        bodyTemplate: kendo.template(myTemplate)
                    }]

 var myDirective = $('#my-directive');
            if (myDirective.length > 0) {
                 $compile(myDirective[0])($scope);
                // Here you can do additional work if needed..
            }

All the best,

Vedad

Nikolay
Telerik team
commented on 19 May 2022, 01:11 PM

Hi Vedad,

Thank you for sharing what you have come up with. I believe it will be useful to others facing the same scenario.

Regards,

Nikolay

No answers yet. Maybe you can help?

Tags
TileLayout
Asked by
Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
Share this question
or