Hi,
I'm trying to figure out how to persist and restore state in the native Vue grid. Am I missing something; is this not available yet?
I found the article about doing it with the grid wrappers, but not native.
Thanks!
<chart :title-text="'Gross domestic product growth /GDP annual %/'"
:legend-position="'bottom'"
:series-defaults-type="'area'"
:category-axis-categories="categoryAxisData"
:category-axis-major-grid-lines-visible="false"
:category-axis-labels-rotation="'auto'"
:value-axis-labels-format="'{0}%'"
:value-axis-line-visible="false"
:value-axis-axis-crossing-value="-10"
:tooltip-visible="true"
:tooltip-format="'{0}%'"
:tooltip-template="tooltipTemplate"
:theme="'sass'">
<chart-series-item :name="'India'"
:data="indiaData"
:line-style="'smooth'">
</chart-series-item>
<chart-series-item :name="'World'"
:data="worldData"
:line-style="'smooth'">
</chart-series-item>
<chart-series-item :name="'Haiti'"
:data="haitiData"
:line-style="'smooth'">
</chart-series-item>
</chart>
When using the ChartSeriesItem tags to define the data in the Chart component the following error appears in the console once the Vue project is started.
<chart-series-item :name="'India'"
:data="indiaData"
:line-style="'smooth'">
</chart-series-item>
<chart-series-item :name="'World'"
:data="worldData"
:line-style="'smooth'">
</chart-series-item>
<chart-series-item :name="'Haiti'"
:data="haitiData"
:line-style="'smooth'">
</chart-series-item>
Using a definition like the above, we should be able to define Chart's data with no issues.
When using native vue gird component often have to open modal windows to show details usually when a particular cell in the grid is clicked and do show modal windows have to use non-native <kendo-window> inside a vue component not happy with mixing jquery based wrappers inside a vue component and this is not ideal. I have explored using native vue popup component but it's not up there to offer what widows component is offering.
Please can a native vue component be developed that we in KendoWindow implementation?
Also, I did not find any example, where a kendo grid component is utilising a window component to open a modal window to show another detailed view of a selected cell from a gird (see an example UI of a grid).
Kind regards
Hammy Babar
Stackblitz example.
The Spreadsheet options are logged in the console in the mounted function. Note that pdf.proxyURL and excel.proxyURL have no values.
The ScrollView provides one of the fundamental UI experience blocks on mobile apps - would like to see a wrapper implemented for Kendo UI for Vue to add support for it.
I'm using Kendo UI with Vue wrappers. I have a grid that feeds from a remote datasource, but I have a custom implementation for the data service (using Axios). Currently, Kendo requires me to do this: ``` <kendo-datasource ref="datasource" :data="rowData"></kendo-datasource> <kendo-grid :data-source-ref="'datasource'"> <kendo-grid-column v-for="columnDef in columnDefs" :key="columnDef.field" :field="columnDef.field" :title="columnDef.headerName"> </kendo-grid-column> </kendo-grid> ``` It seems like extra boiler plate to require the separate <kendo-datasource> tag. Why can't I bind my `rowData` directly to the kendo-grid?
Please extend Vue.js Grid Component with DetailTemplate like in AngularJS. The Detail View of the Grid is very useful in combination with subcomponents, as I did always with AngularJS k-detail-template directive. By giving parameters to it it can be used really powerful. I would like to use the same in Vue.js Without the implementation of detail template as component or directive (But via script tag reference in options) no vue component is rendered inside.
The Kendo UI for Vue Scheduler Wrapper doesn't support year view which is available in the jQuery suite.
To reproduce the issue follow the below steps:
Expected behavior
The "Year" view should be available in the Kendo UI for Vue Scheduler Wrapper
The Native NumericTextBox doesn't have the 'k-state-focused' class applied to it, once the component is focused.
For comparison, the Angular and React versions of the same component get this class applied.
React: https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/
Angular: https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/
Bug report:
https://stackblitz.com/edit/bbuqh1?file=src/main.vue
Steps:
Focus the input, type some text and blur -
Current:
an warning is observed in the console and the types string is passed to the change event.
Expected:
an warning is observed in the console and the types string SHOULD NOT BE passed to the change event.
https://stackblitz.com/edit/gv4uwk?file=src/main.vue
Focus the initial input then press tab
the stepper is focused yet it does not change visually so we know it
expected:
There is a visual initial representation of the focused component
Describe the bug
When the Localization and Intl Providers are used in Vue 2 with Composition API, there is an error in the browser's console that appears initially, before any user interaction. The error is "[Vue warn]: Error in data(): "TypeError: ref is not a function"". After this error appears, no matter what values are passed to both the Localization and Intl components, the are not functioning.
To Reproduce
Expected behavior
The Localization and Intl Providers should work correctly in both options and composition API contexts
Type in the Currency field in the example page here https://www.telerik.com/kendo-vue-ui/components/inputs/numerictextbox/formats/
After typing in the third digit, caret position moves to the 2nd digit instead of the first or last digit.
Typing in more digits causes the caret to move a position up occasionally.
Caret needs to be consistent on its positioning, either staying in the far left, or to the right before the decimal.
Preferably, this should be a prop to configure.
Also, tabbing out of the field when there are more than 2 decimal places will not format on leave.
Hello,
The StackLayout component is available in other Kendo UI suites like KendoReact for example but is still not provided for Vue. Can you add the StackLayout component to the Kendo UI for Vue Native suite?
Hello,
The GridLayout component is available in other Kendo UI suites like KendoReact for example but is still not provided for Vue. Can you add the GridLayout component to the Kendo UI for Vue Native suite?
Hey there!
It would be great to add an option to the <Grid /> component that allows specifying a custom cell template specifically for the "select" column.
Looking at the documentation, there is an example that shows how to do something similar, but it overrides the complete CellRenderer for all columns.
Here is a minimum example of the API we could have:
<script lang="ts" setup>
import { Grid } from '@progress/kendo-vue-grid';
</script>
<template>
<Grid
selected-field="selectedField"
selected-cell="mySelectCell"
>
<template #mySelectCell="{ props }">
<!-- Checkbox or whatever you want -->
</template>
</Grid>
</template>
Kendo Splitter component `change` event is triggered from child components e.g. Input/Grid. I have multiple splitters defined, but only parent splitter has `onChange` event listener defined. When changing the text from child containing Kendo Input component which has no change event defined (doesn't really matter if it is), the event is propagated to Splitters `onChange` event and crashes Splitter pane handling. Added `onChange` listener to other Splitters as-well, they all are triggered. Clicking on Grid component checkboxes (is child to Splitter) to select the row will also trigger Splitters `onChange` event. Current workaround is to defined Splitters `@change` event as `@change.self` then the children's `change` events wont trigger it.