Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
1 answer
415 views

I want to know how could I customize the default tooltip shown by the column menu (https://stackblitz.com/run/?file=src/main.vue):

On this example, instead of the "ProductName Column Menu" tooltip text,  I'd like to display some other user friendly text, or just have this tooltip removed. Is it possible?

Petar
Telerik team
 answered on 15 Apr 2022
1 answer
270 views

Hi, I am just getting started with using the Kendo Vue components and am trying to implement a context menu.  My application is using Vuejs 3 with typescript.

I have a version working with ContextMenu from the @progress/kendo-layout-vue-wrapper package.  However, with this, I can't seem to access anything from an event handler argument.  Example:  function onMenuSelect(e) - I can't seem to access anything about e in my typescript/javascript. 

In searching around for typescript types for this, I notice that there is a native kendo vue menu which requires Menu from @progress/kendo-vue-layout and Popup from @progress/kendo-vue-popup.  Should I be using this instead?  And with this, are there any examples for how to open the menu from rows in a table?  I need my context menu to be dynamic based on which table row is triggering it.

I hope some of this question makes sense - I am totally new to using this.  Thanks!

Petar
Telerik team
 answered on 06 Apr 2022
4 answers
87 views

Hi

I have a custom filter template for a column and it works fine. I would like to hide the filter window as soon as the user clicks the custom "Filter" or "Reset" button. The window automatically hides when we click anywhere else. 

 

How can I close the window grammatically?

 

 

Plamen
Telerik team
 answered on 18 Dec 2019
0 answers
123 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
1 answer
68 views

Hello,

In current implementation of the our web application - we use Kendo UI for jQuery. We decided to implement new pages inside our application using Kendo UI for VueJs. In current implementation we have a lot of grids with filters (filter icon + filter popup) in the column header (similar to https://demos.telerik.com/kendo-ui/grid/filter-menu-customization). But we can't find any examples of such implementation for native Kendo Vue Grid.

Is it possible? We need to have consistent behavior of grid filters and user experience all over our application for jQuery and VueJs implementation.

Thank you in advance

Petar
Telerik team
 answered on 27 Oct 2020
1 answer
72 views

I have some grids that have a date/time column. The default equality operators for the filter match both the date and time. I am trying to customize the equality operator (or add a new operator) that ignores the time and only compares the date. Using a custom operator works the first time I select the operator. When I go back to the filter menu after setting it the first time, the dropdown has no operator selected and I changing the value again doesn't work until after I select equals again.

How can I have the equals operator remain selected or add a new operator?

If this isn't supported, are there any other ways I can accomplish the same thing? I want to display both the date and time, but have equals only filter on the date.

Here is some example code: https://stackblitz.com/edit/custom-filter-only?file=src/main.vue

Petar
Telerik team
 answered on 30 Jun 2021
9 answers
245 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
459 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
3 answers
46 views

 

Hi,

I'm trying to translate the filter menu of the Grid.

the instructions on page:

https://www.telerik.com/kendo-vue-ui/components/grid/api/FilterableProps/

seems clear.

But if I put by example:

 

<kendo-grid ref="grid"  :data-source-ref="'datasource1'" :pageable='true' :sortable="true"  :filterable="true"  :selectable="true"
 :filterable-messages-clear="'Reimposta'"

 

The text of the relative button is always "clear".
Any suggestions?
Thank's in advance!

 

 

Plamen
Telerik team
 answered on 15 Mar 2019
18 answers
850 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
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Editor wrapper
Input
NumericTextBox
Editor
DataSource wrappers (package)
DateInput
MultiSelect
Scheduler wrapper
Styling / Themes
DateTimePicker
Gantt wrapper
Pager
Checkbox
Upload
Scheduler
Calendar
DropDownList wrapper
Localization
Window
Tooltip
Chart wrappers (package)
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Chart
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TreeView wrapper
TabStrip
Error
FloatingLabel
Form
TextArea
Stepper
Splitter
PanelBar
TreeView
Notification
Menu
TreeList
Toolbar
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
ComboBox wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
MultiSelect wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Card
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Drawer
Loader
ProgressBar
DateRangePicker
Switch
Gauge
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
ListView
Signature
ChunkProgressBar
FontIcon
SVGIcon
+? more
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?