diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts
index 25735bfbd448..aa3e1d142d54 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts
@@ -44,8 +44,12 @@ export class AppComponent {
     });
   }
 
-  itemTypeExpr(obj) {
-    return `employee${obj.ID}`;
+  itemTypeExpr(obj, value) {
+    if (value === undefined) {
+      return `employee${obj.ID}`;
+    }
+    obj.type = value;
+    return null;
   }
 
   showInfo(employee) {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx
index ed40f6a41abb..d65b6c4bfcc1 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx
@@ -12,8 +12,12 @@ const dataSource = new ArrayStore({
   data: employees,
 });
 
-function itemTypeExpr(obj: { ID: number; }) {
-  return `employee${obj.ID}`;
+function itemTypeExpr(obj: { ID: number; type: string; }, value: string) {
+  if (value === undefined) {
+    return `employee${obj.ID}`;
+  }
+  obj.type = value;
+  return null;
 }
 
 export default function App() {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js
index 4e07ef772897..6d84a9c4015c 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js
@@ -10,8 +10,12 @@ const dataSource = new ArrayStore({
   key: 'ID',
   data: employees,
 });
-function itemTypeExpr(obj) {
-  return `employee${obj.ID}`;
+function itemTypeExpr(obj, value) {
+  if (value === undefined) {
+    return `employee${obj.ID}`;
+  }
+  obj.type = value;
+  return null;
 }
 export default function App() {
   const [currentEmployee, setCurrentEmployee] = useState({});
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue
index e904d60f443f..0dca2211a282 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue
@@ -67,7 +67,13 @@ const dataSource = new ArrayStore({
 });
 const currentEmployee = ref({} as Record<string, any>);
 const popupVisible = ref(false);
-const itemTypeExpr = ({ ID }: any) => `employee${ID}`;
+const itemTypeExpr = (obj: { ID: number; type: string; }, value: string) => {
+  if (value === undefined) {
+    return `employee${obj.ID}`;
+  }
+  obj.type = value;
+  return null;
+};
 
 function showInfo(employee: any) {
   currentEmployee.value = employee;
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js
index ad528f18ba0f..01756f7f1e51 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js
@@ -29,7 +29,13 @@ $(() => {
         data: employees,
       }),
       keyExpr: 'ID',
-      typeExpr(obj) { return `employee${obj.ID}`; },
+      typeExpr(obj, value) {
+        if (value === undefined) {
+          return `employee${obj.ID}`;
+        }
+        obj.type = value;
+        return null;
+      },
       parentKeyExpr: 'Head_ID',
       autoLayout: {
         type: 'tree',
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts
index d8b308c2db29..0592c4d52b62 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts
@@ -56,8 +56,12 @@ export class AppComponent {
     });
   }
 
-  itemTypeExpr() {
-    return 'employee';
+  itemTypeExpr(obj, value) {
+    if (value === undefined) {
+      return 'employee';
+    }
+    obj.type = value;
+    return null;
   }
 
   itemCustomDataExpr(obj, value) {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
index d0b21ca3e593..705587d481c1 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
@@ -59,8 +59,12 @@ function deleteEmployee(employee: Employee) {
   dataSource.push([{ type: 'remove', key: employee.ID }]);
 }
 
-function itemTypeExpr() {
-  return 'employee';
+function itemTypeExpr(obj: { type: string; }, value: string) {
+  if (value === undefined) {
+    return 'employee';
+  }
+  obj.type = value;
+  return null;
 }
 
 function itemCustomDataExpr(obj: Employee, value: Employee) {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
index 2820f55f2da7..6b302d595daa 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
@@ -51,8 +51,12 @@ function onRequestLayoutUpdate(e) {
 function deleteEmployee(employee) {
   dataSource.push([{ type: 'remove', key: employee.ID }]);
 }
-function itemTypeExpr() {
-  return 'employee';
+function itemTypeExpr(obj, value) {
+  if (value === undefined) {
+    return 'employee';
+  }
+  obj.type = value;
+  return null;
 }
 function itemCustomDataExpr(obj, value) {
   if (value === undefined) {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue
index 7650886ad489..ab334567d2ac 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue
@@ -186,8 +186,14 @@ const dataSource = new ArrayStore({
 const currentEmployee = ref({} as Record<string, any>);
 const popupVisible = ref(false);
 
-const itemTypeExpr = () => 'employee';
-function itemCustomDataExpr(obj: any, value: any) {
+const itemTypeExpr = (obj: { type: string; }, value: string) => {
+  if (value === undefined) {
+    return 'employee';
+  }
+  obj.type = value;
+  return null;
+};
+function itemCustomDataExpr(obj: Employee, value: Employee) {
   if (value === undefined) {
     return { ...obj };
   }
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js
index 1ab704411bac..f13447b5f06f 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js
@@ -62,7 +62,13 @@ $(function () {
     nodes: {
       dataSource: store,
       keyExpr: 'ID',
-      typeExpr() { return 'employee'; },
+      typeExpr(obj, value) {
+        if (value === undefined) {
+          return 'employee';
+        }
+        obj.type = value;
+        return null;
+      },
       parentKeyExpr: 'Head_ID',
       customDataExpr(obj, value) {
         if (value === undefined) {