Custom Toolbar for grid (wrapper)

[Michael]

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

[Petar]

Hello Michael,

To add a custom Grid Toolbar in the Kendo UI Vue Grid Wrapper, you have to use the approach demonstrated in this Toolbar Template example.

If you need to add the default "Add", "Save", "Cancel changes" buttons, to your custom toolbar, this can be done using similar to be below code.

  var templateHtml =
    '<a role="button" class="k-button k-button-icontext k-grid-add" href="\\#">' +
    '<span class="k-icon k-i-plus"></span>Add new record' +
    "</a>" +
    "<span>" +
    '<a class="k-pager-refresh k-link k-button" title="Refresh"><span class="k-icon k-i-reload"></span></a>' +
    "</span>" +
    '<span style="position:absolute; right:5px">' +
    `<label class="category-label" for="category">Show products by category:</label>` +
    '<input type="search" id="category" style="width: 150px"/>' +
    "</span>";

  return kendo.template(templateHtml);
}

The code in yellow adds an "Add new record" button to the custom Toolbar. 

I hope the above will help you implement the targeted functionality in the application you are working on.

Regards,
Petar
Progress Telerik

[Michael]

Hello Petar,

thanks, it is working.

I tried to find a way to avoid including html into scripts section.

 

Anyway, it is possible to insert a new new record not at the first line of the grid?

Best regards,

Michael

[Petar]

Hello Michael,

The Grid provides an option to insert the new record at the end of the records. This configuration can be set using the "editable-create-at" property of the component. 

Here is a StackBlitz example demonstrating the usage of the linked prop.

Regards,
Petar
Progress Telerik