Questions on Kendo UI for Vue Forum

1 answer

86 views

Hey! We're trying to display events on the Scheduler Monthly view, but we cannot move it so we can see which day of the month it actually is.

We've tried editing the margins of the SchedulerViewItem and that works, however, then we have a gap between each one of the events of the calendar, but we'd like just the first event to move down, just so we can see which day of the month it actually is.

Thanks!

Scheduler

answered on 01 Jul 2024

1 answer

105 views

Spreadsheet Excel

Hello,

Spreadsheet how to get excel blob? Or print or export excel and upload the file stream yourself?

Button

answered on 20 Jun 2024

1 answer

71 views

ComboBox item-render drop down position way off.

using ComboBox and a custom item render, the .k-animation-container is way off.

When you hit full screen on the browser it goes to the correct position.

ComboBox

answered on 18 Jun 2024

1 answer

66 views

Can the datetimepicket time icon click call a custom function

I am using Kendo datetimepicker in a VueJS app.

Is there a way to display the Calendar and Time icons as below, but change the Time icon "click" to call a custom function?

I still want the calendar icon to work as normal. I just want the time icon to call one of my functions and not to display the time values.

DateTimePicker

answered on 14 Jun 2024

0 answers

139 views

Dropdows - Wrong position of popup

We have the problem that the popup of dropdowns (DropDownList, ComboBox,...) are displayed in the wrong position. This only happens if the data is an object and the display property is a long text. As the drop-down list is moved to the left, the error disappears. How far to the left depends on how long the texts are.

DropDownList

asked on 14 Jun 2024

1 answer

76 views

ComboBox and slots / exposed props

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>

ComboBox

updated answer on 14 Jun 2024

0 answers

83 views

DropDownTree won't close when filtering

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

DropDownList

asked on 12 Jun 2024

1 answer

170 views

DatePicker Popupsettings appendTo correct implementation

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

DatePicker

Popup

answered on 05 Jun 2024

1 answer

99 views

Authorization problem

hi！

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

Spreadsheet wrapper

answered on 27 May 2024

0 answers

378 views

Kendo Date Picker Overriding Custom Styles

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>

DatePicker

asked on 20 May 2024