We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Vue
  4. How to show the toolbar in both top and bottom of the Vue Grid

How to show the toolbar in both top and bottom of the Vue Grid

Is it possible to show this in both locations?  Right now it's just on the top.

I need these toolbar items 
 toolbar:  [
                'Add',
                'Delete',
                'Update',
                'Cancel',
                'ExcelExport',
                'CsvExport',
                'PdfExport',
                'Print',
                //'ColumnChooser',
                'Search'
            ]

1 Reply 1 reply marked as answer
AG Ajith Govarthan Syncfusion Team March 3, 2021 03:59 AM UTC

Hi Fereydoon, 
 
Thanks for contacting Syncfusion support. 
 
Query: Is it possible to show this in both locations?  Right now it's just on the top. 
 
Based on your query you want to show the toolbar in both top and bottom location of the grid component. So, we have prepared sample in that we have rendered an external toolbar component below the Grid component and bound all the needed toolbar items and event to perform the Grid actions in the bottom toolbar also. For your convenience we have attached the sample so please refer them for your reference.  
 
Code Example: 
App.vue 
 
<template> 
  <div> 
    <ejs-grid 
      ref="grid" 
      height="300" 
      :dataSource="data" 
      :toolbar="toolbar" 
      :editSettings="editing" 
      allowPaging="true" 
      allowPdfExport="true" 
      allowExcelExport="true" 
      :pageSettings="pageSettings" 
      :selectionSettings="selectOptions" 
      :dataBound="dataBound" 
      :actionBegin="actionBegin" 
      :toolbarClick="toolbarclick" 
    > 
      <e-columns> 
        <e-column 
          field="OrderID" 
          headerText="Order ID" 
          textAlign="Right" 
          clipMode="EllipsisWithTooltip" 
        ></e-column> 
        <e-column 
          field="CustomerID" 
          headerText="Customer Name" 
          clipMode="EllipsisWithTooltip" 
        ></e-column> 
        <e-column 
          field="OrderDate" 
          headerText="Order Date" 
          format="yMd" 
          textAlign="Right" 
          clipMode="EllipsisWithTooltip" 
        ></e-column> 
        <e-column 
          field="Freight" 
          headerText="Freight" 
          format="C2" 
          textAlign="Right" 
          clipMode="EllipsisWithTooltip" 
        ></e-column> 
        <e-column 
          field="ShipName" 
          headerText="Ship Name" 
          clipMode="EllipsisWithTooltip" 
        ></e-column> 
        <e-column 
          field="ShipCountry" 
          headerText="Ship Country" 
          editType="dropdownedit" 
          :edit="countryParams" 
          clipMode="EllipsisWithTooltip" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
    <ejs-toolbar 
      :created="onCreated" 
      ref="toolbar" 
      :clicked="toolbarClickExternal" 
    > 
      <e-items class="e-tbar-pos"> 
        <e-item text="Add" id="extAdd" prefixIcon="e-add"></e-item> 
        <e-item id="extEdit" text="Edit" prefixIcon="e-edit"></e-item> 
        <e-item text="Delete" id="extDelete" prefixIcon="e-delete"></e-item> 
        <e-item id="extUpdate" text="Update" prefixIcon="e-update"></e-item> 
        <e-item id="extCancel" text="Cancel" prefixIcon="e-cancel"></e-item> 
        <e-item id="extPdf" text="PDF Export" prefixIcon="e-pdfexport"></e-item> 
        <e-item 
          text="Excel Export" 
          id="extExcel" 
          prefixIcon="e-excelexport" 
        ></e-item> 
        <e-item text="CSV Export" id="extCsv" prefixIcon="e-csvexport"></e-item> 
        <e-item text="Print" id="extPrint" prefixIcon="e-print"></e-item> 
 
        <e-item :template="Template1" width="200"></e-item> 
      </e-items> 
    </ejs-toolbar> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { 
  GridPlugin, 
  Edit, 
  Page, 
  Toolbar, 
  PdfExport, 
  ExcelExport, 
  ContextMenu, 
} from "@syncfusion/ej2-vue-grids"; 
import { gridData } from "./data"; 
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations"; 
 
import { Query } from "@syncfusion/ej2-data"; 
import { TextBoxPlugin } from "@syncfusion/ej2-vue-inputs"; 
let country = [ 
  { countryName: "United States", countryId: "1" }, 
  { countryName: "Australia", countryId: "2" }, 
  { countryName: "India", countryId: "3" }, 
]; 
 
Vue.use(TextBoxPlugin); 
Vue.use(GridPlugin); 
Vue.use(ToolbarPlugin); 
 
export default Vue.extend({ 
  data: () => { 
    return { 
      data: gridData, 
      pageSettings: { pageSize: 12 }, 
      Template1: function () { 
        return { 
          template: Vue.component("TextBoxComponent", { 
            template: `<div class="e-toolbar-item e-search-wrapper"  title="Search"> <input id="searchEleExt"  class="e-input"  placeholder="Search" style="width: 200px;">  <span  class="e-input-group-icon e-search-icon e-icons" tabindex="-1" title="Search" aria-label="search"></span> </div></div>`, 
            data() { 
              return {}; 
            }, 
          }), 
        }; 
      }, 
      toolbar: [ 
        "Add", 
        "Edit", 
        "Delete", 
        "Update", 
        "Cancel", 
        "Search", 
        "PdfExport", 
 
        "ExcelExport", 
        "CsvExport", 
        "Print", 
      ], 
 
      editing: { 
        allowAdding: true, 
        allowDeleting: true, 
        allowEditing: true, 
        showDeleteConfirmDialog: true, 
      }, 
      selectOptions: { type: "Multiple" }, 
      countryParams: { 
        params: { 
          allowFiltering: true, 
          dataSource: country, 
          fields: { text: "countryName", value: "countryName" }, 
          query: new Query(), 
          actionComplete: () => false, 
        }, 
      }, 
    }; 
  }, 
  methods: { 
    actionBegin: function (args) { 
      if (args.requestType === "beginEdit" || args.requestType === "add") { 
        this.$refs.toolbar.enableItems([0, 1, 2], false); 
        this.$refs.toolbar.enableItems([3, 4], true); 
      } 
 
      if (args.requestType === "save" || args.requestType === "cancel") { 
        this.$refs.toolbar.enableItems([0, 1, 2], true); 
        this.$refs.toolbar.enableItems([3, 4], false); 
      } 
    }, 
 
    toolbarclick: function (args) { 
      if (args.item.text === "PDF Export") { 
        this.$refs.grid.pdfExport(); 
      } 
 
      if (args.item.text === "Excel Export") { 
        this.$refs.grid.excelExport(); 
      } 
      if (args.item.text === "CSV Export") { 
        this.$refs.grid.csvExport(); 
      } 
    }, 
    toolbarClickExternal: function (args) { 
      if (args.item) { 
        if (args.item.id === "extAdd") { 
          this.$refs.grid.addRecord(); 
        } 
 
        if (args.item.id === "extEdit") { 
          this.$refs.grid.startEdit(); 
        } 
 
        if (args.item.id === "extDelete") { 
          this.$refs.grid.deleteRecord(); 
        } 
 
        if (args.item.id === "extUpdate") { 
          this.$refs.grid.endEdit(); 
        } 
 
        if (args.item.id === "extCancel") { 
          this.$refs.grid.closeEdit(); 
        } 
 
        if (args.item.id === "extPrint") { 
          this.$refs.grid.print(); 
        } 
        if (args.item.id === "extPdf") { 
          this.$refs.grid.pdfExport(); 
        } 
 
        if (args.item.id === "extExcel") { 
          this.$refs.grid.excelExport(); 
        } 
 
        if (args.item.id === "extCsv") { 
          this.$refs.grid.csvExport(); 
        } 
      } 
    }, 
    dataBound: function () { 
      document 
        .getElementById("searchEleExt") 
        .addEventListener("keydown", this.keydown); 
    }, 
 
    keydown(args) { 
      if (args.keyCode === 13) { 
        this.$refs.grid.search(args.target.value); 
      } 
    }, 
 
    onCreated: function () { 
      this.$refs.toolbar.enableItems([3, 4], false); 
    }, 
  }, 
  provide: { 
    grid: [Edit, Page, Toolbar, ContextMenu, ExcelExport, PdfExport], 
  }, 
}); 
</script> 
 
<style> 
.e-toolbar .e-btn-icon, 
.e-toolbar .e-tbar-btn-text { 
  color: black; 
} 
 
.e-toolbar .e-add::before, 
.e-grid-menu .e-add::before { 
  content: "\e7f9"; 
} 
.e-toolbar .e-edit::before, 
.e-grid-menu .e-edit::before { 
  content: "\e81e"; 
} 
 
.e-delete::before { 
  content: "\e84e"; 
} 
 
.e-grid .e-cancel::before, 
.e-cancel::before { 
  content: "\e825"; 
} 
 
.e-save::before, 
.e-grid-menu .e-save::before { 
  content: "\e98e"; 
} 
 
.e-update::before { 
  content: "\e735"; 
} 
.e-toolbar-item.e-template { 
  right: 0px; 
  position: absolute; 
  width: 25px; 
} 
 
.e-search-icon::before, 
.e-grid-menu .e-search-icon::before { 
  content: "\e993"; 
} 
 
.e-cancel-icon::before { 
  content: "\e825"; 
} 
 
.e-print::before, 
.e-grid-menu .e-print::before { 
  content: "\e813"; 
} 
 
.e-add::before, 
.e-grid-menu .e-add::before { 
  content: "\e7f9"; 
} 
 
.e-pdfexport::before, 
.e-grid-menu .e-pdfexport::before { 
  content: "\e240"; 
} 
 
.e-csvexport::before, 
.e-grid-menu .e-csvexport::before { 
  content: "\e241"; 
} 
 
.e-excelexport::before, 
.e-grid-menu .e-excelexport::before { 
  content: "\e242"; 
} 
 
@import "https://cdn.syncfusion.com/ej2/material.css"; 
 
/* .e-pager .e-icon-last::before { 
  content: "\E897"; 
} */ 
</style> 
 
 
 
API-Links: 
 
Please get back to us if you need further assistance, 
 
Regards, 
Ajith G. 
 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon