Angular scope variables within k-data-source

[Rajesh]

I am trying to create a simple donut chart using Kendo UI data wiz widgets. How can I use an angular scope variable within such a widget ?

 <div kendo-chart
                     k-legend="{ position: 'top' }"
                     k-series-defaults="{ type: 'donut', startAngle: 270, holeSize: 80 }"
                     k-chart-area="{ background: '', height:220 }"
                     k-series="[{
                            field: 'share',
                            categoryField: 'resolution',
                            visibleInLegendField: 'visibleInLegend',
                            padding: 10
                          }]"
                     k-data-source="[
                        {
                            share: {{myMetadata.runningPercentage}},
                            visibleInLegend: false,
                            color: '#65c178'
                        },
                        {
                            share: 100 - {{myMetadata.runningPercentage}},
                            visibleInLegend: false,
                            color: '#e2e2e2'
                        }
                     ]"
                     k-series-hover="onSeriesHover"
              >

[Mihai]

Hi Rajesh,

The k-* attributes are evaluated in the current $scope, so you don't need to include the {{angular}} brackets in order to access scope data.  You can simply say:

k-data-source="[
                        {
                            share: myMetadata.runningPercentage,
                            visibleInLegend: false,
                            color: '#65c178'
                        },

although my recommendation is to move the whole definition in the scope, like this:

    k-data-source="myDataSource"

and in your controller:

    $scope.myDataSource = [ { share: $scope.myMetadata.runningPercentage ... ]

Also, note that for event handlers declared as attributes you should prefix with "k-on-", for example k-on-series-hover="onSeriesHover($kendoEvent)".

Regards,
Mihai
Telerik

 

 

[Rajesh]

Thanks very much Mihai for the quick response.

Is there any reason you recommend that all of the k-options are moved to the controller. To me all k options belong only in the view and hence in the html, while the controller must ideally only have the business logic to populate the right scope variables.

The controller should not have to change if I decide to use a input instead of a kendo input. What do you feel ?

[Mihai]

Hi Rajesh,

Feel free to keep options in the markup if you so wish.  It's just a matter of preference in the end; to me it feels cleaner to keep complex options (i.e. JSON objects) in JavaScript, rather than in HTML.

Regards,
Mihai
Telerik