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

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

My Update query:

Hello,
We use kendo for Vue and tried implementing a DateInput element in our Vue app.

When we try to use this element on a smartphone, we hoped it will use the OS date input, just like it works with any <input> element of type “date”. But we found it is rendered as type “text”.

This means the UX is not as good as we hoped it will be.
Is there a way to render it as <input> of type “date” so it will behave accordingly?

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

Thanks,

Ron.

I need a grid with multi-header and frozen columns.

The problem is that on multi-header grid only the child is locked and the parent behaves like a regular column (disappears when scrolling right)

See demo at https://stackblitz.com/edit/qjgucz (The ID column supposed to be locked)

Any help is appreciated

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

My kendo-datasource  have  transport-read: GridDataSource , and in a same page i have input field to collect  input number ,  when ever i keein in the input field each key in time GridDataSource function also getting called , it should not happen for me . any idea ?

<input
                                    :name="'challanno'"
                                    :disabled="!isEdit"
                                    v-ec-disabled="!isEdit"
                                    :ec-type="'text'"
                                    v-model="challanno"
                                    v-ec-validate="{required: true}"
                                    v-ec-validate:fieldName="'Challan no'" />

<kendo-datasource ref="maingridsourcenew"
                            :type="json"
                            :transport-read="GridDataSource"
                            :batch="false"
                            :server-paging="false"
                            :server-sorting="false"
                            :page-size="10"
                             :schema-model-id="'_id'"
                             :schema-model-fields="schemaModelFields"
                            :schema-data="'data'"
                            :schema-total="'total'">
                        </kendo-datasource>

  GridDataSource(ev) {
            console.log("testinggrid---------->")
            ev.success({
                        data: [],
                        total: 0
                    });
        },

I was glad to hear, that the new release supports Vue 3. So I just started building a new app with Vue 3 TypeScript and wanted to use the Native Kendo Controls. But I have problems to set things up. With Vue 2 and JavaScript I had no problems with Kendo. But now it seems just not to work.

I also cannot find any documentation on that topic. It would be realy disapointing if it is missing. Maybe I'm just blind.

The API docs show icon-class as the method for custom icons on the button wrapper - https://www.telerik.com/kendo-vue-ui/components/buttons/api/button/Button/#icon-class

I cannot get this to work - is this possible?