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.
|
App.vue
<template>
<div id="app">
<ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :editSettings="editSettings"
:toolbar="toolbar">
<e-columns>
<e-column field="OrderID" headerText="Order ID" width="90" isPrimaryKey="true"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="150" :edit='dpParams'></e-column>
-------------
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Edit, Page, Toolbar } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource";
import { MultiSelectPlugin, MultiSelect } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(GridPlugin);
Vue.use(MultiSelectPlugin);
let elem;
let multiSelectObj;
export default {
data() {
return {
data: data,
----------------------------
dpParams: {
create: function() {
elem = document.createElement('input');
return elem;
},
read: () => {
return multiSelectObj.value;
},
destroy: () => {
multiSelectObj.destroy();
},
write: (args) => {
var data = args.rowData.ShipCountry;
multiSelectObj = new MultiSelect({
value: typeof(data) === 'string' ? args.rowData.ShipCountry.split() : data,
fields: {text: 'ShipCountry', value: 'ShipCountry'},
dataSource: dataSource[‘countries’]
});
multiSelectObj.appendTo(elem);
}
}
};
},
provide: {
grid: [Page, Edit, Toolbar]
}
};
</script>
<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
</style> |
