Telerik Forums
Kendo UI for Vue Forum
0 answers
6 views

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'; },



Anil
Top achievements
Rank 1
 asked on 07 Dec 2022
1 answer
4 views

Hello,

I have a question, as I can't find the answer in the documentation. Can we use the LocalizationProvider to print localized custom string, in the same way we can do it with VueI18n plugin ? Or the Localization feature is only for the Kendo components ?

Petar
Telerik team
 answered on 30 Nov 2022
0 answers
12 views

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)
    },

 

Venkat
Top achievements
Rank 1
 updated question on 27 Nov 2022
1 answer
6 views

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!

Matthew
Top achievements
Rank 1
Iron
Iron
 answered on 24 Nov 2022
1 answer
17 views

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?

Matthew
Top achievements
Rank 1
Iron
Iron
 answered on 09 Nov 2022
0 answers
25 views

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="(itemidxin 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: [2002200320042005200620072008200920102011],
      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>
Gayathri
Top achievements
Rank 1
 asked on 04 Nov 2022
1 answer
29 views

 

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

Petar
Telerik team
 answered on 20 Oct 2022
0 answers
22 views
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?
0 answers
34 views

How to change color of row selected?

 

alex
Top achievements
Rank 1
Iron
Veteran
 asked on 20 Oct 2022
0 answers
22 views

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

sitefinitysteve
Top achievements
Rank 2
Veteran
 updated question on 19 Oct 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
Grid wrapper
DropDownList
DropDownTree wrapper
Spreadsheet wrapper
Editor wrapper
DatePicker
Input
DataSource wrappers (package)
DateInput
DateTimePicker
Gantt wrapper
NumericTextBox
Scheduler wrapper
Styling / Themes
Pager
Localization
Window
Upload
Chart wrappers (package)
Dialog
DropDownList wrapper
MultiSelect
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Chart
Editor
Tooltip
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
Checkbox
Error
FloatingLabel
Form
TextArea
Scheduler
PanelBar
TreeView
Notification
Menu
Toolbar
Animation
Barcode wrapper
ButtonGroup wrapper
Calendar
Chat wrapper
ColorPicker wrapper
ComboBox
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
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
TreeView wrapper
Window wrapper
TabStrip
Card
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Drawer
Loader
ProgressBar
Stepper
DateRangePicker
Switch
Gauge
Splitter
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
TreeList
Button
ButtonGroup
+? more
Top users last month
WEI TZE
Top achievements
Rank 1
CHIHPEI
Top achievements
Rank 2
Iron
Iron
Iron
Rob
Top achievements
Rank 1
Iron
Jerry
Top achievements
Rank 1
Iron
Iron
Iron
Sami
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
WEI TZE
Top achievements
Rank 1
CHIHPEI
Top achievements
Rank 2
Iron
Iron
Iron
Rob
Top achievements
Rank 1
Iron
Jerry
Top achievements
Rank 1
Iron
Iron
Iron
Sami
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?