通過以下事件將兩個小部件綁定在Kendo UI中：

Question

我想將圖表小部件綁定到多選小部件的select事件。如果在多選時激發選擇，則比圖表利用多選中的數據源（最終也根據選擇過濾數據）。我有multiselect工作，但我無法連接事件來更新圖表。

我的空圖表初始化：

<script> 
    $("#chart").kendoChart({ 
     seriesDefaults: { type: "bar" }, 
    }); 
</script> 

我多選：

<input type="text" id="treePicker" /> 
<p>Pick the type of the tree: </p> 

<script type="text/javascript"> 
    var treeDataSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "/Forest/ForestData", 
       dataType: "json" 
      } 
     }, 
    }); 

    var chart = $("#chart"); 

    $("#treePicker").kendoMultiSelect({ 
     dataSource: treeDataSource, 
     dataTextField: "Type", 
     select: function (e) { 
      chart.dataSource = this.dataSource; 
     } 
    }); 
</script> 

我的模型/控制器

public class Tree 
    { 
     public string Type { get; set; } 
     public int Size { get; set; } 
    } 

public class ForestController : Controller 
    { 
     public ActionResult ForestData() 
     { 
      List<Tree> forest = new List<Tree>(); 
      forest.Add(new Tree { Type = "Pine", Size = 4 }); 
      forest.Add(new Tree { Type = "Oak", Size = 10 }); 
      forest.Add(new Tree { Type = "Apple", Size = 5 }); 
      return Json(forest, JsonRequestBehavior.AllowGet); 
     } 

    public ActionResult Forest() 
    { 
     return View(); 
    } 

Answer 1

它的工作原理。我修改圖表：

 $("#chart").kendoChart({ 
      title: {text: 'Tree sizes in meters in our forest'}, 
      categoryAxis: { field: "Type" }, 
      series: [{ field: "Size" }] 
     }); 

和部分多選的：

$("#treePicker").kendoMultiSelect({ 
       dataSource: treeDataSource, 
       dataTextField: "Type", 
       select: function (e) { 
        var selectedItem = this.dataSource.view()[$(e.item).index()].Type; 
        var chart = $("#chart").data("kendoChart"); 
        var ds = this.dataSource; 
        ds.filter([ 
           { 
            field: "Type", 
            operator: "eq", 
            value: selectedItem 
         }]); 
        chart.dataSource = ds; 
        chart.refresh(); 
        ds.filter({}); 
      } 
     });