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. Data Grid and Button

Data Grid and Button

Is it possible to put a standard Vue Button in the Command Column in the datagrid.  I would like to set the style something like this
<v-btn color="primary" @click="loadDetails">Details</v-btn>


7 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team April 29, 2019 06:26 AM

Hi William, 

Greetings from Syncfusion support. 

By default, command column buttons are Syncfusion button control. So, if you wants to add an external button in Grid column then we can suggest you to use the column template feature of Grid to achieve your requirement. 

Refer the help documentation. 


Please let us know if you need further assistance on this. 

Regards, 
Thavasianand S. 


WM William Morgenweck April 29, 2019 08:51 PM

ok-- so what would I change to have it as a  button without all of the ALT stuff 

   cTemplate: function () {
          return { template : Vue.component('columnTemplate',{
             template: `<div class="image">
                    <img :src="image" :alt="altImage"/>
                </div>`,
                data: function() {
                    return {
                        data: {}
                    }
                },
                computed: {
                    image: function() {
                        return './' + this.data.EmployeeID + '.png';
                    },
                    altImage: function() {
                        return this.data.EmployeeID;
                    }
                }
          })}
      }
    };

I put in this but it freeze the app

 cTemplate: function() {
        return {
          template: Vue.component("columnTemplate", {
            template: `<div>
                   test
                </div>`,
            data: function() {
              return {
                data: {}
              };
            },
            computed: {}
          })
        };
      },


PS Pavithra Subramaniyam Syncfusion Team April 30, 2019 03:38 AM

Hi William, 
 
We have prepared the sample by using “v-btn” in the Grid column template. But the reported issue was not reproduced at our end. So we have attached our sample with this update for your reference and you can find that sample from the below link, 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


WM William Morgenweck May 1, 2019 07:38 AM

As soon as I add   <e-column headerText='Buttons' width='120' :template='cTemplate'></e-column> to my Grid the grid does not show any records but it does show the correct record count in the lower right hand side.  If I change the number per page the number items update correctly but the Grid shows "No Records to Display".

I am changing the data by clicking the row of another grid and calling a function that changes the records.  I'm not sure that a problem

I have two grids on the same page and if I add that column to either Grid the same thing happens.  To me it seems very similar to the problem with having a grid update.  The data source is fine. The Grid knows that the records are there but it just does not render.

Sorry for being such a pain in the butt - but all of the problems that I keep posting are things that we have working using a competitors product.  Transitioning to a new product can always be difficult.   

TS Thavasianand Sankaranarayanan Syncfusion Team May 2, 2019 06:25 AM

Hi William, 

We suspect that the column template is not properly rendered in your project. You need to define the column template like as following code snippet, 

<ejs-grid id='Grid' :dataSource="data" :allowPaging="true"> 
    <e-columns> 
        <e-column headerText='Buttons' width='120' :template='cTemplate'></e-column> 
column> 
    </e-columns> 
</ejs-grid> 

export default { 
  data() { 
    return { 
      data: data, 
      cTemplate: function () { 
          return { template : Vue.component('columnTemplate',{ 
             template: `<v-btn color="success">Details</v-btn>`, 
                data: function() { 
                    return { 
                        data: {} 
                    } 
                }, 
                method: { 
 
                } 
          })} 
      } 
    }; 
  },   
  provide: { 
      grid: [Page] 
  }   
} 


Still, If you facing the same issue please share the following details. This will help us to provide the solution for this issue as early as possible. 

  1. Please bind the actionFailure event to Grid and ensure whether this event is triggered or not at the initial Grid rendering. If this event will trigger then share the screenshot of this event arguments. Because this event triggers when any Grid action failed to achieve the desired results. So we can easily find the issue details in this event argument.
  2. From your query we found that you have used two Grid in single page. So please share full code of the both Grids.
  3. If you have faced any script error in console, please share the screenshot of that console error.
  4. If possible try to reproduce the reported issue in the above sample and send back to us.

Regards, 
Thavasianand S. 


WM William Morgenweck May 6, 2019 07:32 AM

I finally got the data to show up with the button column but there is no button in the column.  I'm using the following code.


cTemplate: function() {
        return {
          template: Vue.component("columnTemplate", {
            template: "Details",
            data: function() {
              return {
                data: {}
              };
            },
            method: {}
          })
        };
      },

However, I had to add import Vue from "vue"; to each page even though it is registered in the main.js of the application.  Do you know the reason for this?  and How I can get the button to show up?  

Originally you said the grid will work with Syncfusion buttons-- is that any for any Syncfusion button?  How do I do that?  This page for button information does not work  https://ej2.syncfusion.com/vue/documentation/button/how-to/add-link-to-a-button/#customize-input-and-anchor-elements  Also-- I did not know that Syncfusion had buttons

Added Information:  I have gotten the Command Column to show a button for the edit command and I can use that but I also need a hyperlink.  How can I wire up my own custom events.  I can make the Edit into an Edit button and the Delete into a hyperlink.  Is that possible or should I stay with trying to get a template to work??


Should this work?

cTemplate: function() {
return {
template: Vue.component("columnTemplate", {
template: "Primary",
data: function() {
return {
data: {}
};
},
method: {}
})
};





TS Thavasianand Sankaranarayanan Syncfusion Team May 7, 2019 08:31 AM

Hi William, 

Query #1: However, I had to add import Vue from "vue"; to each page even though it is registered in the main.js of the application.  Do you know the reason for this? 

You have used Vue.component to render the controls in column template. So you must need to register the Vue if you have used any Vue components in that page.  
  
Query #2: How I can get the button to show up?  

We suspect that you did not import the EJ2Buttons properly in your project. We must need to import EJ2Button dependencies to use that button control in Grid. Please refer the following code snippet, 

 
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 
 
Vue.use(ButtonPlugin); 

Column template:  

cTemplate: function () { 
        return { 
            template: Vue.component('columnTemplate', { 
                template: `<ejs-button :isPrimary="true" v-on:click.native="btnClick">Edit</ejs-button>`, 
                data: function () { 
                    return { 
                        data: {} 
                    } 
                } 
           }) 
        } 
    } 

Query #3:  I can use that but I also need a hyperlink.  How can I wire up my own custom events 

From this query, we found that you want to use hyperlink in Grid command column delete button. We suggest to add “e-link” class to our button control to achieve this requirement. Also, we suggest to bind button click event for the command buttons If you want to perform any action in button click. Please refer the following code snippet, 

Grid: 
 
<ejs-grid ref='grid' id='grid' :editSettings='editSettings' :toolbar='toolbar' :dataSource="data" :allowPaging="true"> 
    <e-columns> 
        <e-column headerText='Commands' width=120 :commands='commands'></e-column> 
    </e-columns> 
</ejs-grid> 

export default { 
        data() { 
            return { 
                data: data, 
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
                toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
                commands: [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } }, 
                { buttonOption: { cssClass: 'e-link', content: 'delete', click: this.onClick } }] 
 
            }; 
        }, 
        methods: { 
            onClick: function (args) { 
                var rowEle = parentsUntil(event.target, 'e-row'); 
                var rowIndex = parseInt(rowEle.getAttribute('aria-rowindex')); 
                this.$refs.grid.selectRow(rowIndex); 
                this.$refs.grid.deleteRecord(); 
            } 
        }, 
        provide: { 
            grid: [Page, Edit, Toolbar, CommandColumn] 
        } 
    } 

If we misunderstood your query please share more details about your requirement for further assistance. 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon