Telerik Forums
Kendo UI for Vue Forum
1 answer
188 views

Hi, here is my problem.

I used the Vue Kendo Native Grid Grouping.

When it is Basics, it CAN show the format of columns. (As the screenshot of CAN format)

The STACKBLITZ example in this page is the one I tried for CAN format. 

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

 

---

But when it is Aggregates, it CANNOT show the format of columns. (As the screenshot of CANNOT format)

The STACKBLITZ example in this page is the one I tried for CANNOT format. 

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

 

How can I show the format of columns when I use the Vue Kendo Grid Grouping Aggregates?

Thank you a lot!!!

Petar
Telerik team
 answered on 08 Jun 2021
1 answer
1.0K+ views

I try to use v-bind:steps="{ hour: 1, minute: 15 }" but turns out it doesn't have any effect.

I would like to make sure if it is not supported or I have misconfigured.

 

Thanks!

Petar
Telerik team
 answered on 03 Jun 2021
1 answer
1.2K+ views

I'm using the kendo DropDownTree control with VueJS.

I have the control working in a component with my Hierarchy data as shown below.

When I have a parent node with 1 or more child nodes and I check the parent, how can I get all the child nodes to be checked also? Is there a prop for that?

The "check-all" only works for checking or unchecking the entire tree. I would like to check or uncheck all the children within the selected parent. Is that possible? 

    <dropdowntree

      :data-source="items"
      tagMode="single"
      :autoClose=false
      :checkboxes="true"
      :check-all="true"
      :placeholder="placeholder"
      dataTextField="text"
      dataValueField="id"
      @change="onChange"
      v-model="selectedItems"
      style="width: 100%;"
      height="auto"
      >
    </dropdowntree>    


Petar
Telerik team
 answered on 27 May 2021
1 answer
149 views

I'm using the dropdowntree control in Vuejs.

When the checkboxes are selected, the selected items are display in an oval with an "x" at the top of the control. 

How do I keep the selected items from displaying at the top of the control?

I'd rather have the total number of items that are selected to display at the top of the control. Is this possible?

<dropdowntree 
:data-source="myDataSource"
:autoClose="false"
:checkboxes="true"
:check-all="true"
:placeholder="'Select Items'"
dataTextField="text"
dataValueField="id"
v-model="selectedItemsList"
style="width: 500px;"
>
</dropdowntree>

Plamen
Telerik team
 answered on 25 May 2021
1 answer
156 views

Hi,

I have the same question as this one.
https://www.telerik.com/forums/angular-kendo-editor-inside-kendo-tabstrip#login

When I have a kendo editor inside the kendo tabstrip, it seems cannot edit.

How can I do in Vue?


Here is the  Parent.vue , and I use components for each Tab.

 <k-tabstrip>
   <ul>
     <li class="k-state-active">Tab1</li>
     <li>Tab2</li>
   </ul>
   <div>
     <tab1 v-if="Object.keys(buildData.TAB_1).length >0" :data="buildData.TAB_1"></tab2>
   </div>
   <div >
     <tab2 v-if="Object.keys(buildData.TAB_2).length >0" :data="buildData.TAB_2"></tab1>
   </div>
 </k-tabstrip>

 

 

Here is code in Tab2 component.

<template>
    <div>
        <k-editor style="height:280px"></k-editor>
    </div>
</template>

 

How can I edit the  editor wrapper which is insinde the tabstrip wrapper in VUE?

Thanks a lot!!!!

Plamen
Telerik team
 answered on 24 May 2021
1 answer
157 views

Hi,

I am using Vue JS 2.6 stable version. Will the UI Controls work without issue or Is there any other configuration i need to do use with 2.x version?

Plamen
Telerik team
 answered on 24 May 2021
2 answers
258 views

Hi everybody,

I defined a window component with a onclick event in the template like that :

<window
        id="windowMD"
        :width="'300px'"
        :title="'Window title'"
        :actions="actions"
        :content="{
            url: 'http://localhost:3100/api/metadata',
            dataType: 'json',
            iframe: false,
            template:`
              <ul>
                # for (let i=0; i < data.mediaRequests.length; i++){ #
                    <li style='padding-bottom:5px;' onclick='#=eventClick(data.mediaRequests[i])#' > 
                      #= data.mediaRequests[i].id #
                    </li>
                # } # 
              </ul>
            `
        }"
    >
    </window>

But I have a problem when I click in a element in the list. I have a "the function is not defined" even if I declared it

[...]
methods: {
    eventClick: function(data) {
        console.log(data);
    }, 
  },
[...]

I see in this documentation that the function must be declared in the global scope but I need to use "$emits" to transfer data to parent component and I don't think it is possible in global scope. Even if it is possible, I have the same problem with the function ....

is there a solution to my problem ?

Thanks.
VB
Top achievements
Rank 1
Veteran
Iron
 answered on 20 May 2021
4 answers
194 views

Hello,

I have a problem with the grouping of scheduler. Now, I'm grouping the data with local ressource.

I would like to group the data with remote ressource but it doesn't work, although the format of the remote ressource array is the same as the local ressource.

Here an example of the local ressource which works : 

<kendo-scheduler

[...]

:group="resources:['Canaux']}" >

<kendo-scheduler-resource :field="'canalId'" :name="'Canaux'" :data-source="arrayCanaux" ></kendo-scheduler-resource>

</kendo-scheduler>

let arrayCanaux = [];
for (let i = 0; i < 15; i++) {
  arrayCanaux[i] = { text: "A-" + i + "", value: i };
}

And here the code with remote resource : 

axios.get('....').then(response => {

let res = responses.data.canaux

this.arrayCanaux = res.map(canal =>{ return ({ text: canal.nom, value: canal.canalId }) }) console.log(this.arrayCanaux); })


The combobox that I use works perfectly when I fill it with the arrayCanaux with remote ressource but when I want to use it for the grouping of scheduler it doesn't work.

I found this documentation I think it is a solution to my problem but is there a solution that looks like mine?

Thanks

VB
Top achievements
Rank 1
Veteran
Iron
 answered on 06 May 2021
0 answers
197 views

update to version 2021.1.33 and this does not work for me.

{ field: 'Order', title: 'Número de orden', width: '100px', editor: function (container, options) {
                        if(options !== undefined) {
                            $('<input data-bind="value:' + options.field + '"/>').appendTo(container).kendoNumericTextBox({
                                format: "#",
                                min: 1,
                                step: 1,
                                decimals: 0
                            });
                        }
                    }},

I show you a picture

Error (Uncaught TypeError: $(...).appendTo(...).kendoNumericTextBox is not a function)
Could you help me

Luis Ismael
Top achievements
Rank 1
 updated question on 05 May 2021
1 answer
507 views

Hello Folks, 

After updating vue to lattest version, I have this error after each 'npm run build' command:

 

Maybe, you have some project example with vue 3 and these libs (@progress/kendo-base-components-vue-wrapper,  @progress/kendo-base-components-vue-wrapper etc).

Here is my packege.json:

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "3.0.11",
    "vue-template-compiler": "^2.6.12",
    "@progress/kendo-base-components-vue-wrapper": "^2021.1.330",
    "@progress/kendo-charts-vue-wrapper": "^2021.1.330",
    "@progress/kendo-inputs-vue-wrapper": "^2021.1.330",
    "@progress/kendo-licensing": "^1.1.4",
    "@progress/kendo-popups-vue-wrapper": "^2021.1.330",
    "@progress/kendo-theme-bootstrap": "^4.35.1",
    "@progress/kendo-ui": "^2021.1.119",
    "@progress/kendo-vue-dateinputs": "^2.1.5",
    "@progress/kendo-vue-dropdowns": "^2.1.5",
    "@progress/kendo-vue-inputs": "^2.1.5",
    "@progress/kendo-vue-intl": "^2.1.5",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "cldr-core": "36.0.0",
    "cldr-dates-full": "36.0.0",
    "cldr-numbers-full": "36.0.0",
    "core-js": "^3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.11",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue": "3.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

 

 

Thanks.

Andrew
Top achievements
Rank 1
Iron
 answered on 05 May 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
Styling / Themes
DataSource wrappers (package)
Scheduler wrapper
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Button
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
SpeechToTextButton
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?