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

Rendering template which includes angularjs ng-bind

1 Answer 200 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Vedad
Top achievements
Rank 2
Bronze
Bronze
Veteran
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
                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>
 
                <!-- container text templates -->
<!-- THIS IS CONTAINER I WAS REPLACING -->
                <!-- <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>
    </div>
 
</body>

 

Thanks

1 Answer, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
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/.

Tags
Templates
Asked by
Vedad
Top achievements
Rank 2
Bronze
Bronze
Veteran
Answers by
Angel Petrov
Telerik team
Share this question
or