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.
|
<template>
<div class="control-section">
<div style="width:100%">
<div>
</div>
<div id="Grid"></div>
<button v-on:click="Gridrender">Render Grid</button>
<div id="diagram-space" class="sb-mobile-diagram">
<ejs-diagram ref="diagramObject" style='display:block' id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { Browser } from "@syncfusion/ej2-base";
import { GridPlugin } from '@syncfusion/ej2-vue-grids';
import { Grid, RowDD, Selection } from '@syncfusion/ej2-grids';
...
Vue.use(GridPlugin);
Grid.Inject(Selection, RowDD);
...
export default Vue.extend({
data: function() {
...
},
methods:{
Gridrender(e){
var data = [...];
var grid = new Grid({
dataSource:data,
allowRowDragAndDrop:true,
width:800,
height:400,
columns: [
{ field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', width: 140 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 140 }]
});
grid.appendTo('#Grid'); //append Grid instance to div element
}
},
mounted: function() {
let diagram = this.$refs.diagramObject.ej2Instances;
let node = diagram.nodes[0];
let content = document.getElementById('Grid');
document.getElementById('gridContent').appendChild(content);
diagram.dataBind();
}
});
</script>
<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
</style>
|
