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

I want to collapsible splitter for custom button.

not splitbar.

How can collaspe control Splitter to custom button?

 

Hello!

Any chance you could post sample code of layouts like the Veautify team did?

https://vuetifyjs.com/en/layout/pre-defined

The dashboard sample (https://github.com/telerik/vue-dashboard) hasn't been updated in a while and it doesn't work in IE11

Thanks!

Hello!

 

I have a problem: 

I was going to use kendo-grid with typescript. I use npm packages @progress/kendo-grid-vue-wrapper and typescript version ^2.9.2. When I used sample with localdatasource, I got the error:

 

I have a web application on which I have a grid which is fed by a datasource object.

The datasource essentially queries a url, but the data to be sent (transport.read.data) is actually dynamic and I would like it to be bound to some parameter of my view.

I tried to do it this way:

<kendo-datasource ref = "myDataSource"
transport-read-data-type="json"
:transport-read-url = "dataURL"
:transport-read-cache = false
:transport-read-data = "dataArgs"
schema-data="aums">
</kendo-datasource>

with dataURL and dataArgs being computed properties in my view instance.

However, when they are updated in the vue instance, the changes do not propagate to the Datasource.

Is this a known issue?

Thanks.

 

 

Is it possible to auto fit column width with Vue? I see it in the jQuery implementation, though I am not quite sure how to do it using Vue.