Questions on Kendo UI for Vue Forum

0 answers

110 views

Server side multiselect checkbox native component

hai i want to ask about multiselect checkbox in native component. is there any reference about using it for server side process? i have a problem with columnsMenu filter to get data from another API. my case is that in grid table i using columnMenu filter multiselect checkbox and that data list in checkbox i got it from another API(master data city for example) but i still fail to implement it. really appreciate your help.
you can ask if my question is hard to understand because bad english

Checkbox

DropDownList

Grid

MultiSelect

asked on 05 Jan 2023

0 answers

180 views

Kendo Scheduler Vue Wrapper and iOS > 12 on iPAD not scrolling

Hello,

Kendo UI version: 2022.3.1109
Kendo Scheduler Vue Wrapper version : 2022.3.1109

Browser: Safari > v12

By default, iPad on iOS greater than version 12 using Safari are show websites in desktop mode. When the Scheduler is displayed, the scroll is not working (even if we force the settings mobile to true or phone or tablet). So we can't scroll through the timeline.

When we switch the iPad to request a mobile site, the scroll is working.

With an iPad with iOS version 12 or below, there is no issue.

I think the issue is related to this github issue I found for the Spreadsheet wrapper for vue: https://github.com/telerik/kendo-ui-core/issues/5300

Is there a work around for that ?

Best Regards,

Fabien

Scheduler wrapper

asked on 22 Dec 2022

1 answer

157 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

99 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

112 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

124 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

271 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

130 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

319 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?