using tab inside the dialog editing

[Nurhan Aydogdu]

Hi Team,

i have used your grid component in my project and the editing mode dialog. Now i want add a tab-bar into the dialog-template. İ have found an example for Angular.

https://ej2.syncfusion.com/angular/documentation/grid/how-to/using-tab-inside-the-dialog-editing/

Have you any example for vue?

[Seeni Sakthi Kumar Seeni Raj]

Hi Nurhan, 

Thanks for contacting Syncfusion support. 

we have considered your requirement as custom sample and we will update the sample with in three business days. 

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

Regards, 

Seeni Sakthi Kumar S 

[Seeni Sakthi Kumar Seeni Raj]

Hi Nurhan, 

Thanks for contacting Syncfusion support. 

Query : I want add a tab-bar into the dialog-template. 

We could see that you want to add a tab bar inside the dialog-template. We have prepared the sample with your requirement. In that sample we added two tabitems with content as tab1 and tab2 in the template. Please refer the below code example and sample for information. 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :editSettings="editSettings" 

      :actionBegin="actionBegin" 

      :actionComplete="actionComplete" 

      :toolbar="toolbar" 

      height="273px" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          textAlign="Right" 

          :isPrimaryKey="true" 

          width="100" 

        ></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 

        <e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

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

import { data } from "./datasource"; 

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

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

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

import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs"; 

import { DataUtil } from "@syncfusion/ej2-data"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

Vue.use(GridPlugin); 

Vue.use(DropDownListPlugin); 

Vue.use(DatePickerPlugin); 

Vue.use(NumericTextBoxPlugin); 

Vue.use(TabPlugin); 

export default { 

  name: "app", 

  data() { 

    return { 

      data: data, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Dialog", 

        template: function() { 

          return { 

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

              template: `<div> 

             <ejs-tab  id="element" > 

                <e-tabitems> 

                    <e-tabitem :header="headerText0" content="#tab1"></e-tabitem> 

                    <e-tabitem :header="headerText1" content="#tab2"></e-tabitem> 

                </e-tabitems> 

            </ejs-tab> 

            <div id="tab1"> 

            <div formGroup="orderForm"> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    <input id="OrderID" name="OrderID" v-model='data.OrderID' type="text" :disabled="!data.isAdd"> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="OrderID"> Order ID</label> 

                </div> 

            </div> 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    <input id="CustomerID" name="CustomerID" v-model='data.CustomerID' type="text"> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="CustomerID">Customer Name</label> 

                </div> 

            </div> 

        </div> 

       </div> 

            <div id="tab2" style='display: none'> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <ejs-numerictextbox id="Freight" placeholder="Freight" v-model='data.Freight' floatLabelType='Always'></ejs-numerictextbox> 

            </div> 

            <div class="form-group col-md-6"> 

                <ejs-datepicker id="OrderDate" placeholder="Order Date" v-model='data.OrderDate' floatLabelType='Always'></ejs-datepicker> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <ejs-dropdownlist id="ShipCountry" v-model='data.ShipCountry' :dataSource='shipCountryDistinctData' :fields="{text: 'ShipCountry', value: 'ShipCountry' }" placeholder="Ship Country" popupHeight='300px' floatLabelType='Always'></ejs-dropdownlist> 

            </div> 

            <div class="form-group col-md-6"> 

                <ejs-dropdownlist id="ShipCity" v-model='data.ShipCity' :dataSource='shipCityDistinctData' :fields="{text: 'ShipCity', value: 'ShipCity' }" placeholder="Ship City" popupHeight='300px' floatLabelType='Always'></ejs-dropdownlist> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-12"> 

                <div class="e-float-input e-control-wrapper"> 

                    <textarea id="ShipAddress" name="ShipAddress" type="text" v-model='data.ShipAddress'></textarea> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="ShipAddress">Ship Address</label> 

                </div> 

                </div> 

            </div> 

        </div> 

        </div> 

    </div>`, 

              data() { 

                return { 

                  data: {}, 

                  headerText0: { text: "Tab1" }, 

                  headerText1: { text: "Tab2" } 

                }; 

              }, 

              computed: { 

                shipCityDistinctData: () => { 

                  return DataUtil.distinct(data, "ShipCity", true); 

                }, 

                shipCountryDistinctData: () => { 

                  return DataUtil.distinct(data, "ShipCountry", true); 

                } 

              } 

            }) 

          }; 

        } 

      }, 

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

    }; 

  }, 

  provide: { 

    grid: [Page, Edit, Toolbar] 

  }, 

  methods: { 

    actionBegin(args) { 

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

        // cast string to integer value. 

        args.data["Freight"] = parseFloat( 

          args.form.querySelector("#Freight").value 

        ); 

      } 

    }, 

    actionComplete(args) { 

      // Set initail Focus 

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

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

      } 

    } 

  } 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

Sample : https://codesandbox.io/s/vue-template-8figu 

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

Regards, 

Seeni Sakthi Kumar S

[Nurhan Aydogdu]

Hi Seeni,

thank you for your solution. İ get actually errors and the datagrid not showing now. 

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: str.match is not a function"

found in

--->

       

         

           

              at src/components/core/View.vue

               

                  at src/components/Home.vue

                   

                      at src/App.vue

                       

vue.runtime.esm.js?2b0e:1888 TypeError: str.match is not a function

    at evalExp (template.js?8c23:65)

    at compile (template.js?8c23:52)

    at Object.Engine.compile (template-engine.js?7769:57)

    at compile (template-engine.js?7769:16)

    at templateCompiler (util.js?d769:145)

    at Grid.processModel (grid.js?9c37:2390)

    at Grid.render (grid.js?9c37:709)

    at Grid.Component.appendTo (component.js?6fd4:129)

    at VueComponent.ComponentBase.mounted (component-base.js?57d6:42)

    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)

 Uncaught TypeError: Cannot read property 'getPanel' of undefined

    at Grid.getContent (grid.js?9c37:1317)

    at Render.refreshDataManager (render.js?3632:104)

    at Render.refresh (render.js?3632:86)

    at Grid.extendedPropertyChange (grid.js?9c37:1111)

    at Grid.onPropertyChanged (grid.js?9c37:981)

    at Grid.Base.dataBind (base.js?f3ac:103)

    at Grid.Component.dataBind (component.js?6fd4:138)

    at messageHandler (util.js?67bb:29)

Please check the attached file. What i am missing? 

Attachment: Branches.vue_f93f7062.zip

[Seeni Sakthi Kumar Seeni Raj]

Hi Nurhan,

 

Thanks for contacting Syncfusion support 

We have validated the provided information and we suspect that some duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. Could you please follow the steps provided in the following documentation or use the below steps to overcome the reported behavior. 

1. Delete package.lock.json file from your application.
2. Remove the @syncfusion  package folder from the node_modules.
3. Use same version for all components(Grid, Dropdown, etc,) in package.json file.
4. Then install the new packages.

 

Help documentation: https://ej2.syncfusion.com/vue/documentation/common/how-to/update-npm-package/#update-syncfusion-npm-package 

 

Regards, 

Seeni Sakthi Kumar S

[Nurhan Aydogdu]

Hi Seeni, 

thank you very much. Your suggestion to update packages has solved the error which i fetch.
Actually when i select a row to edit the dialog template is empty and i get a different error. 

vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Before i add your suggestion with vue.component template my dialogfield has the columns from datagrid which was filled with the datas from database. (please look at product file which is attached)
İ want a solution with a dialog template with tabs and into tab1 i want the dynamic generated columns from my grid like before. (please look at screenshot).

Attachment: product_75f7d134.zip

[Rajapandiyan Settu]

Hi Nurhan , 

 

Thanks for contacting Syncfusion support. 

 

By default Vue will throw this warning when the template compiler is not available in the particular project. So, to resolve this warning we suggest you to register this dialog template in new Vue component and refer that Vue component in template property instead of directly creating the Vue component. Please refer the below code example and sample for information. 

 

App.vue 

 

<template> 

    <div id="app"> 

         <ejs-grid 

      :dataSource="data" 

      :editSettings="editSettings" 

      :actionBegin="actionBegin" 

      :actionComplete="actionComplete" 

      :toolbar="toolbar" 

      height="273px" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          textAlign="Right" 

          :isPrimaryKey="true" 

          width="100" 

        ></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 

        <e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column> 

      </e-columns> 

    </ejs-grid>> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

import { L10n,  setCulture, setCurrencyCode } from '@syncfusion/ej2-base'; 

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

import { data } from './datasource'; 

import  dialogTemplate  from "./DialogTemp.vue"; 

 

 

 

Vue.use(GridPlugin); 

 

 

export default { 

  name: "app", 

  data() { 

    return { 

      data: data, 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Dialog", 

        template: function() { 

          return { 

            template: dialogTemplate 

          }; 

        } 

      }, 

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

    }; 

  }, 

  provide: { 

    grid: [Page, Edit, Toolbar] 

  }, 

  methods: { 

    actionBegin(args) { 

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

        // cast string to integer value. 

        args.data["Freight"] = parseFloat( 

          args.form.querySelector("#Freight").value 

        ); 

      } 

    }, 

    actionComplete(args) { 

      // Set initail Focus 

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

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

      } 

    } 

  } 

} 

</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> 

 

DialogTemp.vue 

<template> 

        <div id="dialogTemplate"> 

             <ejs-tab  id="element" > 

                <e-tabitems> 

                    <e-tabitem :header="headerText0" content="#tab1"></e-tabitem> 

                    <e-tabitem :header="headerText1" content="#tab2"></e-tabitem> 

                </e-tabitems> 

            </ejs-tab> 

            <div id="tab1"> 

            <div formGroup="orderForm"> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    <input id="OrderID" name="OrderID" v-model='data.OrderID' type="text" :disabled="!data.isAdd"> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="OrderID"> Order ID</label> 

                </div> 

            </div> 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    <input id="CustomerID" name="CustomerID" v-model='data.CustomerID' type="text"> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="CustomerID">Customer Name</label> 

                </div> 

            </div> 

        </div> 

       </div> 

 

            <div id="tab2" style='display: none'> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <ejs-numerictextbox id="Freight" placeholder="Freight" v-model='data.Freight' floatLabelType='Always'></ejs-numerictextbox> 

            </div> 

            <div class="form-group col-md-6"> 

                <ejs-datepicker id="OrderDate" placeholder="Order Date" v-model='data.OrderDate' floatLabelType='Always'></ejs-datepicker> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <ejs-dropdownlist id="ShipCountry" v-model='data.ShipCountry' :fields="{text: 'ShipCountry', value: 'ShipCountry' }" placeholder="Ship Country" popupHeight='300px' floatLabelType='Always'></ejs-dropdownlist> 

            </div> 

            <div class="form-group col-md-6"> 

                <ejs-dropdownlist id="ShipCity" v-model='data.ShipCity' :fields="{text: 'ShipCity', value: 'ShipCity' }" placeholder="Ship City" popupHeight='300px' floatLabelType='Always'></ejs-dropdownlist> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-12"> 

                <div class="e-float-input e-control-wrapper"> 

                    <textarea id="ShipAddress" name="ShipAddress" type="text" v-model='data.ShipAddress'></textarea> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="ShipAddress">Ship Address</label> 

                </div> 

                </div> 

            </div> 

        </div> 

        </div> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

 

 

 

 

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

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

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

import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs"; 

import { DataUtil } from "@syncfusion/ej2-data"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

 

 

 

Vue.use(DropDownListPlugin); 

Vue.use(DatePickerPlugin); 

Vue.use(NumericTextBoxPlugin); 

Vue.use(TabPlugin); 

 

export default { 

  name: "app", 

  data() { 

      return { 

                  data: {}, 

                  headerText0: { text: "Tab1" }, 

                  headerText1: { text: "Tab2" } 

                }; 

  }, 

  provide: { 

  }, 

  methods: { 

  } 

} 

</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> 

 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/dialogtemp_tab_vue1626917707 

 

Regards, 

Rajapandiyan S.           

[Nurhan Aydogdu]

Hi Rajapandiyan, 

thank you for your answer. İ have solve the problem before and added a dialog.vue. 

Now i have add a dropdownlist in dialog.vue. The item-values from this dropdownlist should come from database with vuex but actually i fetch this error and the dialog field shows empty because of this. What i am missing? please let me know when you need more.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property '_modulesNamespaceMap' of undefined"

(found in <Root>)

warn @ vue.runtime.esm.js?2b0e:619

logError @ vue.runtime.esm.js?2b0e:1884

globalHandleError @ vue.runtime.esm.js?2b0e:1879

handleError @ vue.runtime.esm.js?2b0e:1839

Vue._render @ vue.runtime.esm.js?2b0e:3544

updateComponent @ vue.runtime.esm.js?2b0e:4060

get @ vue.runtime.esm.js?2b0e:4473

Watcher @ vue.runtime.esm.js?2b0e:4462

mountComponent @ vue.runtime.esm.js?2b0e:4067

Vue.$mount @ vue.runtime.esm.js?2b0e:8409

eval @ template.js?ce56:19

eval @ template-engine.js?d9ef:24

DialogEditRender.getEditElement @ dialog-edit-renderer.js?3a93:95

DialogEditRender.createDialog @ dialog-edit-renderer.js?3a93:43

DialogEditRender.update @ dialog-edit-renderer.js?3a93:31

EditRender.update @ edit-renderer.js?4820:34

eval @ normal-edit.js?e95e:115

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

eval @ normal-edit.js?e95e:104

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

NormalEdit.startEdit @ normal-edit.js?e95e:102

DialogEdit.startEdit @ dialog-edit.js?4d40:50

Edit.startEdit @ edit.js?aa15:119

Grid.startEdit @ grid.js?9c37:2170

eval @ toolbar.js?e09d:218

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

Toolbar.toolbarClickHandler @ toolbar.js?e09d:210

Observer.notify @ observer.js?811a:99

Base.trigger @ base.js?3923:152

Toolbar.clickHandler @ toolbar.js?453f:547

Show 6 more frames

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property '_modulesNamespaceMap' of undefined

    at getModuleByNamespace (vuex.esm.js?2f62:1030)

    at Vue.mappedGetter (vuex.esm.js?2f62:917)

    at Watcher.get (vue.runtime.esm.js?2b0e:4473)

    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)

    at Vue.computedGetter [as findCompaniesInStore] (vue.runtime.esm.js?2b0e:4830)

    at Vue.companies (ProductDetail.vue?d797:103)

    at Watcher.get (vue.runtime.esm.js?2b0e:4473)

    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)

    at Vue.computedGetter [as companies] (vue.runtime.esm.js?2b0e:4830)

    at Object.get (vue.runtime.esm.js?2b0e:2072)

Attachment: dialog_85553ac.zip

[Seeni Sakthi Kumar Seeni Raj]

Hi Nurhan , 

Sorry for the inconvenience.   

Query : The item-values from this dropdownlist should come from database with vuex but actually i fetch this error and the dialog field shows empty because of this. 

 

We have created the sample with dropdownlist. In that we have bind the sorted data from the datasource as dropdownlist for the particular column. Please refer the below code example and sample for information. 

DialogTemp.vue 

<template> 

        <div id="dialogTemplate"> 

             <ejs-tab  id="element" > 

                <e-tabitems> 

                    <e-tabitem :header="headerText0" content="#tab1"></e-tabitem> 

                    <e-tabitem :header="headerText1" content="#tab2"></e-tabitem> 

                </e-tabitems> 

            </ejs-tab> 

            <div id="tab1"> 

            <div formGroup="orderForm"> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    <input id="OrderID" name="OrderID" v-model='data.OrderID' type="text" :disabled="!data.isAdd"> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="OrderID"> Order ID</label> 

                </div> 

            </div> 

            <div class="form-group col-md-6"> 

                <div class="e-float-input e-control-wrapper"> 

                    <input id="CustomerID" name="CustomerID" v-model='data.CustomerID' type="text"> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="CustomerID">Customer Name</label> 

                </div> 

            </div> 

        </div> 

       </div> 

            <div id="tab2" style='display: none'> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <ejs-numerictextbox id="Freight" placeholder="Freight" v-model='data.Freight' floatLabelType='Always'></ejs-numerictextbox> 

            </div> 

            <div class="form-group col-md-6"> 

                <ejs-datepicker id="OrderDate" placeholder="Order Date" v-model='data.OrderDate' floatLabelType='Always'></ejs-datepicker> 

            </div> 

        </div> 

        <div class="form-row"> 

           <div class="form-group col-md-6"> 

                <ejs-dropdownlist id="ShipCountry" v-model='data.ShipCountry' :dataSource='shipCountryDistinctData' :fields="{text: 'ShipCountry', value: 'ShipCountry' }" placeholder="Ship Country" popupHeight='300px' floatLabelType='Always'></ejs-dropdownlist> 

            </div> 

            <div class="form-group col-md-6"> 

                <ejs-dropdownlist id="ShipCity" v-model='data.ShipCity' :dataSource='shipCityDistinctData' :fields="{text: 'ShipCity', value: 'ShipCity' }" placeholder="Ship City" popupHeight='300px' floatLabelType='Always'></ejs-dropdownlist> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-12"> 

                <div class="e-float-input e-control-wrapper"> 

                    <textarea id="ShipAddress" name="ShipAddress" type="text" v-model='data.ShipAddress'></textarea> 

                    <span class="e-float-line"></span> 

                    <label class="e-float-text e-label-top" for="ShipAddress">Ship Address</label> 

                </div> 

                </div> 

            </div> 

        </div> 

        </div> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

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

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

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

import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs"; 

import { DataUtil } from "@syncfusion/ej2-data"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

import { data } from './datasource'; 

Vue.use(DropDownListPlugin); 

Vue.use(DatePickerPlugin); 

Vue.use(NumericTextBoxPlugin); 

Vue.use(TabPlugin); 

export default { 

  name: "app", 

  data() { 

      return { 

                  data: data, 

                  headerText0: { text: "Tab1" }, 

                  headerText1: { text: "Tab2" } 

                }; 

  }, 

  provide: { 

  }, 

  methods: { 

  }, 

  computed: { 

                shipCityDistinctData: () => { 

                  return DataUtil.distinct(data, "ShipCity", true);     // here you can customize your dropdownlist data 

                }, 

                shipCountryDistinctData: () => { 

                  return DataUtil.distinct(data, "ShipCountry", true); 

                } 

              } 

} 

</script> 

<style> 

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

--------- 

</style> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/dialogtemp_tab_dropdown_vue-526277422 

Please get back to us if you need further assistance. 

Regards, 

Seeni Sakthi Kumar S 

[Nurhan Aydogdu]

Hi,

i have try your solution but i am not clear about. You have add an import  like data.util but i am not sure how i can add this in my project. 
İ fetch referenceerrors when i try this code:

https://codesandbox.io/s/vue-template-e82b8


also i want know. İs it possible to have two Dialogtemplates for example dialogedit.vue for editing products and dialogadd.vue for add products?
i don't want the same dialog template for edit and add functions. The dialog for add has to look different. How can i do this?

 

[Seeni Sakthi Kumar Seeni Raj]

Hi Nurhan, 

Thanks for contacting Syncfusion support. 

DataUtil can be imported from the ej2-base library. We have considered 'Separate dialog template for the Edit and Add actions' requirement as custom sample and we will update the sample with in three business days. 

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

Regards, 

Seeni Sakthi Kumar S 

[Seeni Sakthi Kumar Seeni Raj]

Hi Nurhan , 

Greetings from Syncfusion support. 

Query : Is it possible to have two Dialogtemplates for example dialogedit.vue for editing products and dialogadd.vue for add products?
i don't want the same dialog template for edit and add functions. 

 

Yes, we have created separate template for both add and edit records but both in same vue component. Here, using if condition we have dynamically change the edit dialog template. Please refer the below code example and sample for information. 

Query : You have add an import  like data.util but i am not sure how i can add this in my project. 

We suggest you to add the dependency of DataUtil from "@syncfusion/ej2-data”. 

DialogTemp.vue 

<template> 

    <div id="dialogTemplate"> 

        <div v-if="data.isAdd"> 

            <ejs-tab id="element"> 

                <e-tabitems> 

                    <e-tabitem :header="headerText0" content="#tab1"></e-tabitem> 

                    <e-tabitem :header="headerText1" content="#tab2"></e-tabitem> 

                </e-tabitems> 

            </ejs-tab> 

            <div id="tab1"> 

                <div formGroup="orderForm"> 

                    <div class="form-row"> 

                        <div class="form-group col-md-6"> 

                            <div class="e-float-input e-control-wrapper"> 

                                <input id="OrderID" 

                                       name="OrderID" 

                                       v-model="data.OrderID" 

                                       type="text" 

                                      :disabled="!data.isAdd"> 

                                <span class="e-float-line"></span> 

                                <label class="e-float-text e-label-top" for="OrderID">Order ID</label> 

                            </div> 

                        </div> 

                        <div class="form-group col-md-6"> 

                            <div class="e-float-input e-control-wrapper"> 

                                <input id="CustomerID" name="CustomerID" v-model="data.CustomerID" type="text"> 

                                <span class="e-float-line"></span> 

                                <label class="e-float-text e-label-top" for="CustomerID">Customer Name</label> 

                            </div> 

                        </div> 

                    </div> 

                </div> 

 

                <div id="tab2" style="display: none"> 

                    <div class="form-row"> 

                        <div class="form-group col-md-6"> 

                            <ejs-numerictextbox id="Freight" 

                                                placeholder="Freight" 

                                                v-model="data.Freight" 

                                                floatLabelType="Always"></ejs-numerictextbox> 

                        </div> 

                        <div class="form-group col-md-6"> 

                            <ejs-datepicker id="OrderDate" 

                                            placeholder="Order Date" 

                                            v-model="data.OrderDate" 

                                            floatLabelType="Always"></ejs-datepicker> 

                        </div> 

                    </div> 

                    <div class="form-row"> 

                        <div class="form-group col-md-6"> 

                            <ejs-dropdownlist id="ShipCountry" 

                                              v-model="data.ShipCountry" 

                                              :dataSource="shipCountryDistinctData" 

                                              :fields="{text: 'ShipCountry', value: 'ShipCountry' }" 

                                              placeholder="Ship Country" 

                                              popupHeight="300px" 

                                              floatLabelType="Always"></ejs-dropdownlist> 

                        </div> 

                        <div class="form-group col-md-6"> 

                            <ejs-dropdownlist id="ShipCity" 

                                              v-model="data.ShipCity" 

                                              :dataSource="shipCityDistinctData" 

                                              :fields="{text: 'ShipCity', value: 'ShipCity' }" 

                                              placeholder="Ship City" 

                                              popupHeight="300px" 

                                              floatLabelType="Always"></ejs-dropdownlist> 

                        </div> 

                    </div> 

                    <div class="form-row"> 

                        <div class="form-group col-md-12"> 

                            <div class="e-float-input e-control-wrapper"> 

                                <textarea id="ShipAddress" 

                                          name="ShipAddress" 

                                          type="text" 

                                          v-model="data.ShipAddress"></textarea> 

                                <span class="e-float-line"></span> 

                                <label class="e-float-text e-label-top" for="ShipAddress">Ship Address</label> 

                            </div> 

                        </div> 

                    </div> 

                </div> 

            </div> 

        </div> 

 

        <div v-else> 

            <div formGroup="orderForm"> 

                <div class="form-row"> 

                    <div class="form-group col-md-6"> 

                        <div class="e-float-input e-control-wrapper"> 

                            <input id="OrderID" 

                                   name="OrderID" 

                                   v-model="data.OrderID" 

                                   type="text" 

                                   :disabled="!data.isAdd"> 

                            <span class="e-float-line"></span> 

                            <label class="e-float-text e-label-top" for="OrderID">Order ID</label> 

                        </div> 

                    </div> 

                    <div class="form-group col-md-6"> 

                        <div class="e-float-input e-control-wrapper"> 

                            <input id="CustomerID" name="CustomerID" v-model="data.CustomerID" type="text"> 

                            <span class="e-float-line"></span> 

                            <label class="e-float-text e-label-top" for="CustomerID">Customer Name</label> 

                        </div> 

                    </div> 

                </div> 

 

                <div class="form-row"> 

                    <div class="form-group col-md-12"> 

                        <div class="e-float-input e-control-wrapper"> 

                            <textarea id="ShipAddress" name="ShipAddress" type="text" v-model="data.ShipAddress"></textarea> 

                            <span class="e-float-line"></span> 

                            <label class="e-float-text e-label-top" for="ShipAddress">Ship Address</label> 

                        </div> 

                    </div> 

                </div> 

            </div> 

        </div> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

 

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

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

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

import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs"; 

import { DataUtil } from "@syncfusion/ej2-data"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

import { data } from "./datasource"; 

 

Vue.use(DropDownListPlugin); 

Vue.use(DatePickerPlugin); 

Vue.use(NumericTextBoxPlugin); 

Vue.use(TabPlugin); 

 

export default { 

  name: "app", 

  data() { 

    return { 

      edittype: "add", 

      data: data, 

      headerText0: { text: "Tab1" }, 

      headerText1: { text: "Tab2" } 

    }; 

  }, 

  provide: {}, 

  methods: {}, 

  computed: { 

    shipCityDistinctData: () => { 

      return DataUtil.distinct(data, "ShipCity", true); 

    }, 

    shipCountryDistinctData: () => { 

      return DataUtil.distinct(data, "ShipCountry", true); 

    } 

  } 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

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

Please get back to us if you need further assistance. 

Regards, 

Seeni Sakthi Kumar S

[Nurhan Aydogdu]

Hi Seeni,

my problem still exists. İ can't put any data from the database into my dropdownlist component in the edit page.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "ReferenceError: companies is not defined"

(found in )

warn @ vue.runtime.esm.js?2b0e:619

logError @ vue.runtime.esm.js?2b0e:1884

globalHandleError @ vue.runtime.esm.js?2b0e:1879

handleError @ vue.runtime.esm.js?2b0e:1839

Vue._render @ vue.runtime.esm.js?2b0e:3544

updateComponent @ vue.runtime.esm.js?2b0e:4060

get @ vue.runtime.esm.js?2b0e:4473

Watcher @ vue.runtime.esm.js?2b0e:4462

mountComponent @ vue.runtime.esm.js?2b0e:4067

Vue.$mount @ vue.runtime.esm.js?2b0e:8409

eval @ template.js?ce56:19

eval @ template-engine.js?d9ef:24

DialogEditRender.getEditElement @ dialog-edit-renderer.js?3a93:95

DialogEditRender.createDialog @ dialog-edit-renderer.js?3a93:43

DialogEditRender.update @ dialog-edit-renderer.js?3a93:31

EditRender.update @ edit-renderer.js?4820:34

eval @ normal-edit.js?e95e:115

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

eval @ normal-edit.js?e95e:104

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

NormalEdit.startEdit @ normal-edit.js?e95e:102

DialogEdit.startEdit @ dialog-edit.js?4d40:50

Edit.startEdit @ edit.js?aa15:120

Grid.startEdit @ grid.js?9c37:2178

eval @ toolbar.js?e09d:218

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

Toolbar.toolbarClickHandler @ toolbar.js?e09d:210

Observer.notify @ observer.js?811a:99

Base.trigger @ base.js?3923:152

Toolbar.clickHandler @ toolbar.js?453f:547

Show 6 more frames

vue.runtime.esm.js?2b0e:1888 ReferenceError: companies is not defined

    at Vue.shipCountryDistinctData (ProductDetail.vue?d797:421)

    at Watcher.get (vue.runtime.esm.js?2b0e:4473)

    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)

    at Vue.computedGetter [as shipCountryDistinctData] (vue.runtime.esm.js?2b0e:4830)

    at Object.get (vue.runtime.esm.js?2b0e:2072)

    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0586e89d-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/ProductDetail.vue?vue&type=template&id=0d3e5a56& (app.js:12694), :130:41)

    at Vue._render (vue.runtime.esm.js?2b0e:3542)

    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4060)

    at Watcher.get (vue.runtime.esm.js?2b0e:4473)

Please look at views directory/ProductDeatail.vue

 https://codesandbox.io/s/vue-template-e82b8 

[Nurhan Aydogdu]

Also when i try to add a grid into dialog i fetch the "modulenamespace" error again because of the datasource setting: 

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property '_modulesNamespaceMap' of undefined"

(found in )

warn @ vue.runtime.esm.js?2b0e:619

logError @ vue.runtime.esm.js?2b0e:1884

globalHandleError @ vue.runtime.esm.js?2b0e:1879

handleError @ vue.runtime.esm.js?2b0e:1839

Vue._render @ vue.runtime.esm.js?2b0e:3544

updateComponent @ vue.runtime.esm.js?2b0e:4060

get @ vue.runtime.esm.js?2b0e:4473

Watcher @ vue.runtime.esm.js?2b0e:4462

mountComponent @ vue.runtime.esm.js?2b0e:4067

Vue.$mount @ vue.runtime.esm.js?2b0e:8409

eval @ template.js?ce56:19

eval @ template-engine.js?d9ef:24

DialogEditRender.getEditElement @ dialog-edit-renderer.js?3a93:95

DialogEditRender.createDialog @ dialog-edit-renderer.js?3a93:43

DialogEditRender.update @ dialog-edit-renderer.js?3a93:31

EditRender.update @ edit-renderer.js?4820:34

eval @ normal-edit.js?e95e:115

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

eval @ normal-edit.js?e95e:104

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

NormalEdit.startEdit @ normal-edit.js?e95e:102

DialogEdit.startEdit @ dialog-edit.js?4d40:50

Edit.startEdit @ edit.js?aa15:120

Grid.startEdit @ grid.js?9c37:2178

eval @ toolbar.js?e09d:218

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

Toolbar.toolbarClickHandler @ toolbar.js?e09d:210

Observer.notify @ observer.js?811a:99

Base.trigger @ base.js?3923:152

Toolbar.clickHandler @ toolbar.js?453f:547

Show 6 more frames

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property '_modulesNamespaceMap' of undefined

    at getModuleByNamespace (vuex.esm.js?2f62:1030)

    at Vue.mappedGetter (vuex.esm.js?2f62:917)

    at Watcher.get (vue.runtime.esm.js?2b0e:4473)

    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)

    at Vue.computedGetter [as findCompaniesInStore] (vue.runtime.esm.js?2b0e:4830)

    at Vue.companies (CurrenciesDetail.vue?eb2e:293)

    at Watcher.get (vue.runtime.esm.js?2b0e:4473)

    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)

    at Vue.computedGetter [as companies] (vue.runtime.esm.js?2b0e:4830)

    at Object.get (vue.runtime.esm.js?2b0e:2072)

logError @ vue.runtime.esm.js?2b0e:1888

globalHandleError @ vue.runtime.esm.js?2b0e:1879

handleError @ vue.runtime.esm.js?2b0e:1839

Vue._render @ vue.runtime.esm.js?2b0e:3544

updateComponent @ vue.runtime.esm.js?2b0e:4060

get @ vue.runtime.esm.js?2b0e:4473

Watcher @ vue.runtime.esm.js?2b0e:4462

mountComponent @ vue.runtime.esm.js?2b0e:4067

Vue.$mount @ vue.runtime.esm.js?2b0e:8409

eval @ template.js?ce56:19

eval @ template-engine.js?d9ef:24

DialogEditRender.getEditElement @ dialog-edit-renderer.js?3a93:95

DialogEditRender.createDialog @ dialog-edit-renderer.js?3a93:43

DialogEditRender.update @ dialog-edit-renderer.js?3a93:31

EditRender.update @ edit-renderer.js?4820:34

eval @ normal-edit.js?e95e:115

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

eval @ normal-edit.js?e95e:104

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

NormalEdit.startEdit @ normal-edit.js?e95e:102

DialogEdit.startEdit @ dialog-edit.js?4d40:50

Edit.startEdit @ edit.js?aa15:120

Grid.startEdit @ grid.js?9c37:2178

eval @ toolbar.js?e09d:218

Observer.notify @ observer.js?811a:102

Base.trigger @ base.js?3923:152

GridComponent.trigger @ grid.component.js?c041:77

Toolbar.toolbarClickHandler @ toolbar.js?e09d:210

Observer.notify @ observer.js?811a:99

Base.trigger @ base.js?3923:152

Toolbar.clickHandler @ toolbar.js?453f:547

Show 5 more frames

Please look at views directory currenciesdetail.vue

https://codesandbox.io/s/vue-template-e82b8

All of my syncfusion package versions are the same. There is no mismatch of versions. 
How can i solve these two problems? 

[Thavasianand Sankaranarayanan]

Hi Nurhan, 

 

Query : İ can't put any data from the database into my dropdownlist component in the edit page. [Vue warn]: Error in render: "ReferenceError: companies is not defined"    

 

We have validated the provided details. we suggest you to import the datasource of companies in your productdetail.vue component to avoid the reported issue. Please refer the below code example and sample for more information. 

App.vue 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :editSettings="editSettings" 

      :actionBegin="actionBegin" 

      :actionComplete="actionComplete" 

      :toolbar="toolbar" 

      height="273px" 

    > 

      ---- 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

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

import { data } from "./datasource"; 

import dialogTemplate1 from "./productDetail.vue"; 

 

Vue.use(GridPlugin); 

 

export default { 

  name: "app", 

  data() { 

    return { 

      data: data, 

      editSettings: { 

        edittype: "", 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Dialog", 

        template: function() { 

          return { 

            template: dialogTemplate1 

          }; 

        } 

      }, 

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

    }; 

  } 

------- 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

productdetail.vue 

<template> 

  <div id="dialogTemplate1"> 

-------- 

  </div> 

</template> 

<script> 

---- 

import { companies1 } from "./companies"; 

import { DataUtil } from "@syncfusion/ej2-data"; 

----- 

  computed: { 

    shipCountryDistinctData: () => { 

      return DataUtil.distinct(companies1, "company", true);      // you have to import the data before you have to use. 

    } 

  }, 

 

Companies.js 

export let companies1 = [{ company: "a" }, { company: "b" }, { company: "c" }];   //reference data 

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

Query 2 : Also when i try to add a grid into dialog i fetch the "modulenamespace" error again because of the datasource setting:  

Currently we are working on to resolve the reported issue at our end and it will be updated with in a business day. 

Until then we appreciate your patience. 

Regards, 

Thavasianand S.              

[Eda Toprak]

Hello Thavasianand,
Thank you for your reply. But your send example is not what I want exactly. I used the mapaction and mapgetter methods when fetching data into datagrid. Actually i couldn't bring the data to the dropdown in the dialog component in the same way. How do I bring my data into a dropdown with vuex? any example for me? https://www.syncfusion.com/forums/143538/vue-dialog-content-as-a-vue-template I found this example.  But here used axios. I want in example with vuex. Data will comes from my database.

[Rajapandiyan Settu]

Hi Nurhan , 

Greetings from Syncfusion support. 

Query#1 : Also when i try to add a grid into dialog i fetch the "modulenamespace" error again because of the datasource setting:  

 

we have validated the provide details. when using mapgetters and mapaction we have to pass the parameters inside the indexes ”[]”. You can resolve your issue by using ( ...mapActions([ ..params.. ]) ). Please refer the below code example and sample for information. 

 

currenciesDetails.vue 

 

  computed: { 

    ...mapGetters ([ "currencies", { findCurrenciesInStore: "find" } ]), 

    currencies() { 

      return this.findCurrenciesInStore({ 

        query: { $select: ["currency", "currency_id"] }, 

        paginate: false 

      }).data; 

    }, 

    ...mapGetters ([ "companies", { findCompaniesInStore: "find" } ]), 

    companies() { 

      return this.findCompaniesInStore({ 

        query: { $select: ["company"] }, 

        paginate: false 

      }).data; 

    } 

  }, 

  methods: { 

    ...mapActions ([ "currencies", { findCurrencies: "find" } ]), 

    ...mapActions ([ "companies", { findCompanies: "find" } ]), 

    onFileRemove: function(args) { 

      args.postRawFile = false; 

    }, 

     

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

 

Query#2:  How do I bring my data into a dropdown with vuex? 

 

From your query, we suspect that you want to provide a data source to the dropDownList from your own service. So, we suggest you to use the dataSource property of the dropDownList in your service onSuccess event to provide result to the dropdownlist. 

 

this.$refs.dropdown.dataSource = result // provided the data to dropdownlist through the dataSource property 

 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S.