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.
|
actionBegin:
actionBegin: function(args) {
if (args.requestType === "save") {
console.log(args.data); // edited data
// PLease store this data in Vuex store
}
}
BeforeBatchSave:
beforeBatchSave: function(args) {
console.log("Edited records :" + args.batchChanges.changedRecords); // edited records
console.log("Deleted records :" + args.batchChanges.deletedRecords); // deleted records
console.log("Added records :" + args.batchChanges.addedRecords); // added records
// you can collected edited record details like as above code
} |
|
<template>
<div class="col-lg-12 control-section">
<div>
<ejs-grid :dataSource="data" :allowPaging='true'
:editSettings='editOptions' :toolbar='toolbarItems' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' :isPrimaryKey='true'></e-column>
<e-column field='CustomerID' headerText='Customer Name' width='150' :validationRules='orderidrules'
foreignKeyValue='ContactName' foreignKeyField='CustomerID' :dataSource='customerData'></e-column>
</e-columns>
</ejs-grid>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { GridPlugin, ForeignKey, Toolbar, Page } from "@syncfusion/ej2-vue-grids";
import { orderDetails, customerData } from "./data-source";
Vue.use(GridPlugin);
export default Vue.extend({
data: () => {
return {
data: orderDetails.slice(0),
toolbarItems : ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
customerData : customerData,
};
},
provide: {
grid: [ForeignKey, Page, Toolbar]
}
});
</script> |
|
<template>
<div id="app">
<input @change="change" type="checkbox">
<ejs-grid id="Grid" ref="grid" :height="400" :dataSource="data" :columns="columns"></ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data, employee } from "./datasource";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
columns: [
{
field: "OrderID",
headerText: "Order ID",
width: 120,
textAlign: "Right"
},
{ field: "CustomerID", headerText: "Customer Name", width: 150 }
],
cTemplate: function() {
return {
template: Vue.component("columnTemplate", {
template: `<span>{{modify(data.index)}}</span>`,
data: function(e) {
return {
data: {}
};
},
methods: {
modify: function(e) {
return parseInt(e, 0) + 1;
}
}
})
};
}
};
},
provide: {},
methods: {
change: function(e) {
if (e.target.checked) {
this.data = employee;
this.columns = [
{
field: "EmployeeID",
headerText: "Employee ID",
textAlign: "Right",
width: 125
},
{ field: "FirstName", headerText: "Name", width: 120 }
];
} else {
this.data = data;
this.columns = [
{
field: "OrderID",
headerText: "Order ID",
width: 120,
textAlign: "Right"
},
{ field: "CustomerID", headerText: "Customer Name", width: 150 }
];
}
}
}
};
</script>
|
<e-column headerText='Order Status' :template="dropdownTemplate" width=200></e-column>|
[App.Vue]
<template>
<div id="app">
<input @change="change" type="checkbox">
<ejs-grid
id="Grid"
ref="grid"
:height="400"
:queryCellInfo="onQueryCellInfo"
:dataSource="data"
:columns="columns"
></ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import {
DropDownListPlugin,
DropDownList
} from "@syncfusion/ej2-vue-dropdowns";
import { data, employee } from "./datasource";
Vue.use(GridPlugin);
Vue.use(DropDownListPlugin, DropDownList);
export default {
data() {
return {
data: data,
columns: [
{
headerText: "Order Details",
template:
'<div><select class="e-control e-dropdownlist"><option value="1" selected="selected">Order Placed</option><option value="2">Processing</option><option value="3">Delivered</option></select></div>'
},
],
};
},
provide: {},
methods: {
onQueryCellInfo: function(args) {
var ele = args.cell.querySelector("select");
if (ele) {
var dropdown = new DropDownList({ popupHeight: 150, popupWidth: 150 });
dropdown.appendTo(ele);
}
},
}
}
}
};
</script>
|
Hi Seeni,
thank you for your support.
İ have a table in my project. This datagrid contains data from three more tables. İ have a Syncfusion Actionbegin method and i want to execute delete, add and save actions. To execute an add action my datagrid contains a dialog template. When I trigger a new entry I get an error message in console;
name: "BadRequest", message: "notNull Violation: products.id cannot be null
This error may be due to the fact that in our ORM model and in our database table the id fields are not allowed to be null. Also my dialog template from datagrid does not contain an idfield to fill when creating or editing a entry.
İn my product table i have named primarykeyfield as id for test purposes (see attachments). The remaining tables were named as table name + _id can this lead to this error message? How can i solve this?
|
// Join the three tables into single
var query = from a in _context.Orders join b in customer on a.CustomerID equals b.CustomerID select new { a.CustomerID, a.EmployeeID,a.OrderDate,a.OrderID,a.ShipCity,b.CustomerName};
IEnumerable MergeTable = from x in query join y in employee on x.CustomerName equals y.CustomerName select new { x.OrderID, x.CustomerName, x.CustomerID, x.EmployeeID, x.OrderDate, x.ShipCity, y.Address };
|
