Hello all,

I am using kendo Editor.

<editor :resizable-content="true"
                    :resizable-toolbar="true"
                    v-model="footerBody"
                    style="height:280px;"
                    value=""
                    rows="10"
                    contenteditable="true"
                    cols="30"
                    ref="editor">
            </editor>

This one is going to have the default toolbar set.

What I want to do is to add one more tool to the default toolbar set.

What I have noticed is that when I set the tools like below, it is overwriting the default toolbar and putting there only the tools I put in the tools property. So, is there a way to add or remove a specific tool without altering and overwriting all the others from default?

Hi,

Im using kendo Scheduler  in my vue project. I need to customize the scheduler header. First image is the default header I'm getting. I need to customize it as shown in the second image.I need to show the date and then a button to change the date and finally a button to go to current date. Is there a way to customize this scheduler header.

Thanks in advance.

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

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

It's possible to generate toolbar item based on array of object as below sample? I try but I hit v-for & v-if not allowed to use together.

I want to add a tab on the tabstrip in the Spreadsheet component. I have done so by adding this line of code to the toolbar attribute 

<spreadsheet ref="spreadsheet"
:toolbar="toolbar"

Where toolbar is a value in data that looks like 

toolbar = {
'custom': [
// for all available options, see the toolbar items configuration
// https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items
{
type: "button",
text: "Save",
showText: "both",
icon: "k-icon k-i-save",
click: function() {
      // Some code
}
},

However, this new tab shows up with the name 'undefined', next to the other tabs. Is there some way to give it a proper name? 

Hi,

I have the native grid set up in my vue application with Vuex and having issue getting the grouping feature to work.

I am not getting a response whenever I drag a column to the column header. The dragged column just not stay in the column header, it disappears afterward.

It seems my grid isn't emitting the onDataStateChange method. Not sure what I have done wrong.

Other gird features are working fine. 

Hi All,

         How can we create , show , hide button in grid using vue js