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

[Bob]

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?

[T. Tsonev]

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