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>
I have created a codesandbox, and it works.
cool-water-fpxw4z - CodeSandbox
But I was not sure how to use the DataManager, WebApiAdaptor modules in CodeSandbox with external dat, so I suspect its something to do with the way the data goes through them?
Here is a example where I am trying to get it working with a Grid, but I cant get the Grid external data working
Hi Verum,
Greetings from Syncfusion support.
After reviewing your query, we understood that you need to render the dialog component inside the grid in a column. We would like to suggest that you use the column template method. This method allows you to use a custom component inside the grid, including the dialog component. We have attached a code snippet and a sample for your reference, which should help you implement this solution. We have also attached the documentation link where you can understand the column template in detail.
In template
<e-column headerText="Commands" width="150" textAlign="Center" :template="cTemplate" ></e-column>
|
Column template implementation
template: Vue.component("columnTemplate", {
template: ` <div class="text-xs-center"> <v-btn slot="" color="red lighten-2" @click="showDialog()">Click </v-btn> <app-dialog :text="text" ref="dialog"></app-dialog> </div>`, data() { return { text: "Hello", }; }, methods: { showDialog() { this.$refs.dialog.open(); }, }, components: { appDialog: Dialog, }, }), }; },
|
Sample: https://codesandbox.io/s/vue-template-forked-5cvql0
Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/column-template#render-other-components-in-a-column
Please let us know if you need any further assistance.
Regards,
Dineshnarasimman