I can't find anything about using a loading indicator with the native grid. Looking at the API, it doesn't look as if there is even an event that fires when the data is loaded for the native grid. Anyone able to shed any light on this?

Hello,

 

I need to use a column filter with checkboxes on my current grid. I want the checkboxes to have values from all the possible data from the server instead of only the data that I got on the current page.

This means that when the column filter is getting open, I need to make a call to the server in order to get all the data I need.

Can you please provide me a way to do, because I can't find one.

Thanks

 

Nevermind, I solved it. I saw that there is a property dataItems. This raised another question. How can I make a loading animation for the dropdown while I m waiting to get my data?

Hi,

We are building a vue application and we are also using the scheduler component.
We are having hard time to find a the way to show the loading animation while we are fetching data from our server

We found multiple example online for the jquery lib using kendo.ui.progress(el, true/false) but not sure how to apply this to our vue app.

Thanks in advance for your help

Hi,

I have the native grid set up in my vue application with Vuex and having issue getting the grouping feature to work.

I am not getting a response whenever I drag a column to the column header. The dragged column just not stay in the column header, it disappears afterward.

It seems my grid isn't emitting the onDataStateChange method. Not sure what I have done wrong.

Other gird features are working fine. 

 

I'm trying to build a simple grid with server paging, filtering and sorting, but I'm having trouble. Currently my grid is loading in all items from the server, when it should be loading just five. I think I previously had it loading just five, but it was always getting the first five.

Here's my HTML:

 

And here's my JS (using webpack):

 

Am I doing something wrong, or is this functionality not supported yet?

We are using the kendo-ui Dropdowntree control in our VueJS app.

If we have around 1100+ rows of data in our hierarchy, we find that the Browser screen freezes until the Dropdowntree control is finished populating.

Most of our hierarchies are much smaller and the control populates quickly as expected.

But we have 1135 rows in our hierarchy in one of our examples. The data is fetched from our API and returned to our Vuejs app, in a few seconds. But after the Vuejs load function finishes and the code is about to return to the UI, the screen freezes for about 10 seconds while the Dropdowntree control is populating. Nothing can be clicked while the screen is frozen.

How can we avoid the screen freezing while the Dropdowntree control is populating where the hierarchy rows are large?

 

Hi,

I am using Kendo UI Material theme. I would like to switch between light and dark themes without reloading the whole site. May I know what are variables available that I can set in the code?

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