Hi Dave,
Thank for your update.
Query – 1: Is it possible to have a listener in the parent component for an $emit action?
Yes, to achieve the above requirement we suggest you to use Vue Global Event Bus concept. By default the EventBus allows us to emit an event from one component and listen for that event in another component. So we can easily communicate with two Vue components by using this EventBus concept.
Please refer the code example to achieve your requirement and in this below sample we have emitted row details in button click event.
[App.vue ]
|
created() {
bus.$on("getdata", (data) => {
alert(data);
});
}, |
[child component]
|
<template>
<span>
<div
class="customer"
v-for="customer in data['CustomerID']"
v-bind:key="customer">
<button v-on:click="handleClick($event)" class="favorite">
{{ customer }}
</button>
</div>
</span>
</template>
<script>
import { bus } from "/src/main.js";
export default {
data() {},
methods: {
handleClick: function (args) {
var data = JSON.stringify(this.data);
bus.$emit("getdata", data);
},
},
};
</script> |
For your reference we have prepared the sample with this code and you can find that sample from the below link,
For more reference please refer below sample.
Query – 2: I want to pass in a list of strings, iterate through them and create a button for each string that's been passed in.
Based on your shared information we suspect that you want to render button component in template column and in you mentioned its data as list of strings. By default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean, checkbox type values but it not supports array type value. Refer to the below documentation.
Using v-for we have rendered button for each string. Please refer to the below code and sample link.
|
<template>
<span>
<div
class="customer"
v-for="customer in data['CustomerID']"
v-bind:key="customer">
<button v-on:click="handleClick($event)" class="favorite">
{{ customer }}
</button>
</div>
</span>
</template> |
Screenshot:
If you are using columnTemplate feature , we can iterating the array value from dataSource, then bind the value into the columnTemplate .
But this is used only for the display purpose we cannot perform Grid actions like Filtering, Searching, Grouping, Sorting, etc., to this column(when you are display the custom text through valueAccessor ). By default in EJ2 Grid the actions (like sorting, grouping ,filtering) will be performed based on its dataSource value.
Note : The Grid actions like Filtering, Sorting, Searching, Grouping, aggregates, etc., are based on the column field and its dataSource value. We can display our own customized value in the column using its template or valueAccessor feature . But, the Grid actions are based on the dataSource value not with the customized value. This is the default behavior of EJ2 Grid.
Please get back to us, if you need any further assistance.
Regards,
Thiyagu S
