Custom Edit Modal Template not saving data like gird does with tree grid.

[James Boomer]

I have a custom modal for editing a record in the treegrid.  i used to use this method inthe normal gid all the time where you use a form and have inputs with the field names.  this does not appear to work with the tree grid. In a normal grid i am using the actionBegin and actionComplete to update the grid.  Unfortanatle the data passed back is unchaged by the modal editing with the custom template.  I have attached the files i use in a sample form and can not get the data to update from the form.  what is the best way to get the updated data and submit back to the tree grid.

<script>
import { TreeGridComponent, Edit, CommandColumn, ColumnDirective, ColumnsDirective, Toolbar } from "@syncfusion/ej2-vue-treegrid";
import TestModal from "./templates/TestModal.vue";


export default {
  name: "TestTreeGrid",
  components: {
    TestModal,
    "ejs-treegrid":TreeGridComponent,
    "e-columns":ColumnsDirective,
    "e-column":ColumnDirective,
  },
  provide: {
    treegrid: [ Edit, CommandColumn,Toolbar ],
  },
  data() {
    return{
      projectStructure: [
        {id:1, name:"test", children: [
            {id:11, name:"test1"},
            {id:11, name:"test12"},
            {id:11, name:"test13"},
          ]},
        {id:2, name:"test2", children: [
            {id:21, name:"test21"},
            {id:22, name:"test22"},
          ]}
      ] ,
      editSettings: {
        allowEditing: true, allowAdding: true, allowDeleting: false, mode: 'Dialog', template: function () {
          return {
            template: TestModal,
          }
        }
      },
    }
  },
  methods:{
    toolbarClick(args){
      debugger
    },
    changeTitle:function(args){
      if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
        let dialog = args.dialog;
        dialog.height = 870;
        dialog.width = 900;
        // change the header of the dialog
        dialog.header = args.requestType === 'beginEdit' ? 'Edit Record' : 'New Record';
      }
    },
    crudFunction:function(args){
      if(args.requestType === 'save'){
        console.log(args.data.name);
      }
    },

  }
}
</script>

<template>
  <div>
    <ejs-treegrid
        :dataSource="projectStructure"
        childMapping="children"
        :treeColumnIndex="1"
        ref="projectStucture"
        height='620px'
        :editSettings='editSettings'
        :actionComplete="changeTitle"
        :actionBegin="crudFunction"

    >
      <e-columns>
        <e-column field='id' :visible=false  :isPrimaryKey='true'  headerText='ID'  width=90 textAlign='Right'></e-column>
        <e-column field='name' headerText='Name' width="370"  ></e-column>
      </e-columns>
    </ejs-treegrid>
  </div>

</template>

And the Modal is setup like this:

<template>
  <form id="ProjectAddForm" >
    <div class="row justify-content-md-center">
      <div class="col-md-12" style="padding-top: 0px;">
        <div class="tb-card tb-style1">
          <div class="tb-card-heading" style="padding-bottom: 5px; padding-top: 5px; min-height: 40px;">
            <h2 class="tb-card-title">Project Information</h2>
            {{this.data}}
          </div>
          <div class="tb-card-body">
            <div class="row justify-content-md-center tb-padd-lr-15">
              <div class="col-md-5" style="padding-bottom: 6px; padding-top: 6px;">
                <div class="form-group " style="margin-bottom: 0px">
                  <ejs-textbox
                      name="name"
                      id="name"
                      ref="name"
                      floatLabelType="Auto"
                      placeholder="Name"
                      v-model="data.name"
                  >

                  </ejs-textbox>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>


</template>

[Sreedhar Kumar Panarapu Sreenivasulu Panarapu]

Hi James Boomer,

Greetings from Syncfusion support.

We reviewed the code snippets you shared and tested the reported scenario by creating a sample based on your implementation. We tested your scenario in our prepared sample, but we were not able to reproduce the issue—the edited values were updated correctly. You can check the working sample below:

Tested Sample:
58pcmtk7 (duplicated) - StackBlitz

To further investigate and replicate the exact issue at our end, please provide the following details:

1. A video recording showing the issue along with the steps to reproduce it.
2. A runnable issue‑replicable sample, or please try reproducing the issue directly in our shared sample.
3. The exact Syncfusion TreeGrid component version you are currently using.

Once we receive these details, we will proceed with deeper investigation and provide a precise solution.

 

Also in your template, a separate <form> element is used; however, the TreeGrid Edit module automatically generates its own form element during dialog editing. Because of this, adding an additional form manually is not required.

 

Regards,
Sreedhar

[James Boomer]

The sample you made is not pulling in the template properly

I have updated it here but it is error now.:

https://ebkearpt-vjhpegw4.stackblitz.io

I have a video recording here

Issue with tree grid - TechSmith Screencast

  we are using 

"@syncfusion/ej2-vue-treegrid": "~32.2.9",

[Shek Mohammed Asiq Abdul Jabbar]

Hi James Boomer,

Thanks for sharing the video.

The problem occurs because the dialog template has been wrapped inside a <form> tag. When a form is nested inside another form, the browser’s native form‑handling rules interfere with the TreeGrid’s internal edit form.

As a result:

• The modified/edited values do not sync properly,
• Some inputs bypass the internal form, and
• In certain cases, the edit module reads stale values instead of the updated ones.

TreeGrid internally generates its own form element for editing. When an additional <form> is placed inside the template, it breaks the expected hierarchy and causes the incorrect behavior you observed.

To resolve the issue, please remove the <form> tag from your template. This aligns with Syncfusion’s own dialog‑template samples, where:

• No external <form> is used
• Only the template content is rendered inside the edit dialog
• The TreeGrid handles form generation and validation internally

Once the <form> tag is removed, the edited values will update as expected. We have attached a Vue sample using the same version and the same code structure you shared. This sample demonstrates the correct behavior without the nested form.

If you have any questions or need further assistance, please feel free to let us know — we are happy to help.

Regards,

Shek

Attachment: Vue3editTemplate_1221ea31.zip