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, 

it is possible to set the snap without buttons on the slider?

i'm trying to avoid something like this

i want to move the cursor with mouse and automatic go to position 0 or 1 or 2 etc... 

i don't want to use buttons and i want to avoid to choose, for example, the value 1,5

it's possibile to do this?

 

Thanks a lot

 

Giuseppe

Hi everyone! , I would like to create at the select of a grid a label at the top of the page with a click button to cancel the decision. Something that looks like a filter on shopping websites. Something like attached in the picture Does a similar component already exist?

Hello

I'm using the kendo Vue wrapper to implement a grid. I want to have the first column of my grid to be a checkbox column so i can select rows. As the docs suggested I wrote a selectable="true" kendo grid colomn. But no checkboxes are visible, I checked the DOM and it's because there are only input type checkbox tags with class "k-checkbox" added and not the nessecary labels with class "k-checkbox-label". I'm not sure if I'm missing something or the kendo grid column with binding :selectable isn't working properly.

 

Thanks for helping me!

Kind regards

I am trying to figure out how to replace the points (open circle dots) on a line chart with just a smooth line. I have been looking through the chart API and thought the solution would be the plot area border dash type. However, this doesn't appear to do anything. I am either implementing it incorrectly or it is not the correct solution. A third possibility is that it is buggy and does not work. I am using Vue with typescript. Below is my attempted implementation:

<kendo-chart :data-source="chartData"
             :series="series"
             :pannable-lock="'y'"
             :zoomable-mousewheel-lock="'y'"
             :zoomable-selection-lock="'y'"
             :category-axis="categoryAxis"
             :theme="'sass'"
             :category-axis-title-text="'Time'"
             :value-axis-title-text="'Attribute'"
             :tooltip="tooltip"
             :plot-area="plotArea">
</kendo-chart>

plotArea: any = {
    border: {dashType: 'solid'}
};

I am attempting to use the kendo-diagram control in a VueJS application. I have two data sources, one for the actual nodes/shapes, and one for the connections between the nodes.

The documentation is pretty sparse, and the sample that you provide only deals with a Hierarchical data source.

Based purely on a guess, I did the following:

<template>
  <v-content>
    <kendo-datasource 
      ref="nodes"
      :data="dataSource">
    </kendo-datasource>
    <kendo-datasource 
      ref="connections"
      :data="connectionsDataSource">
    </kendo-datasource>
    <kendo-diagram
      :data-source-ref="'nodes'"
      :connections-data-source-ref="'connections'">
    </kendo-diagram>
  </v-content>
</template>

<script>
import Vue from "vue";
import "@progress/kendo-ui";
import "@progress/kendo-theme-default/dist/all.css";

import {
  DataSource,
  DataSourceInstaller
} from "@progress/kendo-datasource-vue-wrapper";
import { Diagram, DiagramInstaller } from "@progress/kendo-diagram-vue-wrapper";

Vue.use(DataSourceInstaller);
Vue.use(DiagramInstaller);

export default {
  data: function() {
    return {
      dataSource: [
        { id: "one", name: "One" },
        { id: "two", name: "Two" },
        { id: "five", name: "Five" }
      ],
      connectionsDataSource: [
        { from: "one", to: "two", label: "plus one" },
        { from: "one", to: "five", label: "plus three" }
      ]
    };
  },
  components: {
    Diagram
  }
};
</script>

I get the following error when running this page:

Error: Incorrect DataSource type. If a single dataSource instance is set to the diagram then it should be a HierarchicalDataSource. You should set only the options instead of an instance or a HierarchicalDataSource instance or supply connectionsDataSource as well.

What should I do in order to get both a data source, and connections data source bound to the diagram? Also, where can I find actual documentation for the VueJS implementation?

 

Thanks,

 

Stephan

Hello,

 

In my grid in the columns I put custom colum menu, so I can use directly the filters. The problem is that although everything seems to be working fine, when I click on on column filter it opens a popup, and when I click on one other columns filter it also opens a popup BUT does not close the previous one.

I ve seen examples where this functionality works, and some others that it does not. Is there a solution for when I open one columns filter popup to close all the others that is currently open?

Thanks

Hi

I'm struggeling to find a working solution for the following problem, I need to be able to define custom templates for specific columns in the Native Grid when the grid is grouped. Somehing like the solution when the grid is not grouped using the "cell" property of GridColumnProps. I'm currently changing all wrapper components to native ones in my project, in the wrapper grid component we could just add a template property to the column definition and then return a string or function.

I need some help on how I should approach this for the Native grid. I tried the solution as stated in the docs using a named slot and the cell render prop of the grid but this renders a template for every cell and I need to be able to use a custom template for each column that requires one. But I can't seem to solve this issue completely using this approach.

Any help is appreciated,

thanks in advance!

Hi, 

is there a way to open the date picker programmatically by  passing a property? If not are there any alternative ways to do this? I need to open the date picker on label click in vue using  type script.

Thanks

We have a Vuejs app that is using the Kendo DropDownTree control, with checkboxes, to display a hierarchy of data.

The problem is, there is a difference with how the control returns the checked IDs when the parent node is expanded VS collapsed.

To illustrate the problem:

Both parents nodes below have 2 child nodes.

Parent1 happens to be expanded. If I check parent1, the control then checks child1+child2 automatically. And the "@change" function sends all three IDs. This is the desired affect.

Parent2 has 2 child nodes. But the child nodes can't be seen because parent2 is collapsed. When Parent2 is checked, the "@change" only sends parent2 ID. The child Ids are NOT sent. Why is this? Why the difference vs parent1 example?

Also, the child nodes for parent2 do get checked properly by the control. I can see this if I expand parent2. The child nodes IDs just never got sent to the "@change" when it's parent2 was clicked and collapsed.

 

 _parent1
    -child1
    -child2
 _parent2

 

Is there a way to get all the checked IDs from "$event.sender._values" whenever any node is checked?

Here is how my dropdowntree is configured along with the change function:

<dropdowntree
  :data-source="items"
  tagMode="single"
  :autoClose="false"
  :checkboxes-check-children="checkChildren"
  :check-all="true"
  :placeholder="placeholder"
  dataTextField="text"
  dataValueField="id"
  @change="onChange"
  :value="selectedItems"
  style="width: 100%"
  height="400px"
  :load-on-demand="true"
>

onChange($event) {
let vm = this
vm.$emit('onHierarchyChange', $event.sender._values)
}