Implement virtualization DropDownList

[ravi]

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).

[Plamen]

Hi,

In your case the error is observed because you are setting a value initially when using v-model. Yet as it is described in Kendo documentation here - 'As of the Kendo UI R3 2016 release, the implementation of the valueMapper function is optional. It is required only if the widget contains an initial value or if the value method is used.'

If you are not setting initial value the component is working correctly even without valueMapper as it can be seen here.

Regards,
Plamen
Progress Telerik