kendo-ui - 带有 Auth Header 的 Kendo 网格的 Kendo Vue 数据源

标签 kendo-ui vue.js kendo-grid kendo-datasource

我正在尝试在 Vue.js 中为 Kendo 网格创建数据源。我需要放置 auth header ,因此模板中的声明性语法无法解决我的问题。

下面的链接使数组成为可能,但我需要一个带有 AJAX 调用或 promise 的示例(Axios 将是完美的)。

Kendo UI Grid Data variable Vue.js

最佳答案

今天 Telerik 支持人员给出了一个更清晰的答案。它让世界变得更美好:)

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-vue-ui/wrappers/dropdownlist/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.1018/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1018/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" class="demo-section k-content">
        <h4>Find a product</h4>

        <kendo-datasource ref="datasource"
                          :type="'odata'"
                          :server-filtering="true"
                          :transport-read="{ url:  'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products', beforeSend: onBeforeSend }">
        </kendo-datasource>

        <kendo-dropdownlist ref="dropdownlist"
                            :data-text-field="'ProductName'"
                            :filter="'contains'"
                            :auto-bind="true"
                            :data-source-ref="'datasource'">
        </kendo-dropdownlist>
    </div>
</div>
<style>
    .demo-section .k-dropdown {
        width: 100%;
    }
</style>
<script>
    new Vue({ 
      el: '#app',
      methods: {
        onBeforeSend: function(xhr) {
          var token = "asd81237hdbsjkfh234uygr38fg73";

            xhr.setRequestHeader('Authorization', 'Bearer ' + token)
        }
      }
    })
</script>

</body>
</html>

关于kendo-ui - 带有 Auth Header 的 Kendo 网格的 Kendo Vue 数据源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47773839/

相关文章:

html - 如何设置 Kendo DatePicker 控件的样式使其看起来像常规文本框?

javascript - Kendoui 甘特图删除任务弹出窗口

javascript - Kendo Grid - 动态列和自定义模板

kendo-ui - Kendo Ui Grid - dataItem.set() 方法无法正常工作

html - Kendo 表中的 Bootstrap 下拉列表?

javascript - 用于在 IE 8 和 IE 9 中支持 CORS 的 Kendo UI 数据源自定义传输

kendo-ui - 使用网络 ListView 实现无限滚动

javascript - 合并从 API vue.js 获取的数据时出现问题

docker - 开发和生产中的 Vue 子域

vue.js - vuetify 在运行时更改 flex 大小