I am using custom screens and UI to interact with the scheduler so I am overriding the default behviour eg. fFor the 'edit' event I call e.preventDefault() and then show my screen to do whatever is necessary.

 

I can't figure out how to do this for 'remove' though as it seems that the remove event only fires after the built-in "do you want to delete the event" prompt is shown and ok is clicked.

I don't want to show any built-in UI but want to show my own delete confirmation and then do the delete api call manually - how is this possible?

When clicking on the month up at the top of the popup, the list of available months shows up for a second and then the calendar panel slides back in, preventing new month selection. What can be done to address this behavior and let user pick the new month from the list?

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

Hello,

In current implementation of the our web application - we use Kendo UI for jQuery. We decided to implement new pages inside our application using Kendo UI for VueJs. In current implementation we have a lot of grids with filters (filter icon + filter popup) in the column header (similar to https://demos.telerik.com/kendo-ui/grid/filter-menu-customization). But we can't find any examples of such implementation for native Kendo Vue Grid.

Is it possible? We need to have consistent behavior of grid filters and user experience all over our application for jQuery and VueJs implementation.

Thank you in advance

Precepts:   

> Kendo UI for Vue - Scheduler (using typescript)

> using :editable-template (with template imbedded into script in the markup)

I want to be able to hook into the destroy (editable-destroy option) such that when executed, I can call my own function to manage the event.
If possible, I would even like to manage (alter or even possibly replace) the default delete confirmation modal.

Can anyone help me figure out how this can be accomplished?

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.

I am facing issue with display number of rows in a particular group header in kendo grid group header template in single file component in Vue.


This is my code.

Hallo,

I am trying to include a custom toolbar into the vue template.

<template>
  <div class="page">
    <h1>Author</h1>
    <client-only>
      <kendo-datasource ref="ds"
          :schema-model-id="'id'"
          :schema-model-fields="model"
          :schema-data="schema"

          :transport-create-beforeSend="onBeforeSend"
          :transport-create-url="'http://192.168.1.11:8000/graphql'"
          :transport-create-content-type="'application/json'"
          :transport-create-type="'POST'"
          :transport-create-data="additionalParamsOnCreate"

          :transport-read-beforeSend="onBeforeSend"
          :transport-read-url="'http://192.168.1.11:8000/graphql'"
          :transport-read-content-type="'application/json'"
          :transport-read-type="'POST'"
          :transport-read-data="additionalParamsOnRead"

          :transport-update-beforeSend="onBeforeSend"
          :transport-update-url="'http://192.168.1.11:8000/graphql'"
          :transport-update-content-type="'application/json'"
          :transport-update-type="'POST'"
          :transport-update-data="additionalParamsOnUpdate"

          :transport-destroy-beforeSend="onBeforeSend"
          :transport-destroy-url="'http://192.168.1.11:8000/graphql'"
          :transport-destroy-content-type="'application/json'"
          :transport-destroy-type="'POST'"
          :transport-destroy-data="additionalParamsOnDestroy"

          :page-size="20"
          :transport-parameter-map="parameterMap">
      </kendo-datasource>
      <kendo-grid ref ="mainGrid"
                  :data-source-ref="'ds'"
                  :edit-field="'inEdit'"
                  :navigatable="true"
                  :pageable="true"
                  :editable="true">
          <!-- first try -->
          <!--
          :toolbar="["create"]"
          -->
          <!-- second try -->
          <!--   
          <GridToolbar class="k-header k-grid-toolbar">
            <button href="#" title="Add new" class="k-button k-button-icontext k-grid-add" @click="insert">
              Add new
            </button>
          </GridToolbar>
          -->
          <!-- third try -->
          <div class="k-header k-grid-toolbar">
            <a role="button" class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-i-plus" @click="testClick"></span> Command</a>
          </div>

          <kendo-grid-column :field="'id'"
                             :title="'ID'"
                             :width="80">
          </kendo-grid-column>
          <kendo-grid-column :field="'firstName'"
                             :title="'firstName'"
                             :width="80">
          </kendo-grid-column>
          <kendo-grid-column :field="'lastName'"
                             :title="'lastName'"
                             :width="80">
          </kendo-grid-column>
      </kendo-grid>
    </client-only>
    <kendo-notification ref="popupNotification"
        @show="onShow"
        @hide="onHide">
    </kendo-notification>

  </div>
</template>
<script>
import { Button } from '@progress/kendo-buttons-vue-wrapper';
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper';
import { KendoDataSource } from '@progress/kendo-datasource-vue-wrapper';
import { Notification } from '@progress/kendo-popups-vue-wrapper';
import { READ_AUTHORS_QUERY, ADD_AUTHOR_QUERY, UPDATE_AUTHOR_QUERY,DELETE_AUTHOR_QUERY } from '../graphql/author'
export default { 
  name: 'App',
  components: {
    'k-button': Button,
    'kendo-grid': Grid,
    'kendo-grid-column': GridColumn,
    'kendo-notification': Notification,
  },
  created: function() {
    console.log('created');

  },
  mounted: function() {
    console.log('mounted');
    this.popupNotificationWidget = this.$refs.popupNotification.kendoWidget();
    console.log('mounted2');
  },
  methods: {
    insert: function() {
      this.popupNotificationWidget.show('insert');
    },
    onClick: function (ev) {
        console.log("Button clicked!");
    },
    testClick: function (ev) {
        this.popupNotificationWidget.show('testClick');
        console.log("test clicked!");
    },
    onShow: function (e) {
      console.log("Show")
    },
    onHide: function (e) {
      console.log("Hide")
    },
    onBeforeSend: function(req) {
      let component = this;
      // req.setRequestHeader("Authorization", "bearer ...tokenstring...");
    },
    additionalParamsOnCreate: function(model) {
      return {
        query: ADD_AUTHOR_QUERY,
        variables: {author: model } 
      };
    },
    additionalParamsOnRead: function(model){
      console.log('additionalParamsOnRead')

      return {
        query: READ_AUTHORS_QUERY,
      };
    },
    additionalParamsOnUpdate: function(model){
        return {
        query: UPDATE_AUTHOR_QUERY,
        variables: {author: model }
      };    
    },
    additionalParamsOnDestroy: function(model){
      return {
        query: DELETE_AUTHOR_QUERY,
        variables: {author: model } 
      };
    },
    parameterMap: function(options, operation) {
      return  kendo.stringify({
        query: options.query,
        variables: options.variables
      });
    },
    schema: function (response) {
      var data = response.data;
      if (data.authors) {
        return data.authors;
      } else if (data.AddAuthor) {
        return data.AddAuthor;
      } else if (data.UpdateAuthor) {
        return data.UpdateAuthor;
      } else if (data.DeleteAuthor) {
        return data.DeleteAuthor;
      }
    },
  },

  data: function() {
    return {
      model: {
        id: "id",
        fields: {
          id: { editable: false, nullable: true },
          firstName: { type: "string" },
          lastName: { type: "string" }
        }
      }
    }
  }
}
</script>
<style>
</style>
The fist try with built-in function works: a new empty record ist displayed in first lineof the grid.

The second and third try call the methods, but no new empty record is generated.

I cannot get this to work - is this possible?

Regards,

Michael

Hello

I have a question about the tooltip function.

I've made a modification to Tooltip-Multiple Targets.

-remove width props
-Tooltip insertion for each language

https://www.telerik.com/kendo-vue-ui/components/popups/tooltip/multiple-targets/

If you hover over a long tooltip, it will appear properly, but if you check the short tooltip first and then try to see the long tooltip, the tooltip's width will be shortened.

Hopefully the width will be adjusted to auto.

 

<div id="vueapp" class="vue-app">
    <kendo-tooltip ref="kTooltip" id="agglomerations" :filter="'span'"  :position="'bottom'">
        <span href="#" title="방탄소년단·태연, '서울가요대상' 앨범·음원 대상…엑소 4관왕(종합)">Korean</span><br /><br />
        <span href="#" title="방탄" id="losangeles">Korean - Short</span><br /><br /> 
        <span href="#" title="Apple Music is available in iTunes, and for iOS and Android devices.">English</span><br /><br />
<span href="#" title="BTS" id="osaka">English - Short</span><br /><br />
        <span href="#" title="注文書、請求書などを装ったメールに添付された Excel ファイルに注意">Japanese</span><br /><br />
        <span href="#" title="注意" id="moscow">Japanese - Short</span>
    </kendo-tooltip>
</div>

Is it possible to bind buttons created in a ToolbarTemplate for a grid in vuejs ?

The purpose is to enable/disable button if a row is selected or not