Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
0 answers
178 views

Hi I have a grid using: https://www.telerik.com/kendo-vue-ui/components/grid/filtering/filter-menu/

I have several filters by columns, how can I change the title?

In the image you can see my grid, for example in the first filter I need the title to be different from the second, how is this possible?

 

 

 

diego
Top achievements
Rank 1
 asked on 17 Oct 2022
6 answers
647 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
1 answer
67 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
2 answers
634 views

I'm trying to have the Kendo DropDownList wrapper component expand to the viewport height so that there's a maximum amount of items on screen without having a scrollbar on <body>

 

I'm currently trying it with this approach but I'm wondering if there's a better way:

1seoqu (forked) - StackBlitz

 

The main downside of this approach is that it relies on setting the 'height' prop to a number that is larger than the data source would take up when fully rendered.  In this case a height of 999px won't work, while a height of 9999px will work. So when I set the height to 9999px I get the desired result but it feels hacky and I'm wondering if there's a better way.

Filembar
Top achievements
Rank 1
Iron
Iron
 answered on 04 Feb 2022
9 answers
301 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
18 answers
1.0K+ 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
6 answers
354 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
1 answer
77 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
1 answer
281 views

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?

 

Petar
Telerik team
 answered on 25 Feb 2022
1 answer
212 views

Hi. The documentation (https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/custom-headers/) shows how to make custom headers, but there is no example of a custom header with functional sorted colums (like the first grid on this page -> https://www.telerik.com/kendo-vue-ui/components/grid/sorting/ ).

I want to have a custom header template and I also want to click on it to sort the column. I actually managed to do that, but the arrows are missing. Here's a code sample:

<template #headerTemplate="{props}">
   <span @click="headerTemplateClickHandler(props)">{{ props.title }}</span>
</template>

headerTemplateClickHandler(props){
      const existentRuleIndex = this.sort.findIndex(rule => rule.field === props.field);
      if (existentRuleIndex >= 0) {
        this.sort[existentRuleIndex ].dir =
          this.sort[existentRuleIndex ].dir === "desc" ? "asc" : "desc";
      } else{
        this.sort.push({
          dir: 'desc',
          field: props.field
        })
      }
      props.sortchange({
         sort: this.sort
      });
    }

With this code I managed to sort the column, but the arrow indicators do not show up in the header.

Petar
Telerik team
 answered on 21 Apr 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Editor
DatePicker
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
DateTimePicker
Gantt wrapper
Chart
Chart wrappers (package)
ComboBox
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Popup
Window
Error
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
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
Button
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
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?