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

2 posts, 0 answers
  1. Bob
    Bob avatar
    4 posts
    Member since:
    Jul 2011

    Posted 25 Mar 2014 Link to this post

    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?
  2. T. Tsonev
    T. Tsonev avatar
    2834 posts

    Posted 27 Mar 2014 Link to this post


    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>

      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.

    T. Tsonev

    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.

Back to Top