How to dynamically update linear gauge value

2 posts, 0 answers
  1. John Bowyer
    John Bowyer avatar
    31 posts
    Member since:
    Jun 2019

    Posted 26 Aug 2019 Link to this post

    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%?

     

  2. John Bowyer
    John Bowyer avatar
    31 posts
    Member since:
    Jun 2019

    Posted 26 Aug 2019 in reply to John Bowyer Link to this post

    I was able to force it to refresh using ChangeDetectorRef approach found here https://stackoverflow.com/questions/35105374/how-to-force-a-components-re-rendering-in-angular-2.

     

Back to Top