When I want to edit a data in the data list, the “onRowUpdated” function does not work when I save the dynamically added entries after editing them. I think the problem is in the data-field mapping.

dynamic added section

 <DxItem
            v-for="(channel, index) in popupFormData.channels"
            :key="index"
            :col-count="1"
            :col-span="2"
            item-type="group"
            caption="Teams Kanal İçeriği"
           
          >
            <DxItem data-field="Kanal İsmi">
                          <DxTextBox v-model="channel.channelName" @value-changed="e => handleChannelChange(index, 'channelName', e)" /> 
                        </DxItem>

                    <DxItem data-field="Team Id">
              <DxTextBox v-model="channel.teamId" @value-changed="e => handleChannelChange(index, 'teamId', e)" />
            </DxItem>
                    <DxItem data-field="Channel Id">
              <DxTextBox v-model="channel.channelId" @value-changed="e => handleChannelChange(index, 'channelId', e)" />
            </DxItem>

FullCode

<template>
  <div id="data-grid-demo">
    <DxDataGrid
      :data-source="customers"
      :show-borders="true"
      @editingStart="onEditingStart"
      @rowInserted="onRowInserted"
      @rowUpdated="onRowUpdated"
      @row-updating="test"
      @rowRemoved="onRowRemoved"
    >
      <DxPaging :enabled="false"/>
      <DxEditing
        :allow-updating="true"
        :allow-adding="true"
        :allow-deleting="true"
        mode="popup"
      >
        <DxPopup
          :show-title="true"
          :width="700"
          :height="675"
          title="Teams Bildirim Ayarı"
          :onHiding="handlePopupHiding"
        />
        <DxForm>
          <DxItem
            :col-count="1"
            :col-span="2"
            item-type="group"
          >
            <DxItem data-field="clientId"/>
 
          <DxItem data-field="message" editor-type="dxTextArea"/>
          </DxItem>

          <DxItem
            v-for="(channel, index) in popupFormData.channels"
            :key="index"
            :col-count="1"
            :col-span="2"
            item-type="group"
            caption="Teams Kanal İçeriği"
           
          >
            <DxItem data-field="Kanal İsmi">
                          <DxTextBox v-model="channel.channelName" @value-changed="e => handleChannelChange(index, 'channelName', e)" /> 
                        </DxItem>

                    <DxItem data-field="Team Id">
              <DxTextBox v-model="channel.teamId" @value-changed="e => handleChannelChange(index, 'teamId', e)" />
            </DxItem>
                    <DxItem data-field="Channel Id">
              <DxTextBox v-model="channel.channelId" @value-changed="e => handleChannelChange(index, 'channelId', e)" />
            </DxItem>
            <DxItem data-field=""><DxButton @click="deleteChannel(index)">Kanalı Sil</DxButton>  </DxItem> 
                    </DxItem>
          <DxItem
            :col-count="1"
            :col-span="2"
            item-type="group"
          >
            <DxButton @click="addNewChannel">Kanal Ekle</DxButton>
          </DxItem>
        </DxForm>
      </DxEditing>
      <DxColumn data-field="clientId" caption="Servis">
        <DxLookup
          :data-source="serviceList"
          value-expr="id"
          display-expr="name"
        />
      </DxColumn>
      <DxColumn data-field="message" />
      <DxColumn 
        data-field="channels" 
        caption="Kanallar"
        :cell-template="channelsCellTemplate"
        />
    </DxDataGrid>
  </div>
</template>

<script setup lang="ts">
import {
  DxDataGrid,
  DxColumn,
  DxPaging,
  DxEditing,
  DxPopup,
  DxLookup,
  DxForm,
} from 'devextreme-vue/data-grid';
import { DxItem ,DxSimpleItem} from 'devextreme-vue/form';
import { DxButton } from 'devextreme-vue/button';
import { DxTextArea } from 'devextreme-vue/text-area';
import {DxTextBox} from "devextreme-vue/text-box"
import { ref, onMounted } from 'vue';
import axios from "../interceptors/AxiosInterceptor.js";
import 'devextreme/dist/css/dx.light.css';
 
const customers = ref([]);
const serviceList = ref([]);
const loading = ref(false);
const popupVisible = ref(false);
const popupFormData = ref({
  message: "",
  channels: [
    { channelName: "", teamId: "", channelId: "" },
  ],
});

const fetchData = async () => {
  try {
    loading.value = true;
    const response = await axios.get('/Home/getTeamsSettings');
    customers.value = response.data;
 
  } catch (error) {
    console.error("Veri çekme hatası:", error);
  } finally {
    loading.value = false;
  }
};

const fetchServisList = async () => {
  try {
    const response = await axios.get('/Home/getServiceList');  
    serviceList.value = response.data;
  } catch (error) {
    console.error("Servis listesi çekme hatası:", error);
  }
};

const onEditingStart = (e: any) => {
 
   popupFormData.value.message = e.data.message;
   popupFormData.value.channels = e.data.channels || [
     { channelName: "", teamId: "", channelId: "" },
  ];
};

const handlePopupHiding = () => {
  popupVisible.value = false;
};

const handleMessageChange = (e: any) => {
 customers.value[0].message = e.value
  popupFormData.value.message = e.value;

 
};

const handleChannelChange = (index: number, field: string, e: any) => {
  popupFormData.value.channels[index][field] = e.value;
 
};

const addNewChannel = () => {
  popupFormData.value.channels.push({
    channelName: "",
    teamId: "",
    channelId: ""
  });
};

const deleteChannel = (index: number) => {
  popupFormData.value.channels.splice(index, 1);
};

const onRowInserted = async (e: any) => {
  try {
 
    e.data.message = popupFormData.value.message;
    e.data.channels = popupFormData.value.channels;
    console.log(e.data);
    await axios.post('/Home/insertTeamsSettings', e.data); 
    console.log('Data Inserted Successfully');
  } catch (error) {
    console.error("Kayıt ekleme hatası:", error);
  }
};

const onRowUpdated = async (e: any) => {
  try {
    console.log(e)
    // e.data.message = popupFormData.value.message;
    // e.data.channels = popupFormData.value.channels;
    // await axios.post(`/Home/updateTeamsSettings`, e.data); 
  } catch (error) {
    console.error("Kayıt güncelleme hatası:", error);
  }
};

const test = async (e: any) => {
  try {
    console.log(e)
    // e.data.message = popupFormData.value.message;
    // e.data.channels = popupFormData.value.channels;
    // await axios.post(`/Home/updateTeamsSettings`, e.data); 
  } catch (error) {
    console.error("Kayıt güncelleme hatası:", error);
  }
};

const onRowRemoved = async (e: any) => {
  try {
    await axios.post(`/Home/deleteTeamsSettings?clientId=${e.data.clientId}`);
  } catch (error) {
    console.error("Kayıt silme hatası:", error);
  }
};

const formatChannels = (channels: any[]) => {
  return channels.map(channel => channel.channelName).join(', ');
};

const channelsCellTemplate = (cellElement: any, cellInfo: any) => {
  cellElement.innerText = formatChannels(cellInfo.value);
};

onMounted(() => {
  fetchData();
  fetchServisList();
});
</script>

<style>
#data-grid-demo {
  height: 805px;
}
.dx-popup-content .dx-textarea {
  height: 140px;  
}
</style>

The rowUpdated event does not work unless the data-field field in DxColumn is equal to the data-field field in DxItem.