Integrated latest changes at 12-20-2024 4:36:03 PM

Author: SyncfusionBuild

ej2-react/code-snippet/drop-down-button/item-template-cs1/app/app.jsx

@@ -36,30 +36,20 @@ function App() {
     }
   ];
 
+  const template = `
+        <div>
+            <span class='e-menu-icon ${'${iconCss}'}'></span>
+            ${
+                '${url}' 
+                ? `<span class='custom-class'><a href='${'${url}'}' target='_blank' rel='noopener noreferrer'>${'${text}'}</a></span>`
+                : `<span class='custom-class'>${'${text}'}</span>`
+            }
+        </div>
+    `; 
+
   return (
     <div>
-      <DropDownButtonComponent
-        items={items}
-        itemTemplate={(data) => {
-          if (data.url) {
-            return (
-              <div>
-                <span className={`e-menu-icon ${data.iconCss}`}></span>
-                <span class="custom-class"><a href={data.url} target="_blank" rel="noopener noreferrer">{data.text}</a></span>
-              </div>
-            );
-          } else {
-            return (
-              <div>
-                <span className={`e-menu-icon ${data.iconCss}`}></span>
-                <span class="custom-class">{data.text}</span>
-              </div>
-            );
-          }
-        }}
-      >
-        DropDownButton
-      </DropDownButtonComponent>
+      <DropDownButtonComponent items={items} itemTemplate = {template} >DropDownButton</DropDownButtonComponent>
     </div>
   );
 }

ej2-react/code-snippet/drop-down-button/item-template-cs1/app/app.tsx

@@ -36,30 +36,20 @@ function App() {
     }
   ];
 
+  const template: string = `
+        <div>
+            <span class='e-menu-icon ${'${iconCss}'}'></span>
+            ${
+                '${url}' 
+                ? `<span class='custom-class'><a href='${'${url}'}' target='_blank' rel='noopener noreferrer'>${'${text}'}</a></span>`
+                : `<span class='custom-class'>${'${text}'}</span>`
+            }
+        </div>
+    `; 
+
   return (
     <div>
-      <DropDownButtonComponent
-        items={items}
-        itemTemplate={(data: ItemModel) => {
-          if (data.url) {
-            return (
-              <div>
-                <span className={`e-menu-icon ${data.iconCss}`}></span>
-                <span class="custom-class"><a href={data.url} target="_blank" rel="noopener noreferrer">{data.text}</a></span>
-              </div>
-            );
-          } else {
-            return (
-              <div>
-                <span className={`e-menu-icon ${data.iconCss}`}></span>
-                <span class="custom-class">{data.text}</span>
-              </div>
-            );
-          }
-        }}
-      >
-        DropDownButton
-      </DropDownButtonComponent>
+      <DropDownButtonComponent items={items} itemTemplate = {template} >DropDownButton</DropDownButtonComponent>
     </div>
   );
 }

ej2-react/code-snippet/image-editor/default-cs57/app/app.jsx

@@ -15,7 +15,7 @@ export default class App extends React.Component {
     }
     render() {
         return (<div className='e-img-editor-sample'>
-            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" uploadSettings = {uploadSettings}>
+            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" uploadSettings = {this.uploadSettings}>
             </ImageEditorComponent>
                     <div>
                         <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick={this.loadInvalidImage.bind(this)}/>

ej2-react/code-snippet/image-editor/default-cs57/app/app.tsx

@@ -18,10 +18,10 @@ function App() {
 
     return (
         <div className='e-img-editor-sample'>
-        <ImageEditorComponent ref={(img) => { imgObj = img }} uploadSettings = {uploadSettings}>
+        <ImageEditorComponent ref={(img) => { imgObj = img }} height="350px" uploadSettings = {this.uploadSettings}>
         </ImageEditorComponent>
                 <div>
-                    <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick = {loadInvalidImage}/>
+                    <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick = {this.loadInvalidImage.bind(this)}/>
                 </div>
             </div>
     );

ej2-react/code-snippet/image-editor/default-cs58/app/app.jsx

@@ -16,7 +16,7 @@ export default class App extends React.Component {
     }
     render() {
         return (<div className='e-img-editor-sample'>
-            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" uploadSettings = {uploadSettings}>
+            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" uploadSettings = {this.uploadSettings}>
             </ImageEditorComponent>
                     <div>
                         <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick={this.loadInvalidImage.bind(this)}/>

ej2-react/code-snippet/image-editor/default-cs58/app/app.tsx

@@ -19,10 +19,10 @@ function App() {
 
     return (
         <div className='e-img-editor-sample'>
-        <ImageEditorComponent ref={(img) => { imgObj = img }} uploadSettings = {uploadSettings}>
+        <ImageEditorComponent ref={(img) => { imgObj = img }} height="350px" uploadSettings = {this.uploadSettings}>
         </ImageEditorComponent>
                 <div>
-                    <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick = {loadInvalidImage}/>
+                    <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick = {this.loadInvalidImage.bind(this)}/>
                 </div>
             </div>
     );