Kendo vue UI Grid column with Vue bootstrap Form Datepicker calender is not showing completly inside the grid column cell

[Jaydeep]

We have a Kendo vue UI Grid column with Vue bootstrap Datepicker as a custom column.

When we click the calender icon it is partially showing inside the cell. I want it to be show as an popup outside the cell.

Below is the code snippet from the custom cell component

<template>

 <td class="cell-editable">
    <b-input-group>
      <b-form-input
        :value="aufValue | date"
        type="text"
        placeholder="tt.mm.jjjj"
        :disabled="!canEdit"
      ></b-form-input>
      <b-input-group-append>
        <b-form-datepicker
          size="sm"
          button-only
          :value-as-date="true"
          v-model="aufValue"
          locale="de-AT"
          :disabled="!canEdit"
        ></b-form-datepicker>
      </b-input-group-append>
    </b-input-group>
  </td>

<template>

right now it show like the attached screenshot:

Please suggest a solution for achieving the same.

Thank You

[Veselin Tsvetanov]

Hi Jaydeep,

From the screenshot sent I can see that the Vue Bootstrap DatePicker is rendered inside the Kendo Grid cell. That prevents its popup from being visible. As the integration of the Vue Bootstrap DatePicker in the Kendo Vue Grid has not been tested, I would suggest you to use the Kendo Vue native DatePicker instead:

https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/

It should properly display in the Grid component.

Regards,
Veselin Tsvetanov
Progress Telerik