Diagram Demos - Fix typeExpr implementation

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) {

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() {

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({});

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;

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',

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) {

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) {

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) {
@@ -271,7 +275,7 @@ export default function App() {
 }
 function PopupContentFunc(props) {
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Name</div>
@@ -362,6 +366,6 @@ function PopupContentFunc(props) {
           onClick={props.cancelEditEmployeeClick}
         ></Button>
       </div>
-    </React.Fragment>
+    </>
   );
 }

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 };
   }

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) {