This is a migrated thread and some comments may be shown as answers.

Rendering template which includes angularjs ng-bind

1 Answer 319 Views

Templates

This is a migrated thread and some comments may be shown as answers.

Vedad asked on 15 Jan 2021, 06:41 PM

Hi,

I am trying to implement simpler version of tilelayout demo (small dashboard) in quite old angularjs application.

Following examples in demo I wanted to replace simple hardcoded value of conversion-rate (9%) with data from my service.

Html is correctly rendered but not updated when vm.myRisk changed..

Here are relevant pieces of code that I have:

Controller:

... controller declaration etc..

var vm = this;

vm.myRisk = 0;

getRiskData(); //Function calls server and retrieves simple int value and sets vm.myRisk to this value

var riskTemplateString = '<h3><label><span ng-bind="vm.myRisk"></span> % </label></h3> <div> ' + localeService.tr("risk") + '</div>';

var riskTemplate = kendo.template(riskTemplateString);

$("#tilelayout").kendoTileLayout({

containers: [{

colSpan: 1,

rowSpan: 1,

header: {

text: "my risk"

},

bodyTemplate: kendo.template(riskTemplate)

}],

columns: 6,

columnsWidth: 300,

rowsHeight: 235,

reorderable: true,

resizable: true,

resize: function (e) {

var rowSpan = e.container.css("grid-column-end");

var chart = e.container.find(".k-chart").data("kendoChart");

// hide chart labels when the space is limited

if (rowSpan === "span 1" && chart) {

chart.options.categoryAxis.labels.visible = false;

chart.redraw();

}

// show chart labels when the space is enough

if (rowSpan !== "span 1" && chart) {

chart.options.categoryAxis.labels.visible = true;

chart.redraw();

}

// for widgets that do not auto resize

// https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages

kendo.resize(e.container, true);

}

});

my html is very simple and has only placeholder for the widget and controller declared using standard controller As syntax..

<body>

<div ng-controller="myDashboardController as mdc" class="c-module">

<div class="c-module-content">

<div id="example">

<div id="tilelayout"></div>

<!-- <script id="conversion-rate" type="text/x-kendo-template">

<h3>9%</h3>

<div>Visitor to Customer</div>

</script> -->

</div>

<style>

.k-card-header {

flex: 0 0 auto;

}

.k-card-body {

overflow: hidden;

}

</style>

</div>

</body>

Thanks

1 Answer, 1 is accepted

answered on 19 Jan 2021, 12:46 PM

Hi Vedad,

The code seems correct and I am not able to determine what is causing the described behavior. Could you please send us a small dojo sample in which this problem can be replicated? Once we can replicate it we should be able to quickly find what is causing it.

Regards,
Angel Petrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.