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

Is it possible to have a radial gauge display in a grid column?

1 Answer 160 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 25 Mar 2014, 04:07 PM
I have a data with multiple customers, each customer has a "percent tank is full" data point. I would like to put this info in a grid and have the "percent tank full" displayed visually with the radial gauge rather than just a numeric value. How would I go about doing this?

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 27 Mar 2014, 09:05 AM
Hello,

My suggestion is to create a column template that will host the gauge:
  <script id="gaugeTemplate" type="x/kendo-template">
    <div class="gauge" style="height: 40px;"></div>
  </script>

...
  columns: [{ ... }, {
    title: "%",
    template: $("#gaugeTemplate").html(),
    width: "60px"
  }]

We can instantiate it during the dataBound event:
    function onDataBound(e) {
       var data = e.sender.dataSource.view();

       for (var i = 0; i < data.length; i++) {
           var dataItem = data[i];
           var tr = $("#grid").find("[data-uid='" + dataItem.uid + "']");
           
         $(".gauge", tr).kendoRadialGauge({
            pointer: {
              value: dataItem.percents
            },
            ...
          }
       }
    }

The Gauge indeed poses some challenges when it comes to sizing it down. I had to tweak quite a lot of options as you'll see in the live demo.

I hope this helps.

Regards,
T. Tsonev
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
Tags
Gauges
Asked by
Bob
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or