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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ColumnTemplate - Listen to events

Thread ID:

Created:

Updated:

Platform:

Replies:

140652 Oct 30,2018 05:35 PM UTC Nov 7,2018 12:04 PM UTC Vue 9
loading
Tags: Data Grid
Stas Volyansky
Asked On October 30, 2018 05:35 PM UTC

Can you please tell me how can I subscribe to events emitted in my column template?
The real case is:
1. I have column template with button that deletes the record inside the data base.
2. I want to reload the grid after the action is completed.
Thank you for help.

Mohammed Farook J [Syncfusion]
Replied On October 31, 2018 11:36 AM UTC

Hi Stas, 
 
Thanks for contacting Syncfusion support. 
 
Query: I have column template with button that deletes the record inside the data base. 
 
We have validated your query and created a sample based on your requirement. Here, we have bind a button in column template and delete a record when we click the button. Please find the below code example and sample for your reference. 
 
[code example] 
... 
 
new Vue({ 
    el: '#app', 
    template: ` 
    <div id="app"> 
        <ejs-grid id='grid' ref='grid' :columns="columns" :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true':pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
   return { 
      data: [ 
          ... 
      ], 
      ... 
      {headerText: 'template-col', width: 120, template: function () {  
        return { 
                            template: Vue.component('columnTemplate', { 
                                template:  
                                    `<button @click="fun(event)">buttton</button>`, 
                                data: function () { 
                                    return { 
                                        data: {} 
                                    } 
                                }, 
                                methods: { 
                                    fun: function(e){ 
                                       
                                        var grid = document.getElementById("grid").ej2_instances[0]; 
                                        var rowInfo = grid.getRowInfo(e.target); 
                                        grid.selectRow(parseInt(rowInfo.cell.parentElement.rowIndex)); 
                                        grid.editModule.deleteRecord(); 
                                    } 
                                } 
                            }) 
                        } 
      } }], 
    }; 
  }, 
  ... 
}); 
 
Query:  I want to reload the grid after the action is completed. 
 
By default, the grid will refresh after performing every delete action. 
 
Please find the sample in below link. 
 
 
Note : if you want to refresh the grid by using ‘gridObj.refresh()’ method of Grid. 
 
Regards, 
J Mohammed Farook. 
 


Stas Volyansky
Replied On October 31, 2018 12:39 PM UTC

Thanks. But is it possible to do it in Vue oriented way? Reusability of the column template is not possible if you rely on the id of the particular grid.

Georgi Panayotov
Replied On November 1, 2018 09:07 AM UTC

You can try to emmit event to the parent component.
Since i didn't find how to reach the main vue app object I'm using a global Vue instance as eventHub.

in eventHub.js you can have
import Vue from 'vue'
const EventBus = new Vue()
export default EventBus

then in main component and in template component you can have
import eventBus from "path/to/eventHub";

In the main component on Create you can have 

eventBus.$on("deleteRow", doDeleteRow);

on destroy

eventBus.$on("deleteRow", doDeleteRow);

then on main component implement method doDeleteRow

and then in the template when you click delete in the method you can use

eventBus.$emmit("deleteRow");

this approach we are using for showing dialogs also

Mohammed Farook J [Syncfusion]
Replied On November 1, 2018 01:11 PM UTC

Hi Georgi, 
 
Query: Thanks. But is it possible to do it in Vue oriented way? Reusability of the column template is not possible if you rely on the id of the particular grid.  
You can try to emmit event to the parent component. Since i didn't find how to reach the main vue app object I'm using a global Vue instance as eventHub.  
 
We have validated your query and prepared a sample based on your requirement. Here, we have achieved your requirement by using eventhub. Eventhub is a global bus used to communicate between any components. We have emit a event in one component and listen in another component to perform the required action in that component. Please find the below code example and sample for your reference. 
 
[code example] 
... 
Vue.use(GridPlugin); 
 
Vue.prototype.$eventHub = new Vue(); 
 
new Vue({ 
    el: '#app', 
    template: ` 
    <div id="app"> 
        <ejs-grid id='grid' ref='grid' :columns="columns" :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true':pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
   return { 
      data: [ 
         ... 
      ], 
      ... 
      {headerText: 'template-col', width: 120, template: function () {  
        return { 
                            template: Vue.component('columnTemplate', { 
                                template:  
                                    `<button v-on:click="fun(event)">buttton</button>`, 
                                data: function () { 
                                    return { 
                                        data: {} 
                                    } 
                                }, 
                                methods: { 
                                    fun: function(e){ 
                                      this.$eventHub.$emit('delete',e); 
                                   } 
                                } 
                            }) 
                        } 
      } }], 
    }; 
  }, 
  methods: { 
     onClick: function(args) { 
        let rowObj= this.$refs.grid.ej2Instances.getRowObjectFromUID(closest(args.target, '.e-row').getAttribute('data-uid')); 
        let data = rowObj.data; 
        alert(JSON.stringify(data)); 
    } 
  }, 
  provide: { 
    grid: [Page, Sort, Filter, Group, Aggregate, Edit, Toolbar, CommandColumn] 
  }, 
  created() { 
      this.$eventHub.$on('delete', (e)=>{ 
          debugger 
          var gRowObj = this.$refs.grid.ej2Instances.getRowInfo(e.target); 
          var rIndex = gRowObj.rowIndex;  
          this.$refs.grid.ej2Instances.selectRow(rIndex); 
          this.$refs.grid.ej2Instances.editModule.deleteRecord(); 
      }); 
  }, 
 
}); 
 
 
Please find the sample in below link. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
J Mohammed Farook. 


Stas Volyansky
Replied On November 1, 2018 01:35 PM UTC

Yes. Messages approach is OK.
I found also this one, if we are using the column template as single file component:

     import MyColumnTemplate from '...';
    
     getColumnTemplate() {
          return {
               template: Vue.extend({
                    extends: MyColumnTemplate,
                         methods: {
                              reloadData: async () => await this.loadDataAsync()
                         }
                    })
               };
          }
After that I'm able to call reloadData method from MyColumnTemplate component

Georgi Panayotov
Replied On November 1, 2018 02:15 PM UTC

Hi Stas,
Thanks fot the idea. I've just wondered how to pass a property to a grid column template in a SFC and you just gave me the idea


Mohammed Farook J [Syncfusion]
Replied On November 2, 2018 04:19 AM UTC

Hi Stas, 
 
Thanks for the update. We are happy to hear your problem has been resolved.  
 
Please get back to us, if you need further assistance. 
 
Regards, 
J Mohammed Farook 
  
 


Stas Volyansky
Replied On November 5, 2018 01:22 PM UTC

Can you please tell me if it's planned to create an option for specifying column template as a scoped slot?

     <e-column width="100px">
<template slot="columnTemplate" slot-scope="...">
<button>Hello</button>
</template>
</e-column>

Mohammed Farook J [Syncfusion]
Replied On November 7, 2018 12:04 PM UTC

 Hi Stas,  
 
We have checked your query and this feature is not available now. We have already logged “Need to provide template properties support in Child directive support using scoped slots” as feature and the fix for this feature will be available in any of our upcoming patch release. 
 
We appreciate your patience until then. 
 
Regards, 
J Mohammed Farook 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;