Registering Icon information for DataGrid Toolbar

[William Morgenweck]

Hi,

On page

https://ej2.syncfusion.com/vue/documentation/grid/tool-bar/tool-bar-items/

You are adding a custom Toolbar item.  I'm in the process of adding a Word Export command but was wondering how to either register the location of my icon or to possible to use a built in Word looking icon 

Thanks

 toolbar: [{ text: 'Expand All', tooltipText: 'Expand All', prefixIcon: 'e-expand', id: 'expandall' },{ text: 'Collapse All', tooltipText: 'collection All', prefixIcon: 'e-collapse', id: 'collapseall' , align:'Right'}],

[Rajapandi Ravi]

Hi William,

Greetings from Syncfusion support

We have checked your query and we could see that you like to display the word looking icon in the custom toolbar button. You can display the icon by defining the respective CSS content. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement.

 

<template>

  <div id="app">

    <ejs-grid

      ref="gridObj"

      :dataSource="data"

      :allowPaging="true"

      :toolbar="toolbar"

    >

      <e-columns>

        .  .  .  .  .  .  .  .

        .  .  .  .  .  .  .  .

      </e-columns>

    </ejs-grid>

  </div>

</template>

<script>

import Vue from "vue";

 

export default {

  data() {

    return {

      data: gridData,

      toolbar: [

        {

          text: "Export",

          tooltipText: "Expand All",

          prefixIcon: "e-icons e-export-word",

          id: "export",

        },

      ],

    };

  },

  methods: {},

  provide: {

    grid: [Toolbar],

  },

};

</script>

 

<style>

@import "https://cdn.syncfusion.com/ej2/material.css";

</style>

<style>

.e-export-word:before {

  content: "\e7b0";

}

</style>

 

Sample: https://codesandbox.io/s/vue-template-forked-vici3r?file=/src/App.vue

Screenshot:

You can use custom icons as you want by defining the respective CSS content. Please refer the below documentation for more information.

Icons: https://ej2.syncfusion.com/vue/documentation/appearance/icons/#material

Regards,

Rajapandi R

[William Morgenweck]

As always-- PERFECT

[Rajapandi Ravi]

Hi William,

Thanks, let us know if you need any assistance.

Regards,

Rajapandi R