Having a label right underneath an icon button for command column

[Wei Cheng]

Our user would like to have a label underneath the icon of a command column, and also ideally we should be able to hide and show the icon and label together based upon the data of the grid row.

[Rajapandiyan Settu]

Hi Wei,

Thanks for contacting Syncfusion support.

By using the content and iconCss properties of the buttonOption, you can render the text and icons in the command column.

Command column: https://ej2.syncfusion.com/javascript/documentation/grid/editing/command-column-editing/#custom-command-column

You can dynamically hide the command button based on row data by adding a custom CSS class in the queryCellInfo event.

QueryCellInfo: https://ej2.syncfusion.com/vue/documentation/api/grid/#querycellinfo

When you click the command button, the commandClick event will be triggered. In that event you can perform your action based on the event arguments.

commandClick: https://ej2.syncfusion.com/vue/documentation/api/grid/#commandclick

 

[App.vue]

 

<template>

  <div id="app">

    <ejs-grid

      ref="grid"

      :dataSource="data"

      :editSettings="editSettings"

      :commandClick="commandClick"

      :queryCellInfo="queryCellInfo"

      height="310px"

      width="1000px"

    >

      <e-columns>

        <e-column

          headerText="Commands"

          width="150"

          :commands="commands"

        ></e-column>

      </e-columns>

    </ejs-grid>

  </div>

</template>

<script>

---

export default {

  data() {

    return {

      data: gridData,

      editSettings: { allowEditing: true, allowDeleting: true },

      commands: [ // define all the command buttons here

        {

          buttonOption: {

            content: "btn1",

            cssClass: "e-flat btn1",

            iconCss: "btn1_icon e-icons",

          },

        },

        {

          buttonOption: {

            content: "btn2",

            cssClass: "e-flat btn2",

            iconCss: "btn2_icon e-icons",

          },

        },

        {

          buttonOption: {

            content: "btn3",

            cssClass: "e-flat btn3",

            iconCss: "btn3_icon e-icons",

          },

        },

      ],

    };

  },

  provide: {

    grid: [Page, Edit, Toolbar, CommandColumn],

  },

  methods: {

    commandClick: function (args) {

       // do your action here

        console.log(args)

      alert(JSON.stringify(args.rowData));

    },

    queryCellInfo: function (args) {

      if (args.column.commands) {

        // add a custom class on the command button based on Status field value

        if (args.data["Status"].trim().toLowerCase() === "new") {

          args.cell.querySelector(".btn3").classList.add("hidebtn");

        } else {

          args.cell.querySelector(".btn1").classList.add("hidebtn");

          args.cell.querySelector(".btn2").classList.add("hidebtn");

        }

      }

    },

  },

};

</script>

<style>

.hidebtn {

  display: none;  // hide the element

}

.e-grid .btn1_icon::before {

  content: "\e349";

}

.e-grid .btn2_icon::before {

  content: "\e30c";

}

.e-grid .btn3_icon::before {

  content: "\e426";

}

</style>

 

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

Please get back to us if you need further assistance with this.

Regards,

Rajapandiyan S