After adding Arc Gauges in ListView, how can i update their Value property?

[Joel]

I am building a dashboard application where the Arc Gauge's value will be updated periodically.

Multiple Arc Gauges are added as item in ListView.

While CenterTemplate can be bound to a model (see OEE property in OEEDataModel), it appears that i can't do the same for Arc Gauge's Value property. 

How can i update each Arc Gauge's Value property in the ListView when the OEE value changes?

index.cshtml

 

@{

    ViewData["Title"] = "Dashboard";

}

@model VelaMfgDashboard.Models.Dashboard.DashboardModel;

 

<div class="dashboard-section k-content wide">

    <h1>Dashboard: @Model.ProductionLine</h1>

    <div class="dashboard-table">

        <h2 class="title">OEE</h2>

        <div class="data">

            @(Html.Kendo().ListView(Model.OEEDatas) 

                .Name("oeeListView")

                .TagName("div")

                .ClientTemplateId("oee-template")

                .DataSource(dataSource => dataSource

                .Ajax()

                .PageSize(5)

                .ServerOperation(false) // all data will be requested at once and data operations will be applied client-side

                .Read(read => read.Action("OEEDatas_Read", "Dashboard")))

                .Pageable(pageable => pageable

                .Refresh(true)

                .ButtonCount(5)

                .PageSizes(new[] { 5, 15, 30 })

                )

            )

        </div>

    </div>

</div>

 

<script type="text/x-kendo-tmpl" id="oee-template">

    <div class="oee-container" k-widget>

        <dl>

            <dt>Machine #:MachineNo#</dt>

            <dd>

                @(Html.Kendo().ArcGauge()

                            .Name("oeeGauge")

                            .Value(80)

                            .Scale(x => x.Min(0).Max(100))

                            .CenterTemplate("#:OEE#%")

                            .ToClientTemplate()

                )

            </dd>

        </dl>

    </div>

</script>

public class DashboardModel
{
    public string ProductionLine { get; set; }

    public List<OEEDataModel> OEEDatas { get; set; }

    public DashboardModel()
    {
        OEEDatas = new List<OEEDataModel>();
    }
}

public class OEEDataModel
{
    public double OEE { get; set; }
    public int MachineNo { get; set; }
}

[Georgi]

Hi Joel,

A possible solution would be to switch to jQuery initialization for the gauge.

e.g.

<script type="text/x-kendo-tmpl" id="oee-template">
    <div class="oee-container" k-widget>
        <dl>
            <dt>Machine #:MachineNo#</dt>
            <dd>
    <div id="oeeGauge#=MachineNo#"></div><script>
    $(function(){jQuery("\#oeeGauge#=MachineNo#").kendoRadialGauge({"scale":{"max":100, "min":0, centerTemplate:'#=OEE#'},"pointer":{"value":#=OEE#}});});
  <\/script>
            </dd>
        </dl>
    </div>
</script>

Below you will find a small sample which demonstrates the above approach:

• https://dojo.telerik.com/iCirEfiX

Regards,
Georgi
Progress Telerik

[Joel]

Hi Georgi,

  I will try to go along with the example given.

  I am using ArcGauge. Does "pointer":{"value":#=OEE#} applicable to ArcGauge?

[Georgi]

Hello Joel,

For the ArcGauge you pass the value as a property of the options object.

e.g.

<script type="text/x-kendo-tmpl" id="oee-template">
    <div class="oee-container" k-widget>
        <dl>
            <dt>Machine #:MachineNo#</dt>
            <dd>
    <div id="oeeGauge#=MachineNo#"></div><script>
    $(function(){jQuery("\#oeeGauge#=MachineNo#").kendoArcGauge({"scale":{"max":100, "min":0}, centerTemplate:'#=OEE#', "value":#=OEE#});});
  <\/script>
            </dd>
        </dl>
    </div>
</script>

Below you will find a modified version of the sample:

• https://dojo.telerik.com/iCirEfiX/2

Regards,
Georgi
Progress Telerik

[Joel]

Hi Georgi,

  That will work for now.

   Thanks.