Kendo Vue datasource for Kendo grid with Auth Header

Question

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

Answer 1

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' }
});