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

Rendering template which includes angularjs ng-bind

1 Answer 223 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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Rendering template which includes angularjs ng-bind

1 Answer, 1 is accepted