Dialog within Grid rows
I am trying to make a common Dialog in Vuetify, I have made it work stand along from a Grid, and it works ok, but when I put it into a Grid it resolves the Modal into the Grid, rather than a button.
I am trying to make it so when the Grid loads, there is a button in the Row called button. And when clicked a Modal is shown with additional external data.
From here, the GREEN is working, but the RED is not
Are you able to assist please?
my View
<template>
<h2>Demo</h2>
<div id="app">
<v-btn color="primary" @click="openTest({})">My Local Test Dialog <v-icon>mdi-email-edit-outline</v-icon></v-btn>
<v-dialog v-model="dialogTest" width="500">
<v-card>
<v-card-title class="headline black" primary-title>
Compose Message
</v-card-title>
<v-card-text class="pa-5"> abcccccc </v-card-text>
<v-card-actions class="pa-5">
<v-btn class="ml-auto" @click="saveTest()" outlined color="primary">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<ejs-grid id="my_grid" ref='grid' :dataSource='data' style="height: 100px">
<e-columns>
<e-column field='id' headerText='ID' textAlign='Right' width=75></e-column>
<e-column field='title' headerText='Title' width=120></e-column>
<e-column field='stockCleaned' headerText='Stock' width=100></e-column>
<e-column headerText='Button' width='150' textAlign='Center' :template="'buttonTemplate'"></e-column>
</e-columns>
<template v-slot:buttonTemplate="{}">
<myDialog></myDialog>
</template>
</ejs-grid>
</div>
</template>
<script>
import { DataManager, WebApiAdaptor } from "@syncfusion/ej2-data";
import myDialog from '../components/myDialog.vue'
class cleanUpGrid extends WebApiAdaptor {
processResponse() {
let original = super.processResponse.apply(this, arguments);
original.forEach((item) => {
var array = ["In Stock", "Sold Out"];
var index = Math.floor(Math.random() * array.length);
item['stockCleaned'] = array[index];
original.push(item);
});
original.Count = original.length;
console.log(original);
return original;
}
}
export default({
name: 'app',
created(){
return{
}
},
data() {
return {
data: new DataManager({
url: 'https://jsonplaceholder.typicode.com/todos',
adaptor: new cleanUpGrid(),
crossDomain: true,
offline: true,
onSuccess: console.log("Done")
}
),
dialogTest: false,
};
},
methods: {
openTest() {
this.dialogTest = true;
},
saveTest() {
this.dialogTest = false;
},
},
components: {
myDialog
},
provide: {
grid: []
}
});
</script>
<style>
@import "@syncfusion/ej2-material-theme/styles/material.css";
@import "@syncfusion/ej2-buttons/styles/material.css";
@import "@syncfusion/ej2-popups/styles/material.css";
@import "@syncfusion/ej2-navigations/styles/material.css";
</style>
<template>
<div>
<v-btn color="warning" @click="openDialogComponent({})">My Dialog Component<v-icon>mdi-email-edit-outline</v-icon></v-btn>
<v-dialog v-model="mydialogComponent" width="500">
<v-card>
<v-card-title class="headline" primary-title>
Compose Dialog
</v-card-title>
<v-card-text class="pa-5"> xxxxyyyyzzzzz </v-card-text>
<v-card-actions class="pa-5">
<v-btn class="ml-auto" @click="saveDialogComponent()" outlined color="primary"
>Cancel</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
name: "mydialogComponent",
data() {
return {
mydialogComponent: false,
};
},
methods: {
openDialogComponent() {
this.mydialogComponent = true;
},
saveDialogComponent() {
this.mydialogComponent = false;
},
},
};
</script>
<style scoped>
</style>
<template>
<div>
<v-btn color="warning" @click="openDialogComponent({})">My Dialog Component<v-icon>mdi-email-edit-outline</v-icon></v-btn>
<v-dialog v-model="mydialogComponent" width="500">
<v-card>
<v-card-title class="headline" primary-title>
Compose Dialog
</v-card-title>
<v-card-text class="pa-5"> xxxxyyyyzzzzz </v-card-text>
<v-card-actions class="pa-5">
<v-btn class="ml-auto" @click="saveDialogComponent()" outlined color="primary"
>Cancel</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
name: "mydialogComponent",
data() {
return {
mydialogComponent: false,
};
},
methods: {
openDialogComponent() {
this.mydialogComponent = true;
},
saveDialogComponent() {
this.mydialogComponent = false;
},
},
};
</script>
<style scoped>
</style>
