Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
1 answer
5.1K+ views

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?

garri
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 10 Aug 2021
1 answer
208 views

Hi, i'm new to kendo and i'm trying to create a filterable grid with a grid native component. Everything works well BUT i'm stuck with the full list of operators (contains, begins, is not null,...).

Is there an easy way to customize the list of operators ? I will probably only need "begins" and "is equal to".

I saw that with the grid-wrapper I could define a list with the property "filtterable" but it doesn't seem to work with grid native. I got an error saying that Filterable could'nt be assigned with an object.

Thanks a lot !

Petar
Telerik team
 answered on 20 Oct 2020
1 answer
58 views

Hello.

I implemented the kendo ui grid vuejs.

I have a question, how it's possible "sticky" the Expand column?

I have other columns "sticky" and works fine, but the "expand" column (master details) don't keep sticky. and i need to hide the "menu filters" in this columns too

Thanks in advance

 

Plamen
Telerik team
 answered on 20 Sep 2022
9 answers
285 views

We currenly have an MVC application using Kendo UI and we recently started using Vue.

There is no clear documentation how to add and use the Kendo UI for Vue within Visual Studio and an MVC application.

All official documentation on the Telerik web site, related to the Kendo UI for Vue is using NPM to install Kendo UI for Vue components in a specified folder, or CDNs.

Unfortunately, there are no clear examples how to use those components within the structure of an MVC application.

To make matter worse, Telerik did not provide a way to create a Kendo UI for Vue application from within the Telerik menu in Visual Studio.

 

The questions are:

1. What JS/CSS files are needed to show and use these components?

2. Where can I find/download all these files?

3. What is the recommended structure to keep these files in?

4. What needs to be "imported" using <Style> and <link> tags, NOT the "import" and "required" and "export", because these are using webpack, which will add a sh...load of other files with it that are not required by the app to actually run.

 

If anybody managed to make it work, please specify step by step what to do to use any of the Kendo UI for Vue components in an MVC app.

Rich
Top achievements
Rank 1
 answered on 19 Sep 2018
6 answers
588 views

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. 

 

<template>
  <v-card shaped>
    <v-card-title>
      <h3>
        Product
      </h3>
    </v-card-title>
    <v-card-text>
      <Grid
        :style="{height: '800px'}"
        :data-items="gridDataResult"
        :filterable="true"
        :filter="filter"
        :groupable="true"
        :group="group"
        :pageable="pageable"
        :reorderable="true"
        :resizable="true"
        :sortable="true"
        :sort="sort"
        :skip="skip"
        :take="take"
        :total="total"
        :expand-field="'expanded'"
        :columns="columns"
        :column-menu="columnMenu"
        @pagechange="pageChangeHandler"
        @filterchange="filterChange"
        @sortchange="sortChangeHandler"
        @dataStateChange="dataStateChange"
        @expandchange="expandChange"
        @columnreorder="columnReorder"
      >
        <!-- <grid-toolbar>
          <button
            title="Add new"
            class="k-button k-primary"
            @click="insert"
          >
            Add new
          </button>
          <button
            v-if="hasItemsInEdit"
            title="Cancel current changes"
            class="k-button"
            @click="cancelChanges"
          >
            Cancel current changes
          </button>
        </grid-toolbar> -->
 
        <grid-no-records>
          <div class="k-loading-mask customPosition">
            <span class="k-loading-text" />
            <div class="k-loading-image" />
            <div class="k-loading-color" />
          </div>
        </grid-no-records>
      </Grid>
    </v-card-text>
  </v-card>
</template>
 
<script>
 
import { process } from '@progress/kendo-data-query';
// import { mapGetters } from 'vuex';
// import { mapGetters, mapActions } from 'vuex';
 
export default {
  name: 'Product',
  components: {},
  data() {
    return {
      columnMenu: false,
      expandedItems: [],
      gridPageable: { pageSizes: true },
      skip: 0,
      take: 10,
      pageSize: 10,
      pageable: {
        buttonCount: 10,
        info: true,
        type: 'numeric',
        pageSizes: true,
        previousNext: true,
      },
      filter: {
        logic: '',
        filters: [
          // { field: 'UnitPrice', operator: 'neq', value: 18 },
          // { field: 'calendarMonth', operator: 'gte', value: new Date('1996-10-10') },
        ],
      },
      group: [],
      sort: [{ field: 'id', dir: 'asc' }],
      // sort: [
      //   { field: 'id', dir: 'asc' },
      // ],
      columns: [
        {
          field: 'id',
          title: 'ID',
          // width: '70px',
        },
        {
          field: 'currency',
          title: 'Currency',
          // width: '100px',
        },
        {
          field: 'salesOrigin',
          title: 'Sales Origin',
          // width: '100px',
          // filter: 'numeric',
          // groupable: true,
        },
        {
          field: 'plant',
          title: 'Plant',
          // width: '100px',
          // filter: 'numeric',
          // groupable: true,
        },
        {
          field: 'sku',
          title: 'SKU',
          // width: '100px',
          // groupable: true,
        },
        {
          field: 'materialGroupDescription',
          title: 'Material Group Description',
          // width: '100px',
        },
        {
          field: 'materialDescription',
          title: 'Material Description',
          // width: '100px',
        },
        {
          field: 'swatchDisplayColourDescription',
          title: 'Colour',
          // width: '100px',
        },
        {
          field: 'calendarMonth',
          filter: 'date',
          title: 'Calendar Month',
          // width: '100px',
          // groupable: true,
        },
        {
          field: 'discontinued',
          title: 'Discontinued',
          // filter: 'boolean',
 
          // groupable: true,
        },
        // {
        //   command: [
        //     {
        //       name: 'edit',
        //       text: ' ',
        //       width: 10,
        //     },
        //     {
        //       name: 'destroy',
        //       text: ' ',
        //       width: 10,
        //     },
        //   ],
        //   title: 'Actions',
        //   // width: '150px',
        // },
      ],
    };
  },
  computed: {
    gridDataResult: {
      get() {
        // const data = process(this.$store.getters.aggregatedBoDataList,
        //   {
        //     sort: this.sort,
        //     take: this.take,
        //     skip: this.skip,
        //     filter: this.filter,
        //     group: this.group,
        //   });
        // console.log(data);
 
        return process(this.$store.getters.aggregatedBoDataList,
          {
            take: this.take,
            skip: this.skip,
            sort: this.sort,
            filter: this.filter,
            group: this.group,
          });
      },
      set(data) {
        return process(data,
          {
            take: this.take,
            skip: this.skip,
            sort: this.sort,
            filter: this.filter,
            group: this.group,
          });
      },
    },
    total() {
      return this.$store.getters.aggregatedBoDataList
        ? this.$store.getters.aggregatedBoDataList.length : 0;
    },
  },
  created() {
    this.$store.dispatch({
      type: 'fetchAggregatedBoData',
      count: 200,
    });
  },
  methods: {
    createAppState(dataState) {
      console.log(`dataState ${dataState}`);
      this.group = dataState.group;
      this.take = dataState.take;
      this.skip = dataState.skip;
      this.girdDataResult(dataState.data);
      // this.getData();
    },
    groupChange(event) {
      console.log(event);
    },
    dataStateChange(event) {
      console.log(`data state ${event}`);
      this.createAppState(event.data);
    },
    expandChange(event) {
      console.log(`expand state ${event.target.$props.expandField}`);
      this.$set(event.dataItem, event.target.$props.expandField, event.value);
    },
    pageChangeHandler(event) {
      this.skip = event.page.skip;
      this.take = event.page.take;
    },
    sortChangeHandler(e) {
      this.sort = e.sort;
    },
    filterChange(ev) {
      this.filter = ev.filter;
    },
    columnReorder(options) {
      this.columns = options.columns;
    },
  },
};
</script>
 
<style>
.customPosition { margin-top:100px}
</style>
Ianko
Telerik team
 answered on 24 Apr 2020
18 answers
974 views

I am facing an issue in event for my custom checkbox in column template in Kendo UI grid using  js.
I am not able to call my method checkboxToggle() which I have called it from here <input type="checkbox" class="user-status" # if(Status){ # checked # } #
v-on:click="checkboxToggle()"/> and for more details you can view my code below.

This is my code.

<kendo-datasource ref="localDataSource" :data="filteredUsers" :group='groupingFiled'></kendo-datasource>
 
            <kendo-grid :height="500"  :data-source-ref="'localDataSource'"  :resizable="true"
                :filterable="false":sortable-allow-unsort="true":sortable-show-indexes="true"
                :scrollable-virtual="true" :pageable-numeric="false"
                :pageable-previous-next="false" :pageable-messages-display="'Showing {2} users'"
                :editable="'popup'":toolbar="[{name: 'excel', text: 'Excel'}]"
                :excel-file-name="'Motadata_UserListing.xlsx'" :excel-filterable="true" >
 
            <kendo-grid-column :selectable="true" :width="35"></kendo-grid-column>
                <kendo-grid-column :field="'UserId'" :hidden="true"></kendo-grid-column>
                <kendo-grid-column :field="'UserName'"  :width="150"></kendo-grid-column>
                <kendo-grid-column :field="'UserType'":width="180"></kendo-grid-column>
                <kendo-grid-column :field="'Role'" :width="120"></kendo-grid-column>
                <kendo-grid-column :field="'AssignedGroups'"  ></kendo-grid-column>
                <kendo-grid-column :field="'Email'":width="210" ></kendo-grid-column>
                <kendo-grid-column :field="'Description'":width="200" ></kendo-grid-column>
 
           <kendo-grid-column :field="'Status'"  :width="170" :template="this.toggleTemplate()"></kendo-grid-column>
 
 </kendo-grid>

Vue Js code

Methods:{ 
    toggleTemplate(){
 
                 let template =
            `<label class="switch" >
            <input type="checkbox" class="user-status"  # if(Status){ # checked # }   #  v-on:click="checkboxToggle()"/>
<span class="slider round"></span></label>`;
 
        let compiledTemplate = kendo.template(template);
        return compiledTemplate.bind(this);
 
    },
     checkboxToggle(){
            //TODO Grid checkbox template event binding not working
            alert("Checkbox Toggle !!!")
    }
}



Veselin Tsvetanov
Telerik team
 answered on 07 Nov 2019
1 answer
597 views

Hello everyone!

I am trying to implement a search field component based on kendo-combobox wrapper.

I want to cover via JEST unit tests the changed value but I can not trigger the change event and assert the component value.

I am sharing with you guys this code example : https://codesandbox.io/s/tender-proskuriakova-89bcm?fontsize=14&hidenavigation=1&theme=dark

Can you help me on this assertion : expect(wrapper.vm.$data.value).toEqual(1);

Martin
Telerik team
 answered on 19 Feb 2020
1 answer
59 views

I'm trying to populate a grid with some async data (not in this repro for simplicity) and do the data processing inside a Vue computed function. 

However I can't seem to get the expanding/collapsing rows functionality to play along nicely.


Here's my attempt (where I save 'e.collapsedGroups' into a ref and recurse over it inside the computed):

Fkcdqd (forked) - StackBlitz

Basically the only issue that I'm still seeing is that when I collapse product name 'Apple' it will close all 'Apple' rows. You can observe this by going to the repro and collapsing 'Apple' product in the units in stock '2', and then scrolling down to the units in stock '7' and seeing there that the 'Apple' is also collapsed.


My guess is is that there must be a simpler way to implement the expand functionality with a computed, but so far haven't found a way.

I would really appreciate any input to help me along 😁

Plamen
Telerik team
 answered on 31 May 2023
6 answers
323 views

I am facing issue with to bind the routing link directly in Kendo UI Treeview and for more details, I have put a router-link property in not working and you can view my code below.

 

01.<div id="vueapp" class="vue-app">
02.<kendo-treeview>
03. <kendo-treeview-item text="User Setting" >

 

04.
05.     <kendo-treeview-item text="User" router-link ="/setting/user" >User</kendo-treeview-item>
06.     <kendo-treeview-item text="Role" router-link ="/setting/role">  </kendo-treeview-item>
07.     <kendo-treeview-item text="Password Setting" router-link ="/setting/password"></kendo-treeview-item>
08.              
09. </kendo-treeview-item>
10.
11. <kendo-treeview-item text="Group Setting" >
12.
13.           <kendo-treeview-item text="Group"></kendo-treeview-item>
14.           <kendo-treeview-item text="Group setting"></kendo-treeview-item>
15.         
16.  </kendo-treeview-item>
17.           
18.
19.</kendo-treeview>
20.
21.   </div>
Rahul
Top achievements
Rank 1
 answered on 05 Aug 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
Editor
DatePicker
DropDownTree wrapper
Scheduler
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?