title: Kendo UI, Bound a Piechart to hierarchical remote data
body: <p>I have dropdown list from sorting grid. I want to manage same grid with pie chart, but I can't bound remote data to the piechart. The piechart must to show categories (the same role, like a dropdown list), but I can't bound to hierarchical remote data.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles/kendo.common.min.css" /&gt;
      &lt;link rel="stylesheet" href="styles/kendo.default.min.css" /&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="project"&gt;
      &lt;div id="grid"&gt;&lt;/div&gt;
      &lt;div id="chart"&gt;&lt;/div&gt;
      &lt;script type="text/x-kendo-template" id="template"&gt;
          &lt;div class="toolbar"&gt;
              &lt;label class="category-label" for="category"&gt;Show products by category:&lt;/label&gt;
              &lt;input type="search" id="category" style="width: 150px"/&gt;
           &lt;/div&gt;
      &lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function() {
              //Grid displays all products or products from one category, which set from dropdown list
              var grid = $("#grid").kendoGrid({
                  dataSource: {
                      type: "odata",
                      transport: {
                          read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                      },
                      pageSize: 20,
                      serverPaging: true,
                      serverSorting: true,
                      serverFiltering: true
                  },
                  toolbar: kendo.template($("#template").html()),
                  height: 550,
                  sortable: true,
                  pageable: true,
  
                  dataBound:function(){
                      var grid = this;
                      $.each(grid.tbody.find('tr'),function(){
                          var model = grid.dataItem(this);
                          if(model.Discontinued==true){
                              $('[data-uid='+model.uid+']').addClass('k-state-selected');
                          }                          
                      });
                  },
  
                  columns: [
                     // { field: "ProductID", title: "Product ID", width: 100 },
                      { field: "ProductName", title: "Product Name", template: '#=kendo.format(ProductName.toUpperCase())#' },
                      { field: "UnitPrice", title: "Price", width: 150, template: 'EUR #: kendo.format("{0:c}", UnitPrice)#' },
                      { field: "UnitsInStock", title: "In Stock", width: 150 },
                      { field: "Discontinued", title: "Discontinued", width:50 },
                      { field: "QuantityPerUnit", title: "Quantity" }
                  ]
              });
              //DropDown list for sorting by the category
              var dropDown = grid.find("#category").kendoDropDownList({
                  dataTextField: "CategoryName",
                  dataValueField: "CategoryID",
                  autoBind: false,
                  optionLabel: "All",
                  dataSource: {
                      type: "odata",
                      severFiltering: true,
                      transport: {
                          read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                      }
                  },
                  change: function() {
                      var value = this.value();
                      if (value) {
                          grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
                      } else {
                          grid.data("kendoGrid").dataSource.filter({});
                      }
                  }
              });
  
              var data = [
                  {
                    "source": "Hydro",
                    "percentage": 20,
                  },
                  {
                    "source": "Hydro",
                    "percentage": 20
                  },
                  {
                    "source": "Solar",
                    "percentage": 10
                  },
                  {
                    "source": "Nuclear",
                    "percentage": 30            
                  }
              ];
  
              var dataSource = new kendo.data.DataSource({
                 data: data,
                  group: {field: "source", aggregates: [{
                   field: "percentage", aggregate: "sum"
                 }]}
              });
              dataSource.read();
  
              function getChartData() {
                  var chartData = [];
                  var view = dataSource.view();
                  for(var idx = 0; idx &lt; view.length; idx++) {
                      chartData.push({
                      source: view[idx].value,
                      percentage: view[idx].aggregates.percentage.sum
                      });
                  }
                  return chartData;
                } 
              //From This piechart I want to sorting grid
              var chart = $("#chart").kendoChart({
                  title: {
                    text: "Categories and Products"
                  },
                  legend: {
                    position: "bottom"
                  },
  
                  dataSource: {
                      transport: {
                          read: function(e) {
                            e.success(getChartData());
                          }
                      }
                  },
                  series: [{
                      type: "pie",
                      field: "percentage",
                      categoryField: "source",
                      explodeField: "explode",
                      aggregate: "count",
                      labels: {
                          visible: true,
                          background: "transparent",
                          template: "#= category #: \n #= value#%"
                      }
                  }],
  
                  seriesClick: function(e){
                      $.each(e.sender.dataSource.view(), function() {
                          // Clean up exploded state
                          this.explode = false;
                      });
  
                      // Disable animations
                      e.sender.options.transitions = false;
  
                      // Explode the current slice
                      e.dataItem.explode = true;
                      e.sender.refresh();
                  }
              });
          });
      &lt;/script&gt;
      &lt;style&gt;
          #grid .k-grid-toolbar
          {
              padding: .6em 1.3em;
          }
          .category-label
          {
              vertical-align: middle;
              padding-right: .5em;
          }
          #category
          {
              vertical-align: middle;
          }
          .toolbar {
              float: center;
          }
      &lt;/style&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>