Kendo UI Grid Переменная данных Vue.js

В пользовательском интерфейсе кендо можно загружать сетку с данными из переменной в Vue.js?

Источник

2 ответа

Решение

Да, вместо использования data-source-ref вы можете привязать свойство источника данных. Это может быть экземпляр источника данных кендо или простой массив.

Например, вот демонстрационная версия по умолчанию, измененная для привязки к массиву объектов.

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>

Источник

Да, это возможно. В сетке, попробуйте @Select и реализовать функцию OnSelect (e), Вот как вы можете получить данные от объекта e,

Источник
Другие вопросы по тегам