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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dialog template

Thread ID:

Created:

Updated:

Platform:

Replies:

147036 Aug 29,2019 02:45 PM UTC Sep 18,2019 01:43 AM UTC Vue 10
loading
Tags: Data Grid
Hani Yasin
Asked On August 29, 2019 02:45 PM UTC

Dear Support
in the documentation 

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 [Syncfusion]
Replied On August 30, 2019 06:40 AM UTC

Hi Hani,  

Greetings from Syncfusion.  

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


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

Regards,  
Seeni Sakthi Kumar S. 


Hani Yasin
Replied On August 30, 2019 08:16 AM UTC

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 [Syncfusion]
Replied On September 2, 2019 10:38 AM UTC

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
Replied On September 3, 2019 03:15 AM UTC

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 [Syncfusion]
Replied On September 3, 2019 01:52 PM UTC

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. 
 
 
Regards, 
Manivel 


Hani Yasin
Replied On September 4, 2019 03:54 AM UTC

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 [Syncfusion]
Replied On September 5, 2019 02:15 PM UTC

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
Replied On September 10, 2019 02:33 PM UTC

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 [Syncfusion]
Replied On September 11, 2019 01:12 PM UTC

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 17th, 2019. Until then we appreciate your patience.   

Regards,  
Seeni Sakthi Kumar S 


Balaji Sekar [Syncfusion]
Replied On September 18, 2019 01:43 AM UTC

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(); 
      } 
    } 
  } 
}; 


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

Regards, 
Balaji Sekar. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon