Edit template from another vue in Vue Grid component

28 Mar 20234 minutes to read

You can achieve the dialog template editing using another vue page.

<template>
    <div id="app">
         <ejs-grid :dataSource="data" :editSettings="editSettings" :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>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import DialogTemplate from "./dialogtemp.vue";
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { NumericTextBox } from "@syncfusion/ej2-inputs";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
import { DataUtil } from '@syncfusion/ej2-data';

Vue.use(GridPlugin);
Vue.use(DropDownListPlugin);
Vue.use(DatePickerPlugin);
Vue.use(NumericTextBoxPlugin)

export default {
  data() {
    return {
      data: data,
      editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
        mode: "Dialog",
        template: function() {
          return { template: DialogTemplate };
        }
      },
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"]
    };
  },
  provide: {
    grid: [Page, Edit, Toolbar]
  },
  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("OrderID").focus();
      }
    }
  }
}
</script>
<style>
 @import "https://cdn.syncfusion.com/ej2/material.css";
 @import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css";

.form-group.col-md-6 {
    width: 250px;
    height: 54px;
}
.form-group.col-md-12 {
    height: 72px;
}
#ShipAddress {
    resize: vertical;
}

</style>

Create new vue page with the name of dialogtemp.vue and paste the below code.

<template>
  <div formGroup="orderForm">
    <div class="form-row">
      <div class="form-group col-md-6">
        <div class="e-float-input e-control-wrapper">
          <input  ref="OrderID" id="OrderID" name="OrderID" v-model="data.OrderID" type="text" :disabled="!data.isAdd">
          <span class="e-float-line"></span>
          <label class="e-float-text e-label-top" for="OrderID">Order ID</label>
        </div>
      </div>
      <div class="form-group col-md-6">
        <div class="e-float-input e-control-wrapper">
          <input ref="CustomerID" id="CustomerID" name="CustomerID" v-model="data.CustomerID" type="text">
          <span class="e-float-line"></span>
          <label class="e-float-text e-label-top" for="CustomerID">Customer Name</label>
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <ejs-numerictextbox id="Freight" placeholder="Freight" v-model="data.Freight" floatLabelType="Always" ></ejs-numerictextbox>
      </div>
      <div class="form-group col-md-6">
        <ejs-datepicker id="OrderDate" placeholder="Order Date" v-model="data.OrderDate" floatLabelType="Always" ></ejs-datepicker>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <ejs-dropdownlist id="ShipCountry" v-model="data.ShipCountry" :dataSource="shipCountryDistinctData"  :fields="{text: 'ShipCountry', value: 'ShipCountry' }" placeholder="Ship Country" popupHeight="300px" floatLabelType="Always" ></ejs-dropdownlist>
    </div>
      <div class="form-group col-md-6">
        <ejs-dropdownlist id="ShipCity" v-model="data.ShipCity" :dataSource="shipCityDistinctData" :fields="{text: 'ShipCity', value: 'ShipCity' }" placeholder="Ship City" popupHeight="300px" floatLabelType="Always"></ejs-dropdownlist>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-12">
        <div class="e-float-input e-control-wrapper">
          <textarea id="ShipAddress" name="ShipAddress" type="text" v-model="data.ShipAddress"></textarea>
          <span class="e-float-line"></span>
          <label class="e-float-text e-label-top" for="ShipAddress">Ship Address</label>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { data } from './datasource.js';
import { DataUtil } from "@syncfusion/ej2-data";

export default {
  data() {
    let shipCity = DataUtil.distinct(data, "ShipCity", true);
    let shipCountry = DataUtil.distinct(data, "ShipCountry", true);
    return {
      data: {},
      shipCityDistinctData: shipCity,
      shipCountryDistinctData: shipCountry
    };
  },
  mounted() {
    // Set initail Focus
    if (this.data.isAdd) {
      this.$refs.OrderID.focus();
    } else {
      this.$refs.CustomerID.focus();
    }
  }
};
</script>