Kendo UI Grid Data variable Vue.js

我们两清 提交于 2019-12-13 09:34:38


In the kendo UI it is possible to load the grid with data from a variable in the Vue.js?


Yes, instead of using a data-source-ref, you can bind to a data-source property. This can be an instance of an kendo DataSource or a simple array.

For example, here's the default demo, changed to bind to an array of objects.

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=""></script>
<!DOCTYPE html>

  <link rel="stylesheet" href="" />
  <link rel="stylesheet" href="" />
  <link rel="stylesheet" href="" />

  <script src=""></script>

  <script src=""></script>
  <script src=""></script>
  <script src=""></script>

  <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>



Yes, it is possible. In a grid action, try @Select and implement a function OnSelect (e). This is how you can get data from object e.