Questions on Kendo UI for Vue Forum

1 answer

166 views

Kendo UI Grid View implementation using vue | pagination issue

We trying to implement a Kendo grid for my project and I was trying to add 'All' option in the pagination and used dataStateChange event to set the take value but getting event value as undefined.

Whenever we select "All" option from the dropdown, In dataStateChange method , I am getting selected value as "totalItemCount" instead of "All", but I can see both "totalItemCount" and "All" options in dropdown.

Example:

we have 1000 records as "totalItemCount" in a table, provided image below. So I am able to see all the records in the table but in dropdown we can see both 1000 and "All" option. We only need to see "All" not 1000.

We should not see "totalItemCount" in the dropdown(as well as selected option) and see only "All" as a selected option(as well as dropdown) when we select "All" option from dropdown.

Can someone help to solve this issue, please?

pageable() {
      return {
        buttonCount: 5,
        info: true,
        type: 'numeric',
        pageSizes: [10, 15, 20, 'All'],
        previousNext: true,
        pageSizeValue: this.pageSizeValue,
    };
},

dataStateChange: function (event) {
       this.loader = false;
       this.skip = event.data.skip;
       this.take = event.event.value === 'All' ? 1000 : event.page.take;
       this.pageSizeValue = 'All';
},

Grid

Pager

answered on 09 Dec 2022

0 answers

107 views

Vue datetimepicker changing hour using arrow moving to year field and changing year

Hi Kendo Team,

I am using vuejs 2.x and vue datetimepicker (2.7.2), where I am facing the following issue.

When the user change to try the month/day/hour field using arrow keys (By holding the up arrow continuously for few seconds), the control is moving to year field undesirably and changing the year values.

 <datetimepicker
                    :style="{ width: '100%' }"
                    :format="'yyyy-MM-dd HH:mm'"
                    :value="item.eventStart"
                    @change="handleChange"                    
                  />
 
 handleChange(event) {
      let vm = this
      if (isValid(event.target.value))
        vm.item.eventStart = new Date(event.target.value)
    },

DateTimePicker

updated question on 27 Nov 2022

1 answer

125 views

Vue example of Upload component removeFiles()

Hello,

Am having trouble using the .removeFiles() method of the Vue Upload component. I was wondering if anyone had an example of this in use or could point to some documentation describing how to use it? The Vue API documentation for the component doesn't seem to include this functionality. Is it even supported? I do see the removeFiles method when inspecting the component using web developer tools.

Thanks!

Upload

answered on 24 Nov 2022

1 answer

133 views

ToolBarItem of type splitButton not reacting to updated Vue component state

So here's the dealio....

I have this really cool ToolBar on my site that has a splitButton ToolBarItem. It looks great. Does all the things. ❤️

This button has a :menu-buttons property which is full of nice items to show when a user clicks the down arrow on the button. It does that really well.

Then, the page state changes. You know, because stuff is happening on our super dynamic interactive web page! Well, because stuff changed, the :menu-buttons items that were there aren't really representative of the current state of the page. We need to update them to reflect the now state of thing.

But the splitButton ToolBarItem is not happy about this. It like the original list and no matter how much we poke or prod it, it's refusing to play nice and update itself. Suddenly we are sad 💔

Poor ToolBarItem. I wonder if there's anything she can do to pay attention to what's going on, or is she just stuck and not willing to listen?

Toolbar

answered on 09 Nov 2022

0 answers

288 views

@seriesclick is not calling the function

the below code works in stackblitz as expected but not in my local

<template>
  <div>
    <Chart
      :transitions="false"
      @seriesclick="notify"
    >
      <ChartTitle :text="'Gross domestic product growth GDP annual'" />
      <ChartLegend :position="'bottom'" :orientation="'horizontal'" />
      <ChartCategoryAxis>
        <ChartCategoryAxisItem :categories="categories" :start-angle="45" />
      </ChartCategoryAxis>
      <ChartSeries>
        <ChartSeriesItem
          v-for="(item, idx) in series"
          :key="idx"
          :type="'line'"
          :style="'smooth'"
          :data-items="item.data"
          :field="'value'"
          :note-text-field="'extremum'"
          :name="item.name"
        />
      </ChartSeries>
    </Chart>
    <Logger :title="'Events list'" :events="eventsList" />
  </div>
</template>
<script>
import {
  Chart,
  ChartSeries,
  ChartSeriesItem,
  ChartCategoryAxis,
  ChartCategoryAxisItem,
  ChartTitle,
  ChartLegend,
} from "@progress/kendo-vue-charts";
export default {
  components: {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartTitle,
    ChartLegend
  },
  data: function () {
    return {
      events: [],
      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
      series: [
        {
          name: "India",
          data: [
            { value: 3.907, },
            { value: 7.943 },
            { value: 7.848 },
            { value: 9.284 },
            { value: 9.263 },
            { value: 9.801 },
            { value: 3.89 },
            { value: 8.238 },
            { value: 9.552 },
            { value: 6.855 },
          ],
        },
        
         
        
      ],
    };
  },
  computed: {
    eventsList(){
      return this.events;
    }
  },
  methods: {
    onRender() {
      this.events.unshift("Render event triggered");
    },
    
    notify() {
      alert();
      this.events.unshift("SeriesClick event triggered");
    },
   
  },
};
</script>

Chart

asked on 04 Nov 2022

1 answer

138 views

Tooltip in Layers

Hello, Exists any way to show a tooltip in the bubble layers?
Thanks in advance

Map wrapper

answered on 20 Oct 2022

0 answers

321 views

Create filter label with close event

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?

asked on 20 Oct 2022

0 answers

383 views

Kendo Grid - Change Color Row Selected

How to change color of row selected?

Grid

asked on 20 Oct 2022

0 answers

312 views

Template column with the wrapper?

I'm using the Grid Wrapper, I can't for the life of me figure out how to do a template column?

..or like binding to a WCF date to convert to something readable

**EDIT**

Got it with the column data API bindings

Grid wrapper

updated question on 19 Oct 2022

0 answers

240 views

Change title for Filters

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?

Grid

asked on 17 Oct 2022