Dialog template

[Hani Yasin]

Dear Support

in the documentation 

https://ej2.syncfusion.com/vue/demos/#/material/grid/dialog-template.html

THERE IS 

import DialogTemplate from "./dialog-temp.vue";

can you please share this file to look at its structure i could not find it anywhere

Best Regards

Hani

[Seeni Sakthi Kumar Seeni Raj]

Hi Hani,  

Greetings from Syncfusion.  

We have documented the sample same template in the following Help Document.  

https://ej2.syncfusion.com/vue/documentation/grid/edit/#dialoginline-template 

In this, template for the editSettings.template has been assigned directly as a function. 

Regards,  

Seeni Sakthi Kumar S. 

[Hani Yasin]

Thanks Seeni

this is helpful, can you please share a hint or a sample on how to accomplish this when the grid columns are created automatically ?

Thanks again

Hani

[Dhivya Rajendran]

Hi Hani, 

Thanks for your update. 

Before providing  solution, could you please share did you used dynamic (then share the column definition) or auto generated columns in Grid, which will helpful for us to provide an better solution as soon as possible. 

Regards, 

R.Dhivya  

[Hani Yasin]

I have attached a vue component am testing with, where DataGrid is invoked, the datasource is being read from Vuex store, which (Vuex) is integrated with a feathersjs service

I am pasting the code here too:

<template>

<v-app>

<v-toolbar app>

<v-toolbar-title class="headline text-uppercase">

<span>Vuetify</span>

<span class="font-weight-light">MATERIAL DESIGN</span>

</v-toolbar-title>

<ejs-dropdownlist id='games' :dataSource='currencies' :fields='fields' ></ejs-dropdownlist>

<v-spacer></v-spacer>

<v-btn

flat

rel='nofollow' href="https://github.com/vuetifyjs/vuetify/releases/latest"

target="_blank"

>

<span class="mr-2">Latest Release</span>

</v-btn>

</v-toolbar>

<v-content>

<pre>

{{boards}}

</pre>

<ejs-grid ref="grid" :dataSource="boards" :allowPaging="true" :toolbar='toolbar' :editSettings='editSettings' :dataBound='dataBound' :actionBegin="actionBegin" > </ejs-grid>

</v-content>

</v-app>

</template>

<script>

import { findInStore } from 'feathers-vuex'

import { mapActions, mapGetters, mapState } from 'vuex'

import { GridPlugin, Page, Toolbar , Edit } from '@syncfusion/ej2-vue-grids';

import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";

import Vue from 'vue'

Vue.use(GridPlugin);

Vue.use(DropDownListPlugin);

//import {mapState, mapGetters, mapActions,mapMutations } from 'vuex'

//import { makeFindMixin } from 'feathers-vuex'

const { paramsForServer } = require('feathers-hooks-common');

function replaceKeys(obj, find, replace) {

return Object.keys(obj).reduce (

(acc, key) => Object.assign(acc, { [key.replace(find, replace)]: obj[key] }), {});

}

export default {

data() {

return {

toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],

editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true,mode: 'Normal' },

fields: { text: 'currency_code', value: 'currency_id' },

};

},

provide: {

grid: [Page,Toolbar,Edit]

},

computed: { // only getters have live queries

...mapGetters('currency', { findCurrenciesInStore: 'find' }),

...mapGetters('products', { findBoardsInStore: 'find' }),

...mapGetters('productdescription', { findProductsInStore: 'find' }),

boards() {

return this.findBoardsInStore({ query: { 'description.lang_code':'de'

} ,

paginate: false,

}).data.map(obj => replaceKeys(obj,'.', '_'));

},

currencies() {

return this.findCurrenciesInStore({ query: { $select: [ 'currency_code','currency_id' ]

} ,

paginate: false,

}).data

},

products() {

return this.findProductsInStore({ query: {

} ,

paginate: false,

}).data

}

},

methods: {

//...mapActions('products', ['create', 'remove', 'find']),

...mapActions('products', { findBoards: 'find' }),

dataBound: function() {

this.$refs.grid.ej2Instances.columns[0].isPrimaryKey = true;

// this.$refs.grid.ej2Instances.columns[4].field = 'product_name'

},

actionBegin (args) {

if (args.requestType === 'save') {

// console.log(replaceKeys(args.data,'-','.'))

const {Product} = this.$FeathersVuex

const saveData = new Product(replaceKeys(args.data,'-','.'))

saveData.save()

}

else if (args.requestType === 'delete'){

// console.log(args.data)

var primaryKeyField = this.$refs.grid.ej2Instances.getPrimaryKeyFieldNames()[0];

var id = args.data[0][primaryKeyField];

const {Product} = this.$FeathersVuex

const saveData = new Product({product_id: id})

saveData.remove()

}

},

...mapActions('currency', { findCurrencies: 'find' }),

...mapActions('productdescription', { findProducts: 'find' })

},

created() {

this.findBoards({ query: {

} })

this.findCurrencies({ query: {

} })

// this.findProducts({ query: { 'lang_code':'de'

// } })

}

}

</script>

<style>

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

</style>

[Manivel Sellamuthu]

Hi Hani , 

 

You can externally binding Grid component dataSource without DataManager by using custom data binding concept. Also you can get the Grid component query in dataStateChange event while performing grid action and you can get the Grid component add/edit/delete record in dataSourceChanged event while preforming CRUD action in Grid. Please find the demo and documentation for your reference. 

 

Demo : https://ej2.syncfusion.com/vue/demos/#/material/grid/custom-binding.html 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/data-binding/?no-cache=1#custom-binding 

https://ej2.syncfusion.com/vue/documentation/grid/data-binding/?no-cache=1#perform-crud-operations 

 

Regards, 

Manivel 

[Hani Yasin]

While your info is valuable , it did not answer my question

i have no problem with data binding, 

i am generating the columns automatically , i was asking for a hint or a sample to generate the dialog template based on the loaded columns

if you have a method to detect the number of columns loaded , and type of each this will be helpful too

since i can generate the dialog template based on these methods

[Seeni Sakthi Kumar Seeni Raj]

Hi Hani,  

By default, if you use the Dialog as an Edit Mode, which will bring the template form with the required fields from the auto-generated columns. But we could see you are asking the Dialog Template with the Auto-generated fields. Do you have any specific need with this? Please explain your requirement with the Dialog Template and Auto-generated column. 

Regards,  

Seeni Sakthi Kumar S. 

[Hani Yasin]

Hi thanks for your detailed answer, 

actually what am trying to do is to auto generate a custom dialog template to edit the auto generated columns, by default the auto generated dialog will have textboxes, what am trying to do is to change each field within the dialog to mach the column type (e.g for date will show calendar, for foreign key column  show select list ,...)

if there are methods within the datagrid API to detect the autogenerated column types then it would make it easier to generate such custom dialog , what do you think ?

[Seeni Sakthi Kumar Seeni Raj]

Hi Hani,  

We have validated your requirements and logged it as a Custom sample with all requested queries. Currently, we are working on this custom sample and we will provide the sample on September 17^th, 2019. Until then we appreciate your patience.   

Regards,  

Seeni Sakthi Kumar S 

[Balaji Sekar]

Hi Hani, 

Thanks for your patience, 

As per your query, we have created a custom sample with the requested queries. You can customized the dialog template editing with autogenerate columns using actionComplete event of EJ2 Grid. Please refer the below code example and sample for more information. 

[index.js] 

<template> 

  <div id="app"> 

    <ejs-grid 

      id="Grid" 

      ref="grid" 

      :dataSource="data" 

      :dataBound="dataBound" 

      :allowPaging="true" 

      :editSettings="editSettings" 

      :toolbar="toolbar" 

      :actionComplete="actionComplete" 

    ></ejs-grid> 

  </div> 

</template> 

 

<script> 

.   .   .   . 

import { Dialog } from "@syncfusion/ej2-popups"; 

import { DatePicker } from "@syncfusion/ej2-calendars"; 

import { TextBox, NumericTextBox} from "@syncfusion/ej2-inputs"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: customData, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Dialog", 

        template: function() { 

          return { 

            template: Vue.component("todo-item", { 

              template: `<div formGroup="orderForm"> 

             </div>`, 

              data() { 

                return { 

                  data: {} 

                }; 

              } 

            }) 

          }; 

        } 

      }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 

    }; 

  }, 

  provide: { 

    grid: [Page, Filter, Toolbar, Edit] 

  }, 

  methods: { 

    dataBound: function(args) { 

      this.$refs.grid.ej2Instances.columns[0].isPrimaryKey = true; //Need to define primarykey column in unique column of Grid 

    }, 

    actionComplete: function(args) { 

      if (args.requestType === "beginEdit" || args.requestType === "add") { 

        var columns = this.$refs.grid.ej2Instances.columns; 

        for (var i = 0; i < columns.length; i++) { 

          // Here, column type based to create input Element 

          var divEle = document.createElement("div"); 

          divEle.className = "form-group"; 

          var InputEle = document.createElement("input"); 

          InputEle.name = columns[i].field; 

          InputEle.id = columns[i].field; 

          InputEle.type = "text"; 

          if (columns[i].isPrimaryKey && args.requestType === "beginEdit") { 

            InputEle.disabled = columns[i].isPrimaryKey; 

          } 

          var label = document.createElement("label"); 

          label.innerHTML = columns[i].field; 

          divEle.appendChild(label); 

          divEle.appendChild(InputEle); 

 

          args.form.appendChild(divEle); 

        } 

        for (var j = 0; j < columns.length; j++) { 

        //Here, column type based to bind input components 

          switch (columns[j].type) { 

            case "number": 

              var numberEle = new NumericTextBox({ 

                value: args.rowData[columns[j].field] 

              }); 

              numberEle.appendTo("#" + columns[j].field); 

              break; 

            case "string": 

              var stringEle = new TextBox({ 

                value: args.rowData[columns[j].field] 

              }); 

              stringEle.appendTo("#" + columns[j].field); 

              break; 

            case "datetime": 

              var dateEle = new DatePicker({ 

                value: args.rowData[columns[j].field] 

              }); 

              dateEle.appendTo("#" + columns[j].field); 

              break; 

            default: 

              break; 

          } 

        } 

      } 

 

      if (args.requestType === "beginEdit") { 

        args.form.elements.namedItem("CustomerID").focus(); 

      } 

    } 

  } 

}; 

Sample: https://codesandbox.io/s/vue-template-zo004 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar.