Can I put a Linear Guage in a template?

[Brian]

I'm trying to use a linear guage in a template.  I have a series of records in my data source that contain a PercentFull and I want to use the Linear Guage to represent the percentage.  I'm trying to set a unique id in the template and use it after the data source gets loaded.  All the code "works" to the point of trying to create the guage.  But I just can't tell if the id is really getting set in the template and the selector is selecting it when I try to create it.  Can this be done?  Maybe I'm just doing it wrong?

    <script type="text/x-kendo-template" id="reportPackageCountTemplate">
        <a data-role="listview-link" href="\#listPackageCompanyView?id=#:PackageID#">
        Pkg #= PackageID #
        <br />
        <p id="pctFullGuage#:PackageID#" class"pctFullGuage">test:#= PackageID #</p>
    </script>

  var dsPackageData = new kendo.data.DataSource({
      schema: {
          model: PackageData
      },
      transport: packageDataTransport,
      sync: function (e) {
          window.app.navigate("#packageListView");
      },
      error: function (e) {
          alert("dsPackageData error: " + e.status + "errorThrown: " + e.errorThrown);
      },
      change: function (data) {
          InitPctFullGauge();
      }
  });

  function InitPctFullGauge() {
      var total = dsPackageData.total();
      if (total > 1) {
          var gaugeConfig = {
              pointer: {
                        value: 1
              },
              scale: {
                  min: 1,
                  max: 100,
                        vertical: false
              }
          }

          for (var i = 0; i < total; i++) {
              editPackageData = dsPackageData.at(i);
              gaugeConfig.pointer.value = editPackageData.PercentFull;
              $("#pctFullGuage" + editPackageData.PackageID).kendoLinearGauge(gaugeConfig);
          }
      }
  }

EDIT: After some further testing it seems one problem is that the change event is called and my function runs before the html is rendered with the list, so the id's are not there when the function executes.  I have examined the page source of the rendered list and the id's are there as I expect.  From that it seems I need a way/event to let me know when the listview has been rendered into html and then run my function to render the guages.  Is there anything like that?  Or do I just need to use a document ready function and look only for this one page?  Or some other way?  Thanks.

[Alexander Valchev]

Hi Brian,

If I understood correctly you would like to put the Linear Gauge widget inside a Mobile ListView template.
If that is the case, you should hook up to the dataBound event of the ListView which will fire after items are rendered. Here is an example:

$("#listview").kendoMobileListView({
    dataBound: function(e) {
        // handle event
    }
});

//To set after initialization
var listview = $("#listview").data("kendoMobileListView");
listview.bind("dataBound", function(e) {
    // handle event
});

I noticed that the event is missing from the documentation, but I will add in short terms.
Please accept my apology for the inconvenience caused.

Kind regards,
Alexander Valchev
the Telerik team

[Brian]

I have tried that and it does not work for me.  Your understanding of what I am trying to do is correct.  I am using version 2012.3.1315.  That event never fires in my code but the list does populate with my data.  In the code below I never get the test alert and it does not render the gauges, but the list does populate with the data.  It would be great if that event worked, as that is just what I need.  I have had to work around using a setTimeout loop of sorts looking for the listview items in the DOM and it's quite the hack, but I can't get anything else to work.  In the code below I have also tried without the RefreshPackageDataSource function and autoBind: true.  Even that does not get the dataBound event to fire.  Maybe this event does not work for mobile?  Or what else could I do to make it work?


function mobileReportPackageDataBind(e) {
   RefreshPackageDataSource();
   $("#reportPackageList").kendoMobileListView({  
     dataSource: dsPackageData,
     autoBind: false,
     dataBound: function(e) {
       alert("InitPercentFullGuages");
       InitPercentFullGuages(); 
     },
   template: kendo.template($('#reportPackageCountTemplate').html())
   });
}

[Alexander Valchev]

Hello Brian,

It seems that the problem is caused by a bug which is already fixed and the fix will be available in the next internal build. As a temporary workaround you may hook up to the event with the bind method.

list.bind("dataBound", function (e) {
    //init gauge
});

For convenience I prepared a small example: http://jsbin.com/atisuw/4/edit
I hope this will help. Please accept my apology for the inconvenience caused.

Kind regards,
Alexander Valchev
the Telerik team