Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
148744 | Nov 1,2019 02:24 PM UTC | Dec 3,2019 02:31 PM UTC | Vue | 16 |
![]() |
Tags: Data Grid |
<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>
|
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>
|
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>
|
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> |
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
|
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;
},
|
this.$refs.dropdown.dataSource = result // provided the data to dropdownlist through the dataSource property |
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.
This page will automatically be redirected to the sign-in page in 10 seconds.