Search results

Customize the icon for column menu in Vue Grid component

You can customize the column menu icon by overriding the default grid class .e-icons.e-columnmenu with a custom property content as mentioned below,

.e-grid .e-columnheader .e-icons.e-columnmenu::before {
              content: "\e941";

In the below sample, grid is rendered with a customized column menu icon.

    <div id="app">
        <ejs-grid ref='grid' :dataSource='data':showColumnMenu='true' height='315px' >
                <e-column field='OrderID' headerText='Order ID' width=90></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' width=90></e-column>
               <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
import Vue from "vue";
import { GridPlugin, ColumnMenu } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';


  export default {
    data() {
      return {
        data: data
  provide: {
    grid: [ColumnMenu]
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
  .e-grid .e-columnheader .e-icons.e-columnmenu::before {
              content: "\e941";