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

using tab inside the dialog editing

Thread ID:

Created:

Updated:

Platform:

Replies:

148744 Nov 1,2019 02:24 PM UTC Dec 3,2019 02:31 PM UTC Vue 16
loading
Tags: Data Grid
Nurhan Aydogdu
Asked On November 1, 2019 02:24 PM UTC

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 [Syncfusion]
Replied On November 4, 2019 01:23 PM UTC

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 [Syncfusion]
Replied On November 6, 2019 12:32 PM UTC

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





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

Regards, 

Seeni Sakthi Kumar S

Nurhan Aydogdu
Replied On November 8, 2019 12:06 PM UTC

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 [Syncfusion]
Replied On November 11, 2019 07:32 AM UTC

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.
 
 
Regards, 
Seeni Sakthi Kumar S

Nurhan Aydogdu
Replied On November 12, 2019 09:12 AM UTC

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 [Syncfusion]
Replied On November 13, 2019 02:26 PM UTC

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> 
 
 
 
Regards, 
Rajapandiyan S.           


Nurhan Aydogdu
Replied On November 14, 2019 12:00 PM UTC

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 [Syncfusion]
Replied On November 15, 2019 10:37 AM UTC

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



Please get back to us if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S 


Nurhan Aydogdu
Replied On November 20, 2019 06:57 AM UTC

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 [Syncfusion]
Replied On November 20, 2019 02:10 PM UTC

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 [Syncfusion]
Replied On November 22, 2019 12:00 PM UTC

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


Please get back to us if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S

Nurhan Aydogdu
Replied On November 27, 2019 08:46 AM UTC

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
Replied On November 27, 2019 08:47 AM UTC

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 [Syncfusion]
Replied On November 27, 2019 01:39 PM UTC

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




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
Replied On December 2, 2019 01:23 PM UTC

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 [Syncfusion]
Replied On December 3, 2019 02:31 PM UTC

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; 
    }, 
     

 
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.              


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