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 class="col-lg-12 control-section">
<ejs-grid
ref="grid"
id="grid"
:dataSource="data"
:allowPaging="true"
:actionBegin="actionBegin"
:pageSettings="pageSettings"
:editSettings="editSettings"
:toolbar="toolbar"
>
<e-columns>
<e-column
field="OrderID"
. . .
:isPrimaryKey="true"
></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column
field="Freight"
headerText="Freight"
width="120"
format="C2"
textAlign="Right"
editType="numericedit"
></e-column>
. . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource";
Vue.use(GridPlugin);
export default Vue.extend({
data: () => {
return {
data: data.slice(0),
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true
},
toolbar: ["Add", "Delete", "Update", "Cancel"],
editparams: { params: { popupHeight: "300px" } },
pageSettings: { pageCount: 5 }
};
},
methods: {
actionBegin: function(args) {
if (args.requestType === "save") {
this.$refs.grid.ej2Instances.editModule.formObj.addRules(
"OrderID",{ required: true, number: true });
this.$refs.grid.ej2Instances.editModule.formObj.addRules(
"Freight",{ number: true,required: true });
this.$refs.grid.ej2Instances.editModule.formObj.addRules(
"CustomerID",{ required: true });
// here you will get true or false based on the validationRules
if (!this.$refs.grid.ej2Instances.editModule.formObj.validate()) {
//cancel the save action, if the validation rules are not satisfied
args.cancel = true;
}
}
}
},
provide: {
grid: [Toolbar, Edit, Page]
}
});
</script>
|
|
<template>
<div class="col-lg-12 control-section">
<ejs-grid
ref="grid"
id="grid"
:rowDataBound="rowDataBound"
:dataSource="data"
:allowPaging="true"
>
<e-columns>
. . .
<e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
. . .
export default Vue.extend({
data: () => {
return {
data: data.slice(0, 5)
};
},
methods: {
rowDataBound: function(args) {
if (args.data["Freight"] < 30) {
args.row.cells[2].classList.add("below-30");
} else if (args.data["Freight"] < 80) {
args.row.cells[2].classList.add("below-80");
} else {
args.row.cells[2].classList.add("above-80");
}
}
},
provide: {
grid: [Toolbar, Edit, Page]
}
});
</script>
<style>
.below-30 {
background-color: orangered;
}
.below-80 {
background-color: yellow;
}
.above-80 {
background-color: greenyellow;
}
</style>
|
|
App.Vue
<template>
<div class="col-lg-12 control-section">
<ejs-grid
ref="grid"
id="grid"
:queryCellInfo="QueryCellInfo"
:dataSource="data"
:allowPaging="true"
:frozenColumns="3"
>
. . .
<e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column> . . .
methods: {
QueryCellInfo: function(args) {
if (args.column.field === "Freight") {
if (args.data["Freight"] < 30) {
args.cell.classList.add("below-30");
} else if (args.data["Freight"] < 80) {
args.cell.classList.add("below-80");
} else {
args.cell.classList.add("above-80");
}
}
}
},
});
</script>
<style>
.below-30 {
background-color: orangered;
}
.below-80 {
background-color: yellow;
}
.above-80 {
background-color: greenyellow;
}
</style>
|
|
<template>
<div class="col-lg-12 control-section">
<ejs-grid ref="grid" id="grid" :queryCellInfo="QueryCellInfo" :dataSource="data"
:allowPaging="true" :frozenColumns="3">
. . .
<e-column field="Freight1" headerText="Frieght 1" width="130" format="C2"></e-column>
<e-column field="Freight2" headerText="Freight 2" width="130" format="C2"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
export default Vue.extend({
. . .
methods: {
QueryCellInfo: function(args) {
if (args.column.field === "Freight1") {
if (args.data["Freight1"] > args.data["Freight2"]) {
args.cell.classList.add("above-80");
}
}
}
}
});
</script>
|
