Problem adding Arc Gauge as listview item

[Joel]

I have tried to add Arc Gauge in the listview item.

Even through i have created 10 items, only one Arc Gauge will be displayed in each page.

OEE value starts from 60% & increases by 1 for each item. You can see that in the screenshots, in page 1, only one arc gauge with 64% is displayed. The arc gauge with value 60% ~ 63% are missing.

In page 2, only one arc gauge with 69% is displayed. The arc gauge with value 65% ~ 68% are missing.

Can you let me know know how to add Arc Gauge correctly in ListView?

@{

    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)

                            .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(60)

                    .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 DashboardController : Controller
{
    public IActionResult Index(string productionLine)
    {
        return View(new DashboardModel() { ProductionLine = productionLine });
    }

    public ActionResult OEEDatas_Read([DataSourceRequest] DataSourceRequest request)
    {
        DashboardModel model = new DashboardModel();
        for (int i = 0; i < 10; i++)
        {
            model.OEEDatas.Add(new OEEDataModel() { MachineNo = i + 1, OEE = 60 + i });
        }
        var dsResult = model.OEEDatas.ToDataSourceResult(request);
        return Json(dsResult);
    }

    public string ProductionLine { get; private set; }
}

[Joel]

Hi,

  I would like to have a follow up on my question.

  Thanks.

[Georgi]

Hello Joel,

The gauges are not rendered since their names are not unique, thus the ids of the rendered html elements are the same. You could include the MachineNo field to the name as it is unique and the gauges should render as expected.

e.g.

<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#=MachineNo#")
                    .Value(60)
                    .Scale(x => x.Min(0).Max(100))
                    .CenterTemplate("#:OEE#%")
                    .ToClientTemplate()
                )
            </dd>
        </dl>
    </div>
</script>

Regards,
Georgi
Progress Telerik

[Joel]

Hi Georgi,

   Thanks. It works!