Dear All,

I'm trying to use Kendo Grid and DataSource Tranposrt as following:

<kendo-datasource ref="employeesData"
:transport-read-url="'http://api.example.com/api/users'"
:transport-read-type="'GET'"
:transport-read-data-type="'json'"
:transport-read-content-type="'application/json'"
:transport-update-url="'http://api.example.com/api/users'"
:transport-update-type="'PUT'"
:transport-update-content-type="'application/json'"
:transport-update-data-type="'json'"
:transport-destroy-url="'http://api.example.com/api/users'"
:transport-destroy-type="'DELETE'"
:transport-destroy-data-type="'json'"
:transport-create-url="'http://api.example.com/api/users'"
:transport-create-type="'POST'"
:transport-create-data-type="'json'"
:transport-parameter-map="parameterMap"
:schema-model-id="'id'"
:schema-model-fields="schemaModelFields"
:batch='true'
:page-size='15'>
</kendo-datasource>

 

When I try to update row by Edit, I receive the following message:

PUT http://api.example.com/api/users 405 (Method Not Allowed)

{message: "", exception: "Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException",…}

   exception: "Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException"

   file: "/var/www/api.leanapy.com/vendor/laravel/framework/src/Illuminate/Routing/RouteCollection.php"
   line: 255
   message: ""

The same for DELETE

My API works fine when I use Vue (bootstrap-vue) and Vuex.

Appreciate if you can advice the way to solve it.

Thanks

 

There is a an example of menu, but how can I add router-link to menu item?

 

<kendo-menu-item text="Baseball">
<kendo-menu-item text="Top News"></kendo-menu-item>
<kendo-menu-item text="Radio Records"></kendo-menu-item>
</kendo-menu-item>

 

Thank you in advance

I'm new in using Kendo UI Vue and right now I'm struggling to find example how I can use Grid Component with DataSource and where all CRUD is happening not directly with API via Transport-read ... etc, but via VUEX Store components where all logic for data handling is set. 

Appreciate if somebody can help.

Thank you very much in advance.

I'm attempting to set the label values for a kendo-switch component and the messages prop doesn't appear to function as demonstrated here: https://www.telerik.com/kendo-vue-ui/components/inputs/switch/labels/

Yet, the old on-label and off-label props appear to work (https://www.telerik.com/kendo-vue-ui/components/inputs/api/switch/Switch/). I think there is some disconnect with the version of the npm for @progress/kendo-inputs-vue-wrapper and the main @progress/kendo-ui

Currently I am including:

"@progress/kendo-inputs-vue-wrapper": "^2018.3.1025",

"@progress/kendo-ui": "^2018.3.1219",

 

The kendo-inputs-vue-wrapper doesn't appear to have a 2018.3.1219 version. Am I missing something needed to make the latest version work?

Hello Team,

 

Am looking to remove the default column named "All Categories, All Products" etc, is there any property which is need to be set true/false ?

Have a look at the screen shot to know more.

 

I am trying to implement virtualization in a dropdown list using Vue.js and Kendo-UI. I have successfully implemented virtualization but I am havign trouble understanding the importance of `ValueMapper`. What this means is that Dropdown options are correctly loading in the DropdownList when the user scrolls down, but the problem occurs when the user makes any selection in the Dropdown list.

When the user selects any value from the dropdown list, I see this error in the console: 

> ValueMapper is not provided while the value is being set

I've read the docs and come to a conclusion that implementing a value mapper is only required when the dropdown option needs to be pre-fetched (See https://www.telerik.com/forums/need-help-understanding-virtualization-paging#C3qyuxTFGUSIRVeSxQZgog for detailed explanation).

But I am getting the above entioned error even when I select a dropdown option that has already been loaded. There must be something that I haven't understood about `valuemappers`.

Also, I am using dapper ORM in the backend which doesn't support `IQueryable` and therefor I've writed custom SQL to get paged data.

Here's my vue code:

    <template>
      <div v-show="visibility=='true'">
        <label v-html="label">{{label}}</label>
    
        <kendo-datasource
          ref="remoteDatasource"
          :transport-read-url="getRequestUrl"
          transport-read-type="GET"
          transport-read-data-type="JSON"
          page-size="20"
          schema-data="Data"
          schema-total="Total"
          server-paging="true"
        ></kendo-datasource>
    
        <kendo-dropdownlist
          ref="dropdownlist"
          v-model="cntrlValue"
          height="130"
          virtual-item-height="26"
          :virtual-value-mapper="valueMapper"
          data-source-ref="remoteDatasource"
          data-text-field="dropdownText"
          data-value-field="dropdownValue"
          option-label="Select here..."
          @close="onSelect"
        ></kendo-dropdownlist>
      </div>
    </template>
    
    <script scoped>
    import service from "somepath";
    export default {
      name: "FormGroupSelect",
      props: {
        id: {
          default: "kendo-Dropdown",
          type: String
        },
        name: {
          type: String
        },
        label: String,
        visibility: String,
        dropdownKey: String
      },
      data() {
        return {
          cntrlValue: this.value
        };
      },
      watch: {
        value: function(newVal) {
          this.cntrlValue = newVal;
        }
      },
      methods: {
        onSelect: function() {
          this.$emit("Select", this.cntrlValue);
        },
        getRequestUrl: function() {
          return service.getDropdownOptionsRequestUrl(this.dropdownKey);
        }
      }
    };
    </script>

So, Should I implement value mapper even when I don't want to allow my user to select a value that hasn't been loaded in the dropdown yet? And if so, what is the best way to implement it without putting burden on the server by reading all the possbile values and then searching for the indices (because that's how it's done in the docs example).

Hi,

Is it possible to pass another parameter with event to methods?

my code is as below:

I am saving a grid's column layout to localStorage in a beforeunload event. In the Vue mounted event I restore the column layout (once). To do this I have the grid's auto-bind set to false.

const opts = this.$refs.indexGrid.kendoWidget().getOptions();

-- set the column widths in opts.

this.$refs.indexGrid.kendoWidget().setOptions(opts);

After restoring the columns I call the data source read method to load the data (this.$refs.ds.kendoWidget().read()) but nothing happens. 

Does it have to do with the call to setOptions as options contains dataSource info.

 

We like to use dropdown inside the grid , so we using this (https://www.telerik.com/kendo-vue-ui/components/grid/editing/#toc-setting-custom-editors) example in our project we are getting this error 

Uncaught TypeError: $(...).appendTo(...).kendoDropDownList is not a function
    at VueComponent.categoryDropDownEditor (git.vue?26ca:154)

 

Anyone help me on this ?

 

 

I need to be able to call grid hideColumn() method using the vue wrapper.

 

I've wired up the event from the grid like this:

<kendo-grid :before-edit="beforeEdit">

 

and then in my vue js I have:

 

methods: {

beforeEdit: function (e) {
        //how to hide column of the grid here?
      }

}

In the jQuery examples I could use 'this' to reference the grid but what is the method when using vue?

 

Thanks

Tony