1. Home
  2. Forum
  3. Vue
  4. How to add button in grid column.

How to add button in grid column.

Hello. I want to add button like following image in grid column.

So I tried using 'template' for column but any event fires if button clicked and fires 'rowSelected' and 'rowDeselected' events only.

How can I attach the click event in button?



Here's my source code.


// Button template
export const deleteTemplate = function () {
  return {
    template: Vue.component('deleteTemplate', {
      template: '<ejs-button class="btn btn-default" @click="deleteItem">Remove</ejs-button>',
      data: function () {
        return {
          data: {}
        }
      },
      methods: {
        deleteItem () {
          console.log('deleteItem', this.data)
        }
      }
    })
  }
}
<ejs-grid height="300" :dataSource="managedBpList" ref="managedBp"
          @rowSelected="selectedManaged">
  <e-columns>
    <e-column field="bpCd" headerText="코드"></e-column>
    <e-column field="bpNm" headerText="가맹점"></e-column>
    <e-column field="bpSttusNm" headerText="상태"></e-column>
    <e-column field="bpCd" headerText="삭제" :template="deleteTemplate"></e-column>
  </e-columns>
</ejs-grid>


Regards.

11 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team July 21, 2020 12:45 PM UTC

Hi Minkyu, 

Greetings from syncfusion support. 

Query :  I want to add button in grid column. 

We have validated your query and found that you need to render a button in each row and perform some operation in its click event. You can achieve your requirement by using command column feature. the commandClick event will be triggered when we click the button inside the command column. please refer the below code example and sample for more information. 


<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      :editSettings="editSettings" 
      :commandClick="commandClick" 
      height="310px" 
    > 
      <e-columns> 
        <e-column field="Commands" headerText="Commands" width="150" :commands="commands"></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { 
  GridPlugin, 
  Page, 
  Toolbar, 
  Edit, 
  CommandColumn 
} from "@syncfusion/ej2-vue-grids"; 
import { closest } from "@syncfusion/ej2-base"; 
import { data } from "./datasource.js"; 

Vue.use(GridPlugin); 

export default { 
  data() { 
    return { 
      data: data, 
      editSettings: { allowEditing: true, allowDeleting: true }, 
      commands: [ 
        { 
          buttonOption: { content: "Details", cssClass: "e-flat custombutton" } 
        }  // bind the button here 
      ] 
    }; 
  }, 
  provide: { 
    grid: [Page, Edit, Toolbar, CommandColumn] 
  }, 
  methods: { 
    commandClick: function(args) { 
// event will be triggered when we click the command column button 
      if (args.target.classList.contains("custombutton")) { 
// here you can perform the action as you want 
        console.log(args); 
        alert(JSON.stringify(args.rowData)); 
      } 
    } 
  } 
}; 
</script> 
<style> 
</style> 





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

Regards, 
Rajapandiyan S 


Marked as answer
MI Minkyu July 22, 2020 03:18 AM UTC

Thank you, Rajapandiyan Settu.

Works well! it was really helpful. 

RS Rajapandiyan Settu Syncfusion Team July 23, 2020 07:03 AM UTC

Hi Minkyu, 

We are glad that the provided solution resolved your requirement. Please get back to us if you need further assistance on this. 

Regards, 
Rajapandiyan S 


WM William Morgenweck May 23, 2021 01:06 PM UTC

This is perfect for my needs also and I have wired everything up- however and I know that this may sound very minial but is there a link to the style options of the button?  I have search for Material io buttons and I have not found any solution.  I took out the flat but now I would like to make the background blue with with text.

I've tried adding e-primary or e-success  but that does not seem to work

UPDATE: I did get the e- values to work.  Can you point in the direction for use a custom colors?

Thank you

https://www.syncfusion.com/vue-ui-components/vue-button



RS Rajapandiyan Settu Syncfusion Team May 24, 2021 01:20 PM UTC

Hi William,  
  
Thanks for contacting Syncfusion support.  
  
Query:  is there a link to the style options of the button?  I have search for Material io buttons and I have not found any solution.  I took out the flat but now I would like to make the background blue with with text.  
I've tried adding e-primary or e-success  but that does not seem to work  
UPDATE: I did get the e- values to work.  Can you point in the direction for use a custom colors?  
  
Based on your requirement, you want to render the button with blue background by using Syncfusion’s default CSS class. You can achieve your requirement by using “e-info” class in the button component. Please refer to the below code example and sample for more information.  
  
[App.vue]  
  
  
<template>  
  <div id="app">  
    <ejs-grid  
      ref="grid"  
      :dataSource="data"  
      :editSettings="editSettings"  
      :commandClick="commandClick"  
      height="310px"  
    >  
      <e-columns>  
        ----  
        <e-column  
          field="Commands"  
          headerText="Commands"  
          width="150"  
          :commands="commands"  
        ></e-column>  
      </e-columns>  
    </ejs-grid>  
  </div>  
</template>  
<script>  
  
----  
  
export default {  
  data() {  
    return {  
      data: data,  
      editSettings: { allowEditing: true, allowDeleting: true },  
      commands: [  
        {  
          buttonOption: { content: "Details", cssClass: "custombutton e-info" },  
        },  
      ],  
    };  
  },  
  provide: {  
    grid: [Page, Edit, Toolbar, CommandColumn],  
  },  
  methods: {  
    commandClick: function (args) {  
      if (args.target.classList.contains("custombutton")) {  
        console.log(args);  
        alert(JSON.stringify(args.rowData));  
      }  
    },  
  },  
};  
</script>  
<style>  
</style>  
  
  
  
Please refer to the below documentation which illustrates different styles of buttons in EJ2.  
  
   
Please get back to us if you need further assistance with this.  
  
Regards,  
Rajapandiyan S  


WM William Morgenweck May 24, 2021 02:20 PM UTC

I think you may have missed the UPDATE: I did get the e- values to work.  Can you point in the direction for use a custom colors?  line

Other than the e-values how can I use Hex color codes.

I think this does what I need

https://ej2.syncfusion.com/vue/documentation/button/how-to/customize-button-appearance/

In my humble opinion there should be a simpler way to change the background color and text than to make a custom button



RS Rajapandiyan Settu Syncfusion Team May 25, 2021 02:44 PM UTC

Hi William, 
 
Sorry for the inconvenience caused. 
   
Based on your query, we suspect that you want to customize the CSS style of button using its custom class. If so, you can achieve your requirement by using following code example.   
   
[App.vue]   
   
   
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      :editSettings="editSettings" 
      :commandClick="commandClick" 
      height="310px" 
    > 
      <e-columns> 
        ---- 
        <e-column 
          field="Commands" 
          headerText="Commands" 
          width="150" 
          :commands="commands" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
  </div> 
</template> 
<script> 
------ 
 
export default { 
  data() { 
    return { 
      data: data, 
      editSettings: { allowEditing: true, allowDeleting: true }, 
      commands: [ 
        { 
          buttonOption: { content: "Details", cssClass: "custombutton" }, 
        }, 
      ], 
    }; 
  }, 
  provide: { 
    grid: [Page, Edit, Toolbar, CommandColumn], 
  }, 
  methods: { 
    commandClick: function (args) { 
      if (args.target.classList.contains("custombutton")) { 
        console.log(args); 
        alert(JSON.stringify(args.rowData)); 
      } 
    }, 
  }, 
}; 
</script> 
<style> 
.custombutton, 
.custombutton:hover, 
.custombutton:focus, 
.custombutton:active { 
  background-color: #0000FF; 
  color: #fff; 
} 
</style> 
 
   
   
 
If this not meets your requirement, kindly explain your requirement in detail or share the issue reproducible sample. 
 
Regards, 
Rajapandiyan S   


WM William Morgenweck June 3, 2021 01:26 AM UTC

Hi-- Having the button is great.  Is there a way in the commandClick args to pass the row index ?  args.row.getAttribute('aria-rowindex');
 works great in the standard rowselected method but I can't seem to find how to do it in the CommandClick


RS Rajapandiyan Settu Syncfusion Team June 3, 2021 09:52 AM UTC

Hi William, 
 
Thanks for your update. 
 
Query: Is there a way in the commandClick args to pass the row index ?  args.row.getAttribute('aria-rowindex'); 
works great in the standard rowselected method but I can't seem to find how to do it in the CommandClick 
 
By using getRowInfo() method of Grid, you can get the row details of particular cell. Please find the following code example for more information. 
 
 
 
[app.vue] 
 
 
    commandClick: function (args) { 
      if (args.target.classList.contains("custombutton")) {         
       // get the row details by passing the td element in the getRowInfo method 
        var rowInfo = this.$refs.grid.$el.ej2_instances[0].getRowInfo(args.target.closest("td")); 
        console.log(rowInfo); 
        alert("rowIndex - " + rowInfo.rowIndex); 
      } 
    } 
 
 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


WM William Morgenweck June 3, 2021 10:27 AM UTC

Thank you-- only one last question-- how can I make the button rounded?  do I need to do that is a CSS or is it in the

  buttonOption: { content: "NIH Details", cssClass: "bg-light-blue-10 text-white custombutton" }

Like the home or Profile button on https://www.syncfusion.com/vue-ui-components/vue-button

Thanks

JC Joseph Christ Nithin Issack Syncfusion Team June 4, 2021 10:06 AM UTC

  
Hi William, 
  
Thanks for your update. 
  
Based on your requirement you need to make the rounded button for the command column. Your requirement can be achieved by using CSS class.  
  
Please refer the below code example. 
  
commands: [ 
    { 
        buttonOption: { content: "Details", cssClass: "custombutton e-round-corner e-info" }, 
    }, 
], 
  
  
CSS: 
<style> 
  .e-round-corner { 
    border-radius: 10px; 
  } 
  </style> 
  
  
  
  
Please get back to us if you need more assistance on this. 
  
Regards, 
Joseph I 


Loader.
Up arrow icon