Hi there, I was wondering if there is any exposed props or any way to change the way the default list items look when rendering. 

What I am trying to achieve is each item showing a background color of the value of the data-item.

Essentially this

          <combo-box
            :data-items="sports"
          >
            <template #item="{ props }">
              <div :style="`background: ${props.item}`">
                {{ props.item }}
              </div>
            </template>
          </combo-box>

Hi,

I'm using a DropDownTree with an applied filter, and it works well.

However, when you click on the drop-down tree, the dropdown doesn’t close. It does close when you remove the filter. Is this intended behavior or a bug?

http://https://stackblitz.com/edit/yqd6w4?embed=1&file=src%2Fmain.vue

Thanks,
Ziggy

Hello, 

I want to append the DatePickerPopup to the div#app component in Vue, in order to style it and prevent some bugs, but I can't get it to work. 

This is the Datepicker component, contains popupSettings:

				<k-datepicker
					:id="id"
					ref="datepickerInstance"
					v-model="dateObj"
					:name="name"
					:placeholder="''"
                                        :popup-settings="popupSettings"
					:label="labelText"
					:required="required"
...

This is in <script> in data() 

		data() {
			return {
				popupSettings: {
					animate: false,
					appendTo: document.getElementById('app'),
					popupClass: 'k-datepicker-popup-test',
				},

animate and popupClass do work, but appendTo gives the following warning and doesn't work:

[Vue warn]: Invalid prop: type check failed for prop "appendTo". Expected String with value "[object HTMLDivElement]", got HTMLDivElement  

Looking at the API documentation, appendTo needs a HTMLElement, am I missing something? Thanks

hi！

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

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>

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!

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.

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,

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

Can I fix it?

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