Seo 187689 ej2 asp.net core document editor overview page with redirect links

ej2-asp-core-mvc/EJ2_ASP.MVC/appearance/figma.md

@@ -0,0 +1,79 @@
+---
+layout: post
+title: Introduction to the Figma UI Kit in ##Platform_Name## Component | Syncfusion
+description: Check out and learn about the introduction to the Figma UI Kit in Syncfusion ##Platform_Name## component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Icons
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Figma UI Kits for Syncfusion Controls
+
+Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion controls.
+
+The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion controls.
+
+![Material 3](./images/material3.png)
+
+## Advantages of UI kits
+
+The Syncfusion Figma UI kit offers the following key advantages:
+- The UI kit includes detailed information about Syncfusion controls, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion controls.
+- Design controls are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient.
+- Developers can seamlessly match Syncfusion controls with your design requirements, ensuring alignment and accuracy.
+- By using standardized controls and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects.
+
+## Downloading the UI kits
+
+Syncfusion Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion theme-specific Figma UI kits from the following links:
+
+- [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme)
+- [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme)
+- [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme)
+- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme)
+
+## Structure of the UI kits
+
+Syncfusion’s Figma UI kit is structured to offer a comprehensive and user-friendly layout, facilitating easy navigation and exploration of various controls. It includes the following pages:
+
+- **Thumbnail**: This page serves as the cover page for the UI kit.
+- **Index**: Here, users can find a detailed list of all control names, making it simple to identify and locate specific controls within the UI kit.
+- **Icons**: Contains a collection of all icons used in the design controls.
+- **UI Controls**: At the core of the UI kit, this section features a wide range of essential UI controls. Each control is meticulously designed with detailed figures, measurements, and icons, showcasing various states and variants.
+
+![Layout](./images/layout.png)
+
+## Customizing the UI kits
+
+The Syncfusion Figma UI kits are easily customizable to meet your specific needs, allowing you to create unique designs and adjust colors to match your brand guidelines. The [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/) used in developing these controls, your customizations will be seamlessly reflected across multiple controls and their variants.
+
+Here's how to customize the primary button color of the Material 3 theme within your layout:
+
+1. Visit our [UI kits](#downloading-the-ui-kits) and choose your preferred theme, such as the Material 3 theme.
+2. Open the selected theme in the Figma web application by clicking the **Open in Figma** button.
+3. For the desktop application, click the **Import** button in the top-right corner of the page. Select the downloaded Syncfusion fig file you want to import and click the **Open** button.
+4. Identify the button you wish to customize within your layout.
+5. On the right side of the Figma interface, find the color variable options listed. For example, the variable for a particular button color might be labeled as `$primary-bg-color`, derived from the primary color variable.
+6. To customize this primary button control color, click outside the button to see the **Local variables** option on the right side of the Figma interface. It contains the design token for the color variables. Click the **Local variables** option.
+7. A popup will show the design token list. You can change the primary color using a color palette.
+8. Once you've selected the new color (e.g., pink) for the primary variable, the button's color pattern will be updated accordingly. You'll see the changes reflected in real-time within your design.
+
+![Customization](./images/customize.png)
+
+In addition to changing the button color, you can also customize other aspects like font, spacing, shadows, etc., of the UI controls:
+
+Feel free to experiment with these customization options to create a design that perfectly matches your requirements.
+
+## Upgrading the UI kits
+
+To upgrade your UI kits, download the latest version from the provided links. Follow these guidelines for a seamless upgrade process:
+
+- Keep track of updates or new versions of UI kits from Syncfusion.
+- Before upgrading, back up your ongoing projects to prevent data loss or compatibility issues.
+- Share your experience with Syncfusion regarding the upgraded UI kits, including any issues encountered or suggestions for improvement.
+
+## See also
+
+* [Available themes](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme)
+* [Customizing themes](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme-studio#customizing-theme-color-from-theme-studio)

ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/figma.md

@@ -0,0 +1,79 @@
+---
+layout: post
+title: Introduction to the Figma UI Kit in ##Platform_Name## control | Syncfusion
+description: Check out and learn about the introduction to the Figma UI Kit in Syncfusion ##Platform_Name##. Also, listed the icons by theme-wise.
+platform: ej2-asp-core-mvc
+control: Common
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Figma UI Kits for Syncfusion Controls
+
+Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion controls.
+
+The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion controls.
+
+![Material 3](./images/material3.png)
+
+## Advantages of UI kits
+
+The Syncfusion Figma UI kit offers the following key advantages:
+- The UI kit includes detailed information about Syncfusion controls, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion controls.
+- Design controls are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient.
+- Developers can seamlessly match Syncfusion controls with your design requirements, ensuring alignment and accuracy.
+- By using standardized controls and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects.
+
+## Downloading the UI kits
+
+Syncfusion Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion theme-specific Figma UI kits from the following links:
+
+- [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme)
+- [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme)
+- [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme)
+- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme)
+
+## Structure of the UI kits
+
+Syncfusion’s Figma UI kit is structured to offer a comprehensive and user-friendly layout, facilitating easy navigation and exploration of various controls. It includes the following pages:
+
+- **Thumbnail**: This page serves as the cover page for the UI kit.
+- **Index**: Here, users can find a detailed list of all control names, making it simple to identify and locate specific controls within the UI kit.
+- **Icons**: Contains a collection of all icons used in the design controls.
+- **UI Controls**: At the core of the UI kit, this section features a wide range of essential UI controls. Each control is meticulously designed with detailed figures, measurements, and icons, showcasing various states and variants.
+
+![Layout](./images/layout.png)
+
+## Customizing the UI kits
+
+The Syncfusion Figma UI kits are easily customizable to meet your specific needs, allowing you to create unique designs and adjust colors to match your brand guidelines. The [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/) used in developing these controls, your customizations will be seamlessly reflected across multiple controls and their variants.
+
+Here's how to customize the primary button color of the Material 3 theme within your layout:
+
+1. Visit our [UI kits](#downloading-the-ui-kits) and choose your preferred theme, such as the Material 3 theme.
+2. Open the selected theme in the Figma web application by clicking the **Open in Figma** button.
+3. For the desktop application, click the **Import** button in the top-right corner of the page. Select the downloaded Syncfusion fig file you want to import and click the **Open** button.
+4. Identify the button you wish to customize within your layout.
+5. On the right side of the Figma interface, find the color variable options listed. For example, the variable for a particular button color might be labeled as `$primary-bg-color`, derived from the primary color variable.
+6. To customize this primary button control color, click outside the button to see the **Local variables** option on the right side of the Figma interface. It contains the design token for the color variables. Click the **Local variables** option.
+7. A popup will show the design token list. You can change the primary color using a color palette.
+8. Once you've selected the new color (e.g., pink) for the primary variable, the button's color pattern will be updated accordingly. You'll see the changes reflected in real-time within your design.
+
+![Customization](./images/customize.png)
+
+In addition to changing the button color, you can also customize other aspects like font, spacing, shadows, etc., of the UI controls:
+
+Feel free to experiment with these customization options to create a design that perfectly matches your requirements.
+
+## Upgrading the UI kits
+
+To upgrade your UI kits, download the latest version from the provided links. Follow these guidelines for a seamless upgrade process:
+
+- Keep track of updates or new versions of UI kits from Syncfusion.
+- Before upgrading, back up your ongoing projects to prevent data loss or compatibility issues.
+- Share your experience with Syncfusion regarding the upgraded UI kits, including any issues encountered or suggestions for improvement.
+
+## See also
+
+* [Available themes](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme)
+* [Customizing themes](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme-studio#customizing-theme-color-from-theme-studio)

ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/razor

@@ -8,29 +8,9 @@
         container = documenteditorElement.ej2_instances[0];
         documenteditor = container.documentEditor;
         let mentionData = [
-            { "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
-            { "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
-            { "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
-            { "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
-            { "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
-            { "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
-            { "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
-            { "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
-            { "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
-            { "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
-            { "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
-            { "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
-            { "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
-            { "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
-            { "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
-            { "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
-            { "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
-            { "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
-            { "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
-            { "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
-            { "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
-            { "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
-            { "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
+            { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+            { "Name": "Andrew James", "EmailId": "james@company.com" },
+            { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
         ];
         container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
     }

ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/tagHelper

@@ -9,29 +9,9 @@
         container = documenteditorElement.ej2_instances[0];
         documenteditor = container.documentEditor;
         let mentionData = [
-            { "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
-            { "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
-            { "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
-            { "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
-            { "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
-            { "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
-            { "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
-            { "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
-            { "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
-            { "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
-            { "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
-            { "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
-            { "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
-            { "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
-            { "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
-            { "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
-            { "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
-            { "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
-            { "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
-            { "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
-            { "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
-            { "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
-            { "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
+            { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+            { "Name": "Andrew James", "EmailId": "james@company.com" },
+            { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
         ];
         container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
     }

ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/primary.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrderDetails.GetAllRecords();
+    ViewBag.dataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/columns/primary/razor → ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor

@@ -2,8 +2,6 @@
 
 <script>
     function dataBound() {
-        var grid = document.getElementById('Auto').ej2_instances[0];
-        var column = grid.columns[0];
-        column.isPrimaryKey = 'true';
+        document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
     }
 </script>

ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper

@@ -0,0 +1,10 @@
+<ejs-grid id="Auto" dataSource="@ViewBag.dataSource" dataBound="dataBound">
+    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true">
+    </e-grid-editSettings>
+</ejs-grid>
+
+<script>
+    function dataBound() {
+        document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/columns/auto/razor

@@ -1 +1 @@
-@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource).Render()
+@Html.EJS().Grid("Auto").AllowPaging(true).DataSource((IEnumerable<object>)ViewBag.DataSource).Render()

ej2-asp-core-mvc/code-snippet/grid/columns/auto/tagHelper

@@ -1,3 +1,2 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
-
+<ejs-grid id="Grid" allowPaging=true dataSource="@ViewBag.DataSource">   
 </ejs-grid>

ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/razor

@@ -1,17 +1,19 @@
-@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource).DataBound("dataBound").Render()
-
+@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.DataSource).DataBound("dataBound").Render()
 <script>
     function dataBound() {
-        for (var i = 0; i < this.columns.length; i++) {
-            this.columns[0].width = 120;
-            if (this.columns[i].field === "OrderDate") {
-                this.columns[i].type = "date";
+        const grid = document.getElementById('Auto').ej2_instances[0];
+        for (const cols of grid.columns) {
+            if (cols.field === 'OrderID') {
+                cols.width = 120;
             }
-            if (this.columns[i].type === "date") {
-                this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
+            if (cols.field === 'OrderDate') {
+                cols.type = 'date';
+                cols.format = 'yMd';
+            }
+            if (cols.field === 'Freight') {
+                cols.format = 'P2';
             }
-            this.columns[3].format = "P2";
         }
-        this.refreshColumns();
+        grid.refreshColumns();
     }
 </script>