Integrated latest changes at 11-16-2024 4:30:37 PM

Author: SyncfusionBuild

ej2-react/accumulation-chart/dynamic-data-update.md

@@ -27,7 +27,7 @@ The [`addPoint`](https://ej2.syncfusion.com/react/documentation/api/chart/series
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/chart/series/addpoint-cs" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/addpoint-cs" %}
 
 ## Removing an existing data point
 
@@ -45,7 +45,7 @@ The [`removePoint`](https://ej2.syncfusion.com/react/documentation/api/chart/ser
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/chart/series/addpoint-cs1" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/addpoint-cs1" %}
 
 ## Replacing entire data points
 
@@ -63,4 +63,4 @@ To replace the existing data source in the accumulation chart with a new data so
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/chart/series/addpoint-cs3" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/addpoint-cs3" %}

ej2-react/accumulation-chart/pie-dough-nut.md

@@ -130,7 +130,7 @@ You can create rounded corners for each slice using the [`borderRadius`](https:/
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/chart/series/pie-cs39" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs39" %}
 
 ## Customization
 
@@ -176,7 +176,7 @@ You can apply different patterns to the pie slices using the [`applyPattern`](ht
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/chart/series/pie-cs40" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs40" %}
 
 ## Multi-level pie chart
 

ej2-react/chart/zooming.md

@@ -129,7 +129,7 @@ Use the [`enableAnimation`](https://ej2.syncfusion.com/react/documentation/api/c
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/samples/chart/user-interaction/zoom-cs10" %}
+{% previewsample "page.domainurl/code-snippet/chart/user-interaction/zoom-cs10" %}
 
 ## Enable pan
 

ej2-react/code-snippet/common/fluent2-cs1/app/index.jsx

@@ -8,22 +8,22 @@ function App() {
     const [isChecked, setIsChecked] = useState(false);
 
   const handleCheckboxChange = (event) => {
-    setIsChecked(event.target.checked);
+    setIsChecked(event.checked);
 
     // Add or remove the classes on the body element based on the checkbox state
     const body = document.body;
 
-    if (event.target.checked) {
-      body.classList.add('dark');
+    if (event.checked) {
       body.classList.add('dark');
+      body.classList.add('e-dark-mode');
     } else {
-      body.classList.remove('e-dark-mode');
+      body.classList.remove('dark');
       body.classList.remove('e-dark-mode');
     }
   };
     return (<div>
           {/* Primary Button - Used to represent a primary action. */}
-          <CheckBoxComponent label="Enable Darkmode" checked={isChecked} onChange={handleCheckboxChange}/><br/>
+          <CheckBoxComponent label="Enable Darkmode" checked={isChecked} change={handleCheckboxChange}/><br/>
           <ButtonComponent cssClass='e-primary'>button</ButtonComponent>
 
           {/* Success Button - Used to represent a positive action. */}

ej2-react/code-snippet/common/fluent2-cs1/app/index.tsx

@@ -1,6 +1,7 @@
 
 import {ButtonComponent, CheckBoxComponent} from '@syncfusion/ej2-react-buttons';
 import { enableRipple } from '@syncfusion/ej2-base';
+import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { useState } from 'react';
@@ -9,11 +10,12 @@ enableRipple(true);
 function App() {
   const [isChecked, setIsChecked] = useState(false);
 
-  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setIsChecked(event.target.checked);
+  const handleCheckboxChange = (event: ChangeEventArgs) => {
+    const checked = event.checked ?? false;
+    setIsChecked(checked);
 
     // Add or remove the class on the body element based on the checkbox state
-    if (event.target.checked) {
+    if (checked) {
       document.body.classList.add('dark');
       document.body.classList.add('e-dark-mode');
     } else {
@@ -24,7 +26,7 @@ function App() {
     return (
       <div>
           { /* checkbox - Used to represent checkbox. */ }
-          <CheckBoxComponent label="Enable Darkmode" checked={isChecked} onChange={handleCheckboxChange}/><br/>
+          <CheckBoxComponent label="Enable Darkmode" checked={isChecked} change={handleCheckboxChange}/><br/>
           { /* Primary Button - Used to represent a primary action. */ }
           <ButtonComponent cssClass='e-primary'>Button</ButtonComponent>
 

ej2-react/code-snippet/common/fluent2-cs2/index.css

@@ -1,5 +1,5 @@
 :root {
-	--color-sf-primary: 104, 134, 164;
+	--color-sf-primary: #6886a4;
 }
 
 button {

ej2-react/code-snippet/common/material3-cs1/app/index.jsx

@@ -8,22 +8,22 @@ function App() {
     const [isChecked, setIsChecked] = useState(false);
 
   const handleCheckboxChange = (event) => {
-    setIsChecked(event.target.checked);
+    setIsChecked(event.checked);
 
     // Add or remove the classes on the body element based on the checkbox state
     const body = document.body;
 
-    if (event.target.checked) {
-      body.classList.add('dark');
+    if (event.checked) {
       body.classList.add('dark');
+      body.classList.add('e-dark-mode');
     } else {
-      body.classList.remove('e-dark-mode');
+      body.classList.remove('dark');
       body.classList.remove('e-dark-mode');
     }
   };
     return (<div>
           {/* Primary Button - Used to represent a primary action. */}
-          <CheckBoxComponent label="Enable Darkmode" checked={isChecked} onChange={handleCheckboxChange}/><br/>
+          <CheckBoxComponent label="Enable Darkmode" checked={isChecked} change={handleCheckboxChange}/><br/>
           <ButtonComponent cssClass='e-primary'>button</ButtonComponent>
 
           {/* Success Button - Used to represent a positive action. */}

ej2-react/code-snippet/common/material3-cs1/app/index.tsx

@@ -1,6 +1,7 @@
 
 import {ButtonComponent, CheckBoxComponent} from '@syncfusion/ej2-react-buttons';
 import { enableRipple } from '@syncfusion/ej2-base';
+import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { useState } from 'react';
@@ -9,11 +10,12 @@ enableRipple(true);
 function App() {
   const [isChecked, setIsChecked] = useState(false);
 
-  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setIsChecked(event.target.checked);
+  const handleCheckboxChange = (event: ChangeEventArgs) => {
+    const checked = event.checked ?? false;
+    setIsChecked(checked);
 
     // Add or remove the class on the body element based on the checkbox state
-    if (event.target.checked) {
+    if (checked) {
       document.body.classList.add('dark');
       document.body.classList.add('e-dark-mode');
     } else {
@@ -24,7 +26,7 @@ function App() {
     return (
       <div>
           { /* checkbox - Used to represent checkbox. */ }
-          <CheckBoxComponent label="Enable Darkmode" checked={isChecked} onChange={handleCheckboxChange}/><br/>
+          <CheckBoxComponent label="Enable Darkmode" checked={isChecked} change={handleCheckboxChange}/><br/>
           { /* Primary Button - Used to represent a primary action. */ }
           <ButtonComponent cssClass='e-primary'>Button</ButtonComponent>
 

ej2-react/code-snippet/grid/hierarchy-grid-aggregates/index.css

@@ -0,0 +1,9 @@
+.e-grid .custom {
+  background-color: #f48fb1 !important;/* csslint allow: important */
+  color: white;
+}
+
+.e-grid .custom {
+  background-color: #fce4ec;
+  color: white;
+}

ej2-react/code-snippet/grid/pdf-export-merge/index.css

@@ -0,0 +1,9 @@
+.e-grid .custom {
+  background-color: #f48fb1 !important;/* csslint allow: important */
+  color: white;
+}
+
+.e-grid .custom {
+  background-color: #fce4ec;
+  color: white;
+}