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.
New Product Launch - BoldDesk !
Introducing help desk ticketing software.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
<template>
<div id="app">
<ejs-grid
. . . .
:actionBegin="actionBegin"
:actionComplete="actionComplete"
:toolbar="toolbar"
height="273px"
>
<e-columns>
<e-column
field="OrderID"
headerText="Order ID"
textAlign="Right"
:isPrimaryKey="true"
width="100"
></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
. . . .
export default {
data() {
return {
data: data,
. . . .
template: function() {
return { template: DialogTemplate };
}
},
},
methods: {
actionBegin(args) {
if (args.requestType === "save") {
// cast string to integer value.
args.data["Freight"] = parseFloat(
args.form.querySelector("#Freight").value
);
}
},
actionComplete(args) {
// Set initail Focus
if (args.requestType === "beginEdit") {
args.form.elements.namedItem("CustomerName").focus();
}
}
}
};
</script> |
|
<template>
<div id="dialogTemplate">
<ejs-tab id="element">
<e-tabitems>
<e-tabitem :header="headerText0" content="#general"></e-tabitem>
<e-tabitem :header="headerText1" content="#seo"></e-tabitem>
</e-tabitems>
</ejs-tab>
<div id="general">
. . .
</div>
<div id="seo" style="display: none">
. . . . .
</div>
</div>
</template>
<script>
import Vue from "vue";
import { data } from "./data";
import { DataUtil } from "@syncfusion/ej2-data";
import { TabPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(TabPlugin);
export default {
data() {
let shipCity = DataUtil.distinct(data, "ShipCity", true);
let shipCountry = DataUtil.distinct(data, "ShipCity", true);
return {
data: {},
shipCityDistinctData: shipCountry,
shipCountryDistinctData: shipCountry,
headerText0: { text: "Edit/Add" },
headerText1: { text: "JavaScript" }
};
}
</script>
|
