Telerik Forums
Kendo UI for Vue Forum
1 answer
3 views

hi!

  hello,According to this authorization, it still fails. What's going on?

 

Konstantin Dikov
Telerik team
 answered on 27 May 2024
0 answers
8 views

Hello,

We are currently implementing the Kendo DatePicker within our Vue application. We have used other Kendo components such as the grid before and added our own custom styles to it with no issue, however, with the DatePicker, we are getting some weird overlap. It appears that the default Kendo styles are still being displayed despite specifying classes and adding our own styles. The correct styles work within our own dev environment (Vue and webpack), however when implemented within and application that uses Vite, the Kendo styles come through again.

I've attached screenshots to show what we're getting (KendoOverlap.png) vs what we want (CustomStyles.png) and have also attached our code for the styles.

Please let us know what we can do to resolve this, thank you!

Environment with correct styles: Vue + Webpack

Environment with incorrect styles: Vue + Vite


<styles lang="scss">
@import '@progress/kendo-theme-default/dist/all.css';
@import '@fontsource-variable/material-symbols-rounded/full.css';
@import '../scss/global.scss';

/** Prevents native date picker from showing in browsers */
input[type='date']::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
@-moz-document url-prefix() {
  input[type='date']::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }
}

.date-picker {
  &--active {
    .text-field {
      @extend %form-field-focus;
    }
  }
  &--activeText {
    background-color: $ds-core-color-neutral-white;
    border-color: $ds-core-color-neutral-black;
    border-radius: $ds-shape-border-radius-s;
    .k-input-inner {
      color: $ds-color-input-text-color;
    }
  }
  &__calendar {
    background-color: $ds-core-color-neutral-white;
    border-radius: $ds-shape-border-radius-m;
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.14);
    padding: 6px 12px 8px 12px;
    .icon-block-button {
      .material-design-symbol {
        color: $ds-core-color-neutral-midnight;
        --symbol-wght: 400;
      }
    }
  }
  &__prev.icon-block-button {
    margin-left: auto;
  }
  &__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 19px;
  }
  /** Calendar icon weight */
  .material-design-symbol {
    --symbol-wght: 200;
  }
  /** Input styles */
  .text-field {
    //min-width: 160px;
    width: 100%;
    &__icon {
      z-index: 10;
    }
    &__input {
      color: $ds-core-color-neutral-cathedral;
      padding-right: 8px;
      &--activeText {
        color: $ds-color-input-text-color;
      }
    }
    &--active {
      @extend %form-field-focus;
    }
  }
  .dsbutton.dsbutton--ghost {
    background-color: transparent;
    &:hover {
      background-color: transparent;
    }
    .material-design-symbol {
      --symbol-wght: 400;
    }
  }
}

.dsbutton__text {
  align-items: center;
  display: flex;
  gap: 12px;
}

.k-calendar-tr.k-calendar-weekdays {
  font-size: 16px;
}
/** Adds gap between columns */
.k-calendar-table {
  border-spacing: 6px;
  width: 100%;
}
.k-calendar-range .k-calendar-view {
  width: 324px;
}
.dsbutton.dsbutton--text {
  display: flex;
  margin: auto;
}
.k-calendar-td {
  .k-link {
    font-weight: 400;
    font-size: 18px;
    padding: 6px 12px;
    border: 2px solid transparent;
    line-height: 24px;
  }
}
/** Weekday styles */
.k-calendar .k-calendar-th,
.k-calendar .k-calendar-caption,
.k-calendar .k-meta-header,
.k-calendar .k-month-header {
  color: $ds-core-color-neutral-asphalt;
  padding-inline: 10px;
}

.k-input-solid:hover {
  border-color: #bcbec0;
}
/** Date picker input text styles */
.k-input-inner {
  font-size: 18px;
  font-weight: 400;
  color: lightgray;
}

.k-calendar-view {
  min-height: 0;
}

/** Hides kendo toggle button */
.k-button.k-icon-button.k-button-solid.k-button-solid-base.k-input-button {
  display: none;
}
/** Prevents kendo nav from showing */
.k-calendar-header {
  justify-content: flex-end;
  .k-calendar-nav {
    display: none;
  }
  .k-spacer {
    display: none;
  }
  &.k-hstack {
    display: flex;
  }
}

/** Removes border and box-shadow from kendo date picker */
.k-input,
.k-input-solid {
  border-style: none;
}
.k-input-solid:focus,
.k-input-solid.k-focus {
  border-color: transparent;
  box-shadow: none;
}

/** Border radiuses added to prevent weird corner flecks */
.k-popup {
  border: 0;
  border-radius: $ds-shape-border-radius-m;
  margin-top: 4px;
}
.k-calendar-container .k-calendar,
.k-datetime-container .k-calendar {
  border-radius: $ds-shape-border-radius-m;
}
/** Current month and date styles */
.k-calendar-td.k-today {
  .k-link {
    background-color: $ds-core-color-neutral-white;
    color: black;
    border-bottom: 1.5px solid #7c7571;
  }
}
.k-calendar .k-calendar-cell-inner,
.k-calendar .k-link {
  border-radius: 2px;
}

.k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
  background-color: var(--ds-date-atom-bg-color-active);
}
/** Removes box shadow focus on unselected days */
.k-calendar .k-calendar-td:focus .k-calendar-cell-inner,
.k-calendar .k-calendar-td:focus .k-link,
.k-calendar .k-calendar-td.k-focus .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-focus .k-link {
  box-shadow: none;
}
/** Hover styles */
.k-calendar .k-calendar-td:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td:hover .k-link,
.k-calendar .k-calendar-td.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-hover .k-link {
  background-color: $ds-core-color-neutral-white;
  border: 1.5px solid $ds-core-color-neutral-midnight;
  border-radius: $ds-shape-border-radius-s;
  color: $ds-core-color-neutral-midnight;
}

/** Selected Date Styles */
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link {
  background-color: var(--ds-date-atom-bg-color-active);
  color: $ds-core-color-neutral-white;
  border-radius: $ds-shape-border-radius-s;
  &:hover {
    background-color: var(--ds-date-atom-bg-color-active);
    border: 2px solid var(--ds-date-atom-bg-color-active);
    border-color: var(--ds-date-atom-bg-color-active);
    color: $ds-core-color-neutral-white;
  }
}
</styles>
Cassie
Top achievements
Rank 1
 asked on 20 May 2024
1 answer
14 views

I've just created a new vue project and tried to install some components: 

pnpm i @progress/kendo-date-mat @progress/kendo-data-query @progress/kendo-drawing @progress/kendo-licensing @progress/kendo-svg-icons @progress/kendo-theme-fluent @progress/kendo-vue-animation @progress/kendo-vue-buttons @progress/kendo-vue-common @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dialogs @progress/kendo-vue-dropdowns @progress/kendo-vue-form @progress/kendo-vue-indicators @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-labels @progress/kendo-vue-layout @progress/kendo-vue-notification @progress/kendo-vue-upload

Result is:
.
├─┬ @progress/kendo-vue-buttons 5.0.0
│ └── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
├─┬ @progress/kendo-vue-data-tools 5.0.0
│ ├── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-animation@^4.0.0: found 5.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-buttons@^4.0.0: found 5.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-dateinputs@^4.0.0: found 5.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-dropdowns@^4.0.0: found 5.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-inputs@^4.0.0: found 5.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-intl@^4.0.0: found 5.0.0
│ └── ✕ unmet peer @progress/kendo-vue-popup@^4.0.0: found 5.0.0
├─┬ @progress/kendo-vue-dateinputs 5.0.0
│ ├── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-intl@^4.0.0: found 5.0.0
│ └─┬ @progress/kendo-vue-labels 5.0.0
│   └── ✕ unmet peer @progress/kendo-vue-intl@^4.0.0: found 5.0.0
├─┬ @progress/kendo-vue-dialogs 5.0.0
│ ├── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
│ └── ✕ unmet peer @progress/kendo-vue-intl@^4.0.0: found 5.0.0
├─┬ @progress/kendo-vue-dropdowns 5.0.0
│ ├── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-inputs@^4.0.0: found 5.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-intl@^4.0.0: found 5.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-labels@^4.0.0: found 5.0.0
│ └── ✕ unmet peer @progress/kendo-vue-layout@^4.0.0: found 5.0.0
├─┬ @progress/kendo-vue-form 5.0.0
│ └── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
├─┬ @progress/kendo-vue-inputs 5.0.0
│ ├── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
│ └── ✕ unmet peer @progress/kendo-vue-intl@^4.0.0: found 5.0.0
├─┬ @progress/kendo-vue-layout 5.0.0
│ ├── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
│ ├── ✕ unmet peer @progress/kendo-vue-intl@^4.0.0: found 5.0.0
│ └── ✕ unmet peer @progress/kendo-vue-progressbars@^4.0.0: found 5.0.0
├─┬ @progress/kendo-vue-notification 5.0.0
│ └── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
├─┬ @progress/kendo-vue-upload 5.0.0
│ ├── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
│ └─┬ @progress/kendo-vue-progressbars 5.0.0
│   └── ✕ unmet peer @progress/kendo-vue-animation@^4.0.0: found 5.0.0
├─┬ @progress/kendo-vue-treeview 4.3.3
│ ├── ✕ unmet peer @progress/kendo-svg-icons@^2.0.0: found 3.0.0
│ └── ✕ unmet peer @progress/kendo-vue-animation@^4.0.0: found 5.0.0
└─┬ @ris_dev/base-vue 1.7.6
  └─┬ @progress/kendo-vue-editor 4.3.3
    ├── ✕ unmet peer @progress/kendo-vue-buttons@^4.0.0: found 5.0.0
    ├── ✕ unmet peer @progress/kendo-vue-dropdowns@^4.0.0: found 5.0.0
    ├── ✕ unmet peer @progress/kendo-vue-inputs@^4.0.0: found 5.0.0
    ├── ✕ unmet peer @progress/kendo-vue-intl@^4.0.0: found 5.0.0
    ├── ✕ unmet peer @progress/kendo-vue-popup@^4.0.0: found 5.0.0
    ├── ✕ unmet peer @progress/kendo-vue-layout@^4.0.0: found 5.0.0
    ├── ✕ unmet peer @progress/kendo-vue-dialogs@^4.0.0: found 5.0.0
    └── ✕ unmet peer @progress/kendo-vue-form@^4.0.0: found 5.0.0

The same happens if i try to add components to an existing project. Looks like the components need different versions of peer-dependencies like svg,...

Can this be ignored?

Please help!

Konstantin Dikov
Telerik team
 answered on 20 May 2024
2 answers
18 views

Hi,

I’ve been working with the grid and have applied grouping.
Following this, I attempted to introduce aggregations for each group. I’ve observed that this functionality is only available with cell rendering, which allows for customization of each cell.
I adhered to your provided example, but I noticed a complete transformation of the grid when more than one group is defined. I’m uncertain if this is the expected behavior.
Additionally, I’ve found that the groups can no longer be collapsed.


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

 

Thanks in advance, 
Ziggy 

Filip
Telerik team
 updated answer on 13 May 2024
1 answer
8 views

Hello, Kendo!

 

I use kedno UI for Vue3.
I have a question. When I use filter of DropDownList, can I customize the filter region like that?
I couldn't find filterRender Property.

 

thanks.

Konstantin Dikov
Telerik team
 answered on 11 May 2024
1 answer
16 views

Hi, kendo

 

I used the grid for reference "https://www.telerik.com/kendo-vue-ui/components/grid/columns/locked/"
At the same time, I added resizable props.

like this,

<template>
  <grid
    :style="{ height: '400px', width: '500px' }"
    :data-items="products"
    :reorderable="true"
    @columnreorder="columnReorder"
    :columns="columns"
    :resizable="true"
  >
  </grid>
</template>
<script>
import { Grid } from '@progress/kendo-vue-grid';
import { products } from './products';
export default {
  components: {
    grid: Grid,
  },
  data: function () {
    return {
      products: this.createRandomData(),
      columns: [
        { field: 'ProductID'title: 'ID'width: '45px'locked: true },
        { field: 'ProductName'title: 'Name'width: '250px'locked: true },
        {
          field: 'Category.CategoryName',
          title: 'CategoryName',
          width: '150px',
          locked: true,
        },
        { field: 'UnitPrice'title: 'Price'width: '90px' },
        { field: 'UnitsInStock'title: 'In stock'width: '90px' },
        { field: 'UnitsOnOrder'title: 'On order'width: '90px' },
        { field: 'Discontinued'locked: truewidth: '120px' },
        {
          field: 'QuantityPerUnit',
          title: 'Additional details',
          width: '250px',
        },
      ],
    };
  },
  methods: {
    columnReorder: function (options) {
      this.columns = options.columns;
    },
    createRandomData() {
      return products;
    },
  },
};
</script>

 

I resized "Name" column, then I could see the bug that a gap has occurred between Name and CategoryName.

Can I fix it?

 

Filip
Telerik team
 answered on 10 May 2024
1 answer
11 views

The editor inserts a paragraph (<p></p>) each time Enter is pressed.
A line break (<br />) is only inserted with Shift+Enter.

How can this be changed so that Enter inserts a <br /> and Shift-Return inserts a <p></p>?

Vessy
Telerik team
 answered on 07 May 2024
2 answers
17 views

Hello,

We want to have translations in Spanish, French and Portuguese for the users of our application who use such languages. We managed to translate all editor components, "Font Name", "Font Size". All successful except for the "FormatBlock". 

In the FormatBlock dropdown, Kendo UI Rich Text editor is missing the translations and we will open a support case to request the feature.


In the meantime, we tried to do it ourselves. We implemented this 

            <LocalizationProvider :language="language">
                <Editor
                    ref="editor"
                    :tools="tools"
                    :content-style="{
                        height: '160px',
                        width: '100%'
                    }"
                    :value="richTextValue"
                    @change="onChange"
                    @blur="onBlur"
                    >
                    <template v-slot:Pop2FormatBlockTool="{ props }">
                        <formatblock v-bind="props" />
                    </template>
                </Editor>
            </LocalizationProvider>


Of course, where, of course, we included this in the tools array:

        { render: "Pop2FormatBlockTool", props: this.pop2FormatBlockToolSettings },


Then we defined these variables in our Vue component, with default values

    kendoFormatBlockP: string = "P"
    kendoFormatBlockH1: string = "H1"
    kendoFormatBlockH2: string = "H2"
    kendoFormatBlockH3: string = "H3"
    kendoFormatBlockH4: string = "H4"
    kendoFormatBlockH5: string = "H5"
    kendoFormatBlockH6: string = "H6"
    pop2FormatBlockToolSettings: any = {
        ...EditorToolsSettings.formatBlock,
        items: [
            { text: this.kendoFormatBlockP, value: "p" },
            { text: this.kendoFormatBlockH1, value: "h1" },
            { text: this.kendoFormatBlockH2, value: "h2" },
            { text: this.kendoFormatBlockH3, value: "h3" },
            { text: this.kendoFormatBlockH4, value: "h4" },
            { text: this.kendoFormatBlockH5, value: "h5" },
            { text: this.kendoFormatBlockH6, value: "h6" }
        ]
    }


And we tried calling this method in beforeMounted() and mounted() to override the default values with the $t translations...

    initializeCustomTranslations(): void {
        this.kendoFormatBlockP = "Párrafo" // this.$t("telerik.editor.formatblock.p")
        this.kendoFormatBlockH1 = this.$t("telerik.editor.formatblock.h1")
        this.kendoFormatBlockH2 = this.$t("telerik.editor.formatblock.h2")
        this.kendoFormatBlockH3 = this.$t("telerik.editor.formatblock.h3")
        this.kendoFormatBlockH4 = this.$t("telerik.editor.formatblock.h4")
        this.kendoFormatBlockH5 = this.$t("telerik.editor.formatblock.h5")
        this.kendoFormatBlockH6 = this.$t("telerik.editor.formatblock.h6")
    }

But translation do not load and we lost the format (Heading 1 bigger than Heading 6).

Do you have any clue of what is going on, that prevents us from loading translations, and how to restore the format that we get in English? 


Thanks for the help

Lucía

Lucía
Top achievements
Rank 1
Iron
 answered on 06 May 2024
1 answer
14 views
Hi Team,

I've recently updated all my kendo modules in my Vue application. I licensed the Kendo UI Vue components via NPM which worked perfectly. The Vue native Grid worked without licensing warning. Everythinmg fine here.

But I also use the Kendo Chart element (wrapper) in Vue , which is obviously to be licensed by the kendo-ui-license.js. 
I placed it in the right spot and in my main.ts and added the import statement right after the kendo-ui entry like the recommendation is stating:

import '@progress/kendo-ui';
import "./kendo-ui-license.js";

Unfortunately I get the error "'KendoLicensing' is not defined". Seems that the timing with kendo.all.min.js is not working along here?

What am I missing? What would be the proper approach to install the proper licensing in a Vue application?


Best regards
Oliver

 

Plamen
Telerik team
 answered on 01 May 2024
1 answer
24 views

Hello, is there any chances to disable or do not display the validation dialog upon using the Input component. Based on this example, I want to use the Error component for displaying the validation as Text and I will no longer use the validation dialog.

Btw, I'm using Kendo UI for Vue

Konstantin Dikov
Telerik team
 answered on 26 Apr 2024
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
Editor
DatePicker
DropDownTree wrapper
Spreadsheet wrapper
Scheduler
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
Chart wrappers (package)
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Window
Error
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
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
FloatingLabel
TextArea
Drawer
Stepper
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
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?