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

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>




3 Replies

VG Verum Genus April 19, 2023 12:50 AM UTC

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?




VG Verum Genus April 19, 2023 01:20 AM UTC

Here is a example where I am trying to get it working with a Grid, but I cant get the Grid external data working

https://codesandbox.io/s/quirky-carson-cmoptd-v2-just-grid



DM Dineshnarasimman Muthu Syncfusion Team April 20, 2023 04:07 PM UTC

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


Loader.
Up arrow icon