Kendo Vue datasource for Kendo grid with Auth Header

1
votes

I am trying to create a datasource for a Kendo Grid in Vue.js. I need to put auth headers so declarative syntax in the template does not fix my problem.

The link below makes it possible for an array, but I need an example with an AJAX call or a promise (an Axios one would be perfect).

Kendo UI Grid Data variable Vue.js

3
kendo-uivue.jskendo-gridkendo-datasource
The kendo wrapper for Vue are just wrappers. You should be able to declare your own read function with no problem – Marco
A code snippet would be very helpfull Marco. if you have the time – Hakan Altinok
Took me a while to figure out, but since this really is just based on the KendoUI and puts a wrapper around it, it wasn't to hard – Marco
Following on from @Marco's comments under an answer, it is worth noting this question is arguably off-topic even though you received answers on this occasion. It is a request for a code sample, and does not show any research effort, and there is a formal close reason for this case: Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. – halfer

3 Answers

3
votes

A much cleaner answer came from Telerik support today. It make the world a better place :)

<!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>
1
votes

A bit painful but I was able to do it with Marco's help

Here is the code

<template>
  <div>
    <kendo-datasource ref="datasource1"
                      :transport-read="readData"
                      :batch='true'
                      :page-size='20'>
    </kendo-datasource>
    <kendo-grid :height="550"
                :data-source-ref="'datasource1'"
                :pageable='true'>
    </kendo-grid>
  </div>
</template>

<script>
  export default {
    name: 'grid',
    computed: {
      token () {
        return this.$store.state.access_token
      }
    },
    methods: {
      readData: function (e) {
        console.log(this.token)
        var tkn= this.token
        $.ajax({
          url: 'http://127.0.0.1/AssetExtranet.WebAPI2/api/Vw_Hmn_Branch',
          beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Bearer ' + tkn)
          },
          dataType: 'json',
          success: function (data) {
            e.success(data)
          },
          type: 'GET'
        })
      }
    }
  }
</script>

Thank Marco and Vue is perfect and super fast. It is a joy to work with Vue after that Angular 2,3,4,5... mess.

1
votes

Ok, so the documentation is a bit flaky, but I managed to get a custom function going in Vue, just like in the plain Kendo UI datasource. Look at this demo for reference: http://dojo.telerik.com/uXELIh

This is a mix of declarative and custom methods, so it might look a bit odd. (I've never worked with the VUE wrapper before)

Instead of the transport-read-url="uri/to/somewhere" property just define a transport-read="readData" property.

<kendo-datasource ref="datasource1"
                    :transport-read="readData"
                    :schema-model-id="'ProductID'"
                    :schema-model-fields="schemaModelFields"
                    :batch='true'
                    :page-size='20'>
</kendo-datasource>

Then create the readData method:

new Vue({
    el: '#app',
    data: {
        schemaModelFields: {
          /*...*/
        }
    },
    methods:
        readData: function(e) {
            //this simply returns one Product with a name Chai as a dummy
            //set your Auth headers here, do the request and then pass
            //the data in the e.success method as a parameter
            e.success({ProductName: "Chai"})
        }
  }
/*...*/
});

That's all there is.

However If you have an Auth header, that you need to prepend to all your ajax requests, I'd suggest you use $.ajaxSetup() (How can I add a custom HTTP header to ajax request with js or jQuery?). This will save you the hassle of implementing this for read, update, create and delete, each and every time.

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});