Questions on Kendo UI for Angular Forum

0 answers

74 views

Kendo Arc Gauge chart for Angular - Middle template is rendering first and then chart - resulting in middle template starting at somewhere and then repositioning after chart rendered

Programatically Can we delay loading of Center template? if so how?

Gauges

updated question on 08 Sep 2022

0 answers

97 views

Gauges not visible

Dear Supporter,

i tried to use the

@progress/kendo-angular-gauges@4.1.0

in combination with the bootrap theme version

@progress/kendo-theme-bootstrap: 4.36.0

According to your documents, the GaugesModule supportes the theming versions >4.19.

Unfortunately the gauge don´t get colorized, so that it is invisible.
I prepared a StackBlitz demo where you can check its behaviour (stackblitz demo ).

If i use the css stylesheet link in the index.html

 <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@4.36.0/dist/all.css"/>

the gauges are visible.

If i use all.scss

@import "~@progress/kendo-theme-bootstrap/scss/all.scss";

in the styles.scss instead of the link, the gauges dissapear.

I am looking forward to get the gauges working with the theme version 4.36.0 and the .scss stylesheets.

Thank you in advance.
best regards

Gauges

updated question on 15 Mar 2022

1 answer

190 views

radialgauge custom labels

this is my custom implementation of the labels:

<kendo-radialgauge-scale-labels

//what is the syntax to call my function ???
content="getGaugeLabels(val)"

position="outside">
</kendo-radialgauge-scale-labels>

how can I set custom labels ??

in the api documentation =>

content?
(e: any) => string
The function which returns the label content.
The available fields in the function argument are:
value—The value of the label.

how can I use that in angular 9 ????

Gauges

answered on 19 Mar 2021

1 answer

116 views

Custom Needles

We need a way to use an SVG or PNG graphic as a display needle. Is this currently possible? If yes how? If not, there will be functionality in the future.

Gauges

answered on 11 Jun 2020

1 answer

177 views

How to dynamically update linear gauge value

I have a linear gauge

<div style="width:100%;">

<kendo-lineargauge #myGauge="kendoLinearGauge" style="width:100%" [scale]="{ vertical: false,max: 100 }" [pointer]="{ value: progressValue }">

</kendo-lineargauge>

</div>

I update it from signal r.

this._connection.on('taskProgressChanged', data => {

console.log(data);

this.progressValue = Number(data);

this.myGauge.resize();

var myPointer : any = this.myGauge.pointer;

myPointer.value = data;

this.messages.push(data);

});

In a component that has these configurations

public progressValue = 0;

@ViewChild(LinearGaugeComponent, { static: false })

public myGauge: LinearGaugeComponent;

However,
1. the gauge does not update with the value dynamically unless, I click on the gauge. How do I update the gauge dynamically?
2. the gauge does not resize to 100% of the width until the resize method is called. How do I default the width of the gauge to 100%?

Gauges

answered on 27 Aug 2019