Kendo UI 网格数据变量 Vue.js

Question

在 kendo UI 中可以使用 Vue.js?

中变量的数据加载网格

Answer 1

是的，您可以绑定到数据源属性，而不是使用数据源引用。这可以是 kendo DataSource 或简单数组的实例。

例如，这里的 default demo，更改为绑定到一个对象数组。

var products = [{
    "ProductID": 1,
    "ProductName": "Chai",
    "UnitPrice": 18,
    "UnitsInStock": 39,
    "Discontinued": false
  },
  {
    "ProductID": 2,
    "ProductName": "Chang",
    "UnitPrice": 19,
    "UnitsInStock": 17,
    "Discontinued": false
  }, {
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "UnitPrice": 10,
    "UnitsInStock": 13,
    "Discontinued": false
  }
];
new Vue({
  el: '#app',
  data: {
    products: products
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />

  <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script src="https://unpkg.com/@progress/kendo-all-vue-wrapper/dist/cdn/kendo-all-vue-wrapper.min.js"></script>
</head>

<body>
  <div id="example">
    <div id="app">
      <kendo-grid :height="550" :data-source="products">
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" :width="120"></kendo-grid-column>
      </kendo-grid>
    </div>
  </div>
</body>

</html>

Answer 2

是的，这是可能的。在网格操作中，尝试 @Select 并实现函数 OnSelect (e)。这是从对象 e.

获取数据的方法

Kendo UI 网格数据变量 Vue.js

Kendo UI Grid Data variable Vue.js

kendo-ui

kendo-grid

vue.js

kendo-ui-vue