Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
148996 | Nov 11,2019 01:59 PM UTC | Nov 20,2019 06:48 AM UTC | Vue | 5 |
![]() |
Tags: Data Grid |
<e-column field='responsible.label' headerText='Responsible' :editTemplate='editTemplate' width='100'></e-column>
editTemplate: function () {return {template: UserDropdown}
<ejs-dropdownlist name="userDropdown" ref="userDropdown" v-model="userId" placeholder="Select user..." :allowFiltering='allowFiltering' :ignoreAccent='ignoreAccent'
:dataSource="users" :fields="fieldsUsers" :change="doCustomAction"></ejs-dropdownlist>
doCustomAction: function (event) {
console.log("UserDropdown - doCustomActin: " + event);
this.$emit('los', event.value);
}
<UserDropdown v-on:los="doSomething"/>
<template>
<div id="app">
<ejs-grid
. . . .
:actionBegin="actionBegin" . . .>
<e-columns>
. . .
<e-column
field="ShipCountry"
headerText="Ship Country"
width="150"
:editTemplate="editTemplate"
></e-column>
. . . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import UserDropdown from "./child";
Vue.prototype.$eventHub = new Vue();
export default {
components: {
UserDropdown
},
data() {
return {
shipCountry: "",
. . .
};
},
methods: {
editTemplate: function() {
return { template: UserDropdown };
},
actionBegin: function(args) {
if (args.requestType === "beginEdit") {
this.$eventHub.$on("ShipCountry", this.getTemplateValue);
}
if (args.requestType === "save") {
args.data.ShipCountry = this.shipCountry;
}
},
getTemplateValue: function(e) {
this.shipCountry = e;
}
}
|
<template>
<ejs-dropdownlist
name="userDropdown"
id="dropdownlist"
:change="doCustomAction.bind(this)"
:dataSource="users"
:fields="fieldsUsers"
></ejs-dropdownlist>
</template>
<script>
export default {
data() {
return {
name: "userDropdown",
data: {},
users: [
{ Id: "1", Country: "France" },
.
.
],
fieldsUsers: { text: "Country", value: "Country" }
};
},
methods: {
doCustomAction: function(args) {
console.log(args.value);
this.$eventHub.$emit("ShipCountry", args.value);
}
}
};
</script>
|
[child.vue]
doCustomAction: function(args) {
console.log(args.value);
this.$eventHub.$emit("ShipCountry", args.value);
this.$store.commit("change", args.value);
}
[parent.vue]
. . . . .
<p> <b>Modified value:</b> {{ $store.getters.Value }} </p> // to display the stored value
. . . . . .
[store.js]
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
Value: ""
},
mutations: {
change: function(state, value) {
debugger;
state.Value = value;
}
},
getters:
{
Value: state => state.Value
}
});
[main.js]
//import store in main.js
import { store } from "./store/store";
new Vue({
store,
render: h => h(App)
}).$mount("#app");
|
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.