diff --git a/ej2-asp-core-mvc/Release-notes/28.1.39.md b/ej2-asp-core-mvc/Release-notes/28.1.39.md new file mode 100644 index 0000000000..e565ce9a01 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/28.1.39.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for ##Platform_Name## Weekly Release Release Notes +description: Essential Studio for ##Platform_Name## Weekly Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="January 14, 2025" version="v28.1.39" %} + +{% directory path: _includes/release-notes/v28.1.39 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/Release-notes/28.1.41.md b/ej2-asp-core-mvc/Release-notes/28.1.41.md new file mode 100644 index 0000000000..a7ed519b7c --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/28.1.41.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for ##Platform_Name## Weekly Release Release Notes +description: Essential Studio for ##Platform_Name## Weekly Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="January 21, 2025" version="v28.1.41" %} + +{% directory path: _includes/release-notes/v28.1.41 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md index f7ccf7d573..ae950d186e 100644 --- a/ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/avatar/EJ2_ASP.MVC/getting-started.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with ASP.NET MVC Avatar Control -This section briefly explains about how to include [ASP.NET MVC Avatar](https://www.syncfusion.com/aspnet-mvc-ui-controls/avatar) control in your ASP.NET MVC application using Visual Studio. +This section explains about how to include [ASP.NET MVC Avatar](https://www.syncfusion.com/aspnet-mvc-ui-controls/avatar) control in your ASP.NET MVC application using Visual Studio. ## Prerequisites @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET MVC Avatar](https:// ## Add stylesheet -Here, the theme is referred using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, +Here, the desired theme is referred using CDN inside the `` of **~/Views/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight c# tabtitle="~/_Layout.cshtml" %} @@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio ## Add ASP.NET MVC Avatar control -Now, add the Syncfusion® ASP.NET MVC Avatar control in `~/Home/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET MVC Avatar control in **~/Home/Index.cshtml** page. {% tabs %} {% highlight razor tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md index 9ed1e73d7b..feb3186806 100644 --- a/ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/avatar/EJ2_ASP.NETCORE/getting-started.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with ASP.NET Core Avatar Control -This section briefly explains about how to include [ASP.NET Core Avatar](https://www.syncfusion.com/aspnet-core-ui-controls/avatar) control in your ASP.NET Core application using Visual Studio. +This section explains about how to include [ASP.NET Core Avatar](https://www.syncfusion.com/aspnet-core-ui-controls/avatar) control in your ASP.NET Core application using Visual Studio. ## Prerequisites @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET Core Avatar](https:/ ## Add stylesheet -Here, the theme is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the desired theme is referred using CDN inside the `` of **~/Pages/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentati ## Add ASP.NET Core Avatar control -Now, add the Syncfusion® ASP.NET Core Avatar tag helper in `~/Pages/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET Core Avatar tag helper in **~/Pages/Index.cshtml** page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md b/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md index 05b7121f83..ec607b3213 100644 --- a/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md +++ b/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Avatar Customization in ##Platform_Name## Avatar Component | Syncfusion -description: Learn here all about Avatar Customization in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more. +title: Avatar Customization in ##Platform_Name## Avatar control | Syncfusion +description: Learn here all about Avatar Customization in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Avatar Customization publishingplatform: ##Platform_Name## @@ -12,7 +12,7 @@ documentation: ug ## Color customization -The avatar comes with default background color (Grey). This can be easily customized to desired color by adding custom class or directly selecting the avatar class from the CSS. +The Avatar comes with default background color (Grey). This can be easily customized to the desired color by adding custom class or directly selecting the Avatar class from the CSS. {% if page.publishingplatform == "aspnet-core" %} @@ -37,9 +37,9 @@ The avatar comes with default background color (Grey). This can be easily custom ![Avatar Color](../images/color.PNG) -## Customize avatar sizes +## Customize Avatar sizes -Even though the avatar comes with five predefined sizes, sometimes it's not enough. So, the avatar is designed in such a way that the width and height will be relative to font-size. By changing the `font-size` of the avatar element, you can change the width and height automatically. +Even though the Avatar comes with five predefined sizes, sometimes it's not enough. The Avatar is designed so that the width and height are relative to the font-size. By changing the `font-size` of the Avatar element, you can change the width and height automatically. {% if page.publishingplatform == "aspnet-core" %} @@ -66,9 +66,9 @@ Even though the avatar comes with five predefined sizes, sometimes it's not enou N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Avatar/AvatarUGSample). -## Use various media in avatar +## Use various media in Avatar -Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters, words, etc. +Avatars can be used with a wide variety of types of media formats like SVG, font-icons, images, letters, words, etc. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md b/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md index 350da13087..77795bb828 100644 --- a/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md +++ b/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-badge.md @@ -1,16 +1,16 @@ --- layout: post -title: Integrate Avatar Into Badge in ##Platform_Name## Avatar Component -description: Learn here all about how to integrate avatar into badge in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more. +title: Integrate Avatar Into Badge in ##Platform_Name## Avatar control | Syncfusion +description: Learn here all about how to integrate Avatar into Badge in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Integrate Avatar Into Badge publishingplatform: ##Platform_Name## documentation: ug --- -# Integrate avatar into Badge +# Integrate Avatar into Badge -The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar. The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have been used with notification badges (.`e-badge-notification`) in the following sample. +The Badge is a dependent and supportive control that can be used with Avatar to create a notification Avatar. The default Avatar `(.e-avatar)` and circle Avatar `(.e-avatar-circle)` have been used with notification badges `(.e-badge-notification)` in the following sample. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md b/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md index b4c994baaa..598540a5b1 100644 --- a/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md +++ b/ej2-asp-core-mvc/avatar/how-to/integrate-avatar-into-listview.md @@ -1,16 +1,16 @@ --- layout: post -title: Integrate Avatar Into Listview in ##Platform_Name## Avatar Component -description: Learn here all about how to integrate avatar into Listview in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more. +title: Integrate Avatar Into ListView in ##Platform_Name## Avatar control | Syncfusion +description: Learn here all about how to integrate Avatar into ListView in Syncfusion ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Integrate Avatar Into Listview +control: Integrate Avatar Into ListView publishingplatform: ##Platform_Name## documentation: ug --- -# Integrate avatar into ListView +# Integrate Avatar into ListView -Avatar is integrated into the listview to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content. +Avatar is integrated into the ListView to create contacts applications. The `xsmall` size Avatar is used to match the size of the list items. Both letters and images are also used as Avatar content. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/avatar/types.md b/ej2-asp-core-mvc/avatar/types.md index 560bd3b1af..1244f7b778 100644 --- a/ej2-asp-core-mvc/avatar/types.md +++ b/ej2-asp-core-mvc/avatar/types.md @@ -11,19 +11,19 @@ documentation: ug # Types and Styles in ##Platform_Name## Avatar Control -This section explains different types of avatar. +This section explains different types of Avatar. ## Avatar size -The Essential® JS 2 Avatar has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the avatar. +The Essential® JS 2 Avatar has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the Avatar. | Class Name | Description | | ------------- | ------------- | -| e-avatar-xlarge | Displays xlarge size avatar. | -| e-avatar-large | Displays apply large size avatar. | -| e-avatar | Displays apply default size avatar. | -| e-avatar-small | Displays apply small size avatar. | -| e-avatar-xsmall | Displays apply xsmall size avatar. | +| e-avatar-xlarge | Displays xlarge size Avatar. | +| e-avatar-large | Displays apply large size Avatar. | +| e-avatar | Displays apply default size Avatar. | +| e-avatar-small | Displays apply small size Avatar. | +| e-avatar-xsmall | Displays apply xsmall size Avatar. | {% if page.publishingplatform == "aspnet-core" %} @@ -50,14 +50,14 @@ The Essential® JS 2 Avatar has the followin ## Avatar types -The types of Essential® JS 2 avatar are: +The types of Essential® JS 2 Avatar are: * Default * Circle ### Default -The default style of the avatar is rectangular shape with rounded corners, which can be applied from adding the modifier class `.e-avatar` to the target element. +The default style of the Avatar is rectangular shape with rounded corners, which can be applied from adding the modifier class `.e-avatar` to the target element. {% if page.publishingplatform == "aspnet-core" %} @@ -83,7 +83,7 @@ The default style of the avatar is rectangular shape with rounded corners, which ### Circle -The circle avatar style can be applied by adding the modifier class `.e-avatar-circle` to the target element. +The circle Avatar style can be applied by adding the modifier class `.e-avatar-circle` to the target element. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/badge/EJ2_ASP.MVC/getting-started-asp-mvc.md b/ej2-asp-core-mvc/badge/EJ2_ASP.MVC/getting-started-asp-mvc.md index 7feecb8ed6..416496f9ee 100644 --- a/ej2-asp-core-mvc/badge/EJ2_ASP.MVC/getting-started-asp-mvc.md +++ b/ej2-asp-core-mvc/badge/EJ2_ASP.MVC/getting-started-asp-mvc.md @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET MVC Badge](https://w ## Add stylesheet -Here, the theme is referred using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, +Here, the theme is referred using CDN inside the `` of **~/Views/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight c# tabtitle="~/_Layout.cshtml" %} @@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio ## Add ASP.NET MVC Badge control -Now, add the Syncfusion® ASP.NET MVC Badge control in `~/Home/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET MVC Badge control in **~/Home/Index.cshtml** page. {% tabs %} {% highlight razor tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/badge/EJ2_ASP.NETCORE/getting-started-asp-core.md b/ej2-asp-core-mvc/badge/EJ2_ASP.NETCORE/getting-started-asp-core.md index 939c579014..1a8178965d 100644 --- a/ej2-asp-core-mvc/badge/EJ2_ASP.NETCORE/getting-started-asp-core.md +++ b/ej2-asp-core-mvc/badge/EJ2_ASP.NETCORE/getting-started-asp-core.md @@ -25,7 +25,7 @@ This section briefly explains about how to include [ASP.NET Core Badge](https:// ## Add stylesheet -Here, the theme is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the theme is referred using CDN inside the `` of **~/Pages/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -43,7 +43,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentati ## Add ASP.NET Core Badge Control -Now, add the Syncfusion® ASP.NET Core Badge tag helper in `~/Pages/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET Core Badge tag helper in **~/Pages/Index.cshtml** page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/badge/how-to/badge-customization.md b/ej2-asp-core-mvc/badge/how-to/badge-customization.md index 83f853d4f2..64bfbcd3d2 100644 --- a/ej2-asp-core-mvc/badge/how-to/badge-customization.md +++ b/ej2-asp-core-mvc/badge/how-to/badge-customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Badge Customization in ##Platform_Name## Badge Component -description: Learn here all about Badge Customization in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more. +title: Badge Customization in ##Platform_Name## Badge control | Syncfusion +description: Learn here all about Badge Customization in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Badge Customization publishingplatform: ##Platform_Name## @@ -10,9 +10,9 @@ documentation: ug # Customization in ##Platform_Name## Badge Control -## Colour customization +## Color customization -Even though badges come with `8 predefined colors`, you can also customize the colour of the badge as desired. +Even though Badges come with `8 predefined colors`, you can also customize the color of the Badge as desired. {% if page.publishingplatform == "aspnet-core" %} @@ -37,9 +37,9 @@ Even though badges come with `8 predefined colors`, you can also customize the c ![Badge Color Customization](../images/colorcustom.PNG) -## Customize badge size +## Customize Badge size -Badges are designed to change its size based on the content. To change the size of a badge, adjust the `font size` of the badge. +Badges are designed to change its size based on the content. To change the size of a Badge, adjust the `font size` of the Badge. {% if page.publishingplatform == "aspnet-core" %} @@ -66,7 +66,7 @@ Badges are designed to change its size based on the content. To change the size ## Custom position -Even though the badges support the conventional `top` and `bottom` positions, the position of the badges can be changed as desired. This can be done by adding a custom class to the badge element to override the default position applied from the source. +Even though the Badges support the conventional `top` and `bottom` positions, the position of the Badges can be changed as desired. This can be done by adding a custom class to the Badge element to override the default position applied from the source. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/badge/how-to/dynamic-badge-content.md b/ej2-asp-core-mvc/badge/how-to/dynamic-badge-content.md index 20d012ead4..2bb779af45 100644 --- a/ej2-asp-core-mvc/badge/how-to/dynamic-badge-content.md +++ b/ej2-asp-core-mvc/badge/how-to/dynamic-badge-content.md @@ -1,7 +1,7 @@ --- layout: post -title: Dynamic Badge Content in ##Platform_Name## Badge Component -description: Learn here all about Dynamic Badge Content in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more. +title: Dynamic Badge Content in ##Platform_Name## Badge control | Syncfusion +description: Learn here all about Dynamic Badge Content in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Dynamic Badge Content publishingplatform: ##Platform_Name## @@ -10,7 +10,7 @@ documentation: ug # Dynamic Badge Content -Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the badges content dynamically. Click the increment button to change the badge value. +Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the Badges content dynamically. Click the increment button to change the Badge value. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/badge/how-to/integrate-badge-into-listview.md b/ej2-asp-core-mvc/badge/how-to/integrate-badge-into-listview.md index 0867827c09..19e419a105 100644 --- a/ej2-asp-core-mvc/badge/how-to/integrate-badge-into-listview.md +++ b/ej2-asp-core-mvc/badge/how-to/integrate-badge-into-listview.md @@ -1,7 +1,7 @@ --- layout: post -title: Integrate Badge Into Listview in ##Platform_Name## Badge Component -description: Learn here all about how to integrate badge into Listview in Syncfusion ##Platform_Name## Badge component of Syncfusion Essential JS 2 and more. +title: Integrate Badge Into Listview in ##Platform_Name## Badge control | Syncfusion +description: Learn here all about how to integrate Badge into Listview in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Integrate Badge Into Listview publishingplatform: ##Platform_Name## @@ -10,9 +10,9 @@ documentation: ug # Integrate Badge into ListView -The badges can be integrated with the `listview` component to indicate new notification with colour based on priority. +The Badges can be integrated with the `listview` control to indicate new notification with color based on priority. -In the following sample, `default` badges are used and there is no need to customize the badge size. The component will automatically adjust the size based on the container element. +In the following sample, `default` Badges are used and there is no need to customize the Badge size. The control will automatically adjust the size based on the container element. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/badge/types.md b/ej2-asp-core-mvc/badge/types.md index 8d25e600b7..b2b07f1d96 100644 --- a/ej2-asp-core-mvc/badge/types.md +++ b/ej2-asp-core-mvc/badge/types.md @@ -10,11 +10,11 @@ documentation: ug # Types in ##Platform_Name## Badge Control -This section explains different styles and types of the badges. +This section explains different styles and types of the Badges. ## Badge styles -The Essential® JS 2 Badge has the following predefined styles that can be used with `.e-badge` class to change the appearance of a badge. +The Essential® JS 2 Badge has the following predefined styles that can be used with `.e-badge` class to change the appearance of a Badge. | Class Name | Description | |------------|-------------| @@ -52,7 +52,7 @@ The Essential® JS 2 Badge has the following ## Badge types -The types of Essential® JS 2 badges are as follows: +The types of Essential® JS 2 Badges are as follows: * Circle * Pill @@ -64,7 +64,7 @@ The types of Essential® JS 2 badges are as ### Circle -The circle badge style can be applied by adding the modifier class `.e-badge-circle` to the target element. +The circle Badge style can be applied by adding the modifier class `.e-badge-circle` to the target element. {% if page.publishingplatform == "aspnet-core" %} @@ -91,7 +91,7 @@ The circle badge style can be applied by adding the modifier class `.e-badge-cir ### Pill -The pill badge style can be applied by adding the modifier class `.e-badge-pill` to the target element. +The pill Badge style can be applied by adding the modifier class `.e-badge-pill` to the target element. {% if page.publishingplatform == "aspnet-core" %} @@ -118,7 +118,7 @@ The pill badge style can be applied by adding the modifier class `.e-badge-pill` ### Link -When badge modifier classes are applied to the anchor tag, the badge’s appearance will change from normal state to hover state on mouseover. +When Badge modifier classes are applied to the anchor tag, the Badge’s appearance will change from normal state to hover state on mouseover. {% if page.publishingplatform == "aspnet-core" %} @@ -145,7 +145,7 @@ When badge modifier classes are applied to the anchor tag, the badge’s appeara ### Notification -The notification badge style can be applied by adding the modifier class `.e-badge-notification` to the target element. Notification badges are used when a content or a context needs special attention. While using the notification badge, set the parent element to `position: relative`. +The notification Badge style can be applied by adding the modifier class `.e-badge-notification` to the target element. Notification Badges are used when a content or a context needs special attention. While using the notification Badge, set the parent element to `position: relative`. {% if page.publishingplatform == "aspnet-core" %} @@ -172,7 +172,7 @@ The notification badge style can be applied by adding the modifier class `.e-bad ### Dot -Dot can be applied by adding the modifier class `.e-badge-dot` to the target element. Dot badges are similar to notification badges, but in a minimalistic way. While using the dot badge, set the parent element to `position: relative`. +Dot can be applied by adding the modifier class `.e-badge-dot` to the target element. Dot Badges are similar to notification Badges, but in a minimalistic way. While using the dot Badge, set the parent element to `position: relative`. {% if page.publishingplatform == "aspnet-core" %} @@ -199,7 +199,7 @@ Dot can be applied by adding the modifier class `.e-badge-dot` to the target ele ### Overlap -The overlap badge can be used with `notification` or `dot` badge, which overlaps with the target element by adding the modifier class`.e-badge-overlap`. While using the overlap badge, set the parent element to `position: relative`. +The overlap Badge can be used with `notification` or `dot` Badge, which overlaps with the target element by adding the modifier class`.e-badge-overlap`. While using the overlap Badge, set the parent element to `position: relative`. {% if page.publishingplatform == "aspnet-core" %} @@ -226,7 +226,7 @@ The overlap badge can be used with `notification` or `dot` badge, which overlaps ### Position -The default position of the `notification` or `dot` badge is top. But, the position can be changed to `bottom` using the modifier class `.e-badge-bottom`. For example, the bottom class modifier is used with dot badge to display the status in the avatar as shown in the following sample. +The default position of the `notification` or `dot` Badge is top. But, the position can be changed to `bottom` using the modifier class `.e-badge-bottom`. For example, the bottom class modifier is used with dot Badge to display the status in the avatar as shown in the following sample. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/chips/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/chips/EJ2_ASP.MVC/getting-started.md index 15a6c5ed2a..71a7a1902b 100644 --- a/ej2-asp-core-mvc/chips/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/chips/EJ2_ASP.MVC/getting-started.md @@ -8,9 +8,9 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Getting Started with ASP.NET MVC Chip Control +# Getting Started with ASP.NET MVC Chips Control -This section briefly explains about how to include [ASP.NET MVC Chip](https://www.syncfusion.com/aspnet-mvc-ui-controls/chips) control in your ASP.NET MVC application using Visual Studio. +This section briefly explains about how to include [ASP.NET MVC Chips](https://www.syncfusion.com/aspnet-mvc-ui-controls/chips) control in your ASP.NET MVC application using Visual Studio. ## Prerequisites @@ -38,7 +38,7 @@ N> Syncfusion® ASP.NET MVC controls are ava ## Add namespace -Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. +Add **Syncfusion.EJ2** namespace reference in `Web.config` under **Views** folder. ``` @@ -48,7 +48,7 @@ Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. ## Add stylesheet and script resources -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the theme and script is referred using CDN inside the `` of **~/Pages/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -68,7 +68,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio ## Register Syncfusion® script manager -Also, register the script manager `EJS().ScriptManager()` at the end of `` in the `~/Pages/Shared/_Layout.cshtml` file as follows. +Also, register the script manager `EJS().ScriptManager()` at the end of `` in the **~/Pages/Shared/_Layout.cshtml** file as follows. {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -82,9 +82,9 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `` {% endhighlight %} {% endtabs %} -## Add ASP.NET MVC Chip control +## Add ASP.NET MVC Chips control -Now, add the Syncfusion® ASP.NET MVC Chip control in `~/Home/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET MVC Chips control in **~/Home/Index.cshtml** page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -94,8 +94,8 @@ Now, add the Syncfusion® ASP.NET MVC Chip c {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC Chip control will be rendered in the default web browser. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC Chips control will be rendered in the default web browser. -![ASP.NET MVC Chip Control](images/chip.png) +![ASP.NET MVC Chips Control](images/chip.png) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/Chip/ASP.NET%20MVC%20Razor%20Examples). diff --git a/ej2-asp-core-mvc/chips/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/chips/EJ2_ASP.NETCORE/getting-started.md index d2bf17b0b2..75c519aaed 100644 --- a/ej2-asp-core-mvc/chips/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/chips/EJ2_ASP.NETCORE/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with ##Platform_Name## Chips Control +title: Getting Started with ##Platform_Name## Chips Control | Syncfusion description: Checkout and learn about getting started with ##Platform_Name## Chips control of Syncfusion Essential JS 2 and more details. platform: ej2-asp-core-mvc control: Getting Started @@ -37,7 +37,8 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. ## Add Syncfusion® ASP.NET Core Tag Helper -Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. + +Open **~/Pages/_ViewImports.cshtml** file and import the `Syncfusion.EJ2` TagHelper. {% tabs %} {% highlight C# tabtitle="~/_ViewImports.cshtml" %} @@ -49,7 +50,7 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe ## Add stylesheet and script resources -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the theme and script are referred to using CDN inside the `` of **~/Pages/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -71,7 +72,7 @@ N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/ ## Register Syncfusion® Script Manager -Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. +Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -87,7 +88,7 @@ Also, register the script manager `` at the end of `` in the A ## Add ASP.NET Core Chips control -Now, add the Syncfusion® ASP.NET Core Chips tag helper in `~/Pages/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET Core Chips tag helper in **~/Pages/Index.cshtml** page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/chips/accessibility.md b/ej2-asp-core-mvc/chips/accessibility.md index a9d2287c27..11cc9d63d5 100644 --- a/ej2-asp-core-mvc/chips/accessibility.md +++ b/ej2-asp-core-mvc/chips/accessibility.md @@ -12,12 +12,12 @@ documentation: ug ## Keyboard interaction -The following shortcut keys are used to access the Chip control without any interruption. +The following shortcut keys are used to access the Chips control without interruption. | Keyboard shortcuts | Actions | |------------|-------------------| -| Enter | Selects the targeted chip from the ChipList/ChipCollection. | -| Delete | Deletes the targeted chip from the ChipList/ChipCollection. | +| Enter | Selects the targeted Chips from the ChipList/ChipCollection. | +| Delete | Deletes the targeted Chips from the ChipList/ChipCollection. | {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/chips/customization.md b/ej2-asp-core-mvc/chips/customization.md index 90ea11bac3..d99858ff8e 100644 --- a/ej2-asp-core-mvc/chips/customization.md +++ b/ej2-asp-core-mvc/chips/customization.md @@ -8,23 +8,23 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Chip Customization in Chip Control +# Chips Customization in Chips Control -This section explains the customization of styles, leading icons, avatar, and trailing icons in Chip control. +This section explains the customization of styles, leading icons, avatars, and trailing icons in the Chips control. ## Styles -The Chip control has the following predefined styles that can be defined using the `cssClass` property. +{% if page.publishingplatform == "aspnet-core" %} + +The Chips control has the following predefined styles that can be defined using the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_CssClass) property. | Class | Description | | -------- | -------- | -| e-primary | Represents a primary chip. | -| e-success | Represents a positive chip. | -| e-info | Represents an informative chip. | -| e-warning | Represents a chip with caution. | -| e-danger | Represents a negative chip. | - -{% if page.publishingplatform == "aspnet-core" %} +| e-primary | Represents a primary Chips. | +| e-success | Represents a positive Chips. | +| e-info | Represents an informative Chips. | +| e-warning | Represents a Chips with caution. | +| e-danger | Represents a negative Chips. | {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -34,6 +34,16 @@ The Chip control has the following predefined styles that can be defined using t {% elsif page.publishingplatform == "aspnet-mvc" %} +The Chips control has the following predefined styles that can be defined using the [`cssClass`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_CssClass) property. + +| Class | Description | +| -------- | -------- | +| e-primary | Represents a primary Chips. | +| e-success | Represents a positive Chips. | +| e-info | Represents an informative Chips. | +| e-warning | Represents a Chips with caution. | +| e-danger | Represents a negative Chips. | + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/styles/razor %} @@ -44,14 +54,14 @@ The Chip control has the following predefined styles that can be defined using t {% endtabs %} {% endif %} - +![ASP.NET Styles Chips Control](images/styles.png) ## Leading Icon -You can add and customize the leading icon of chip using the `leadingIconCss` property. - {% if page.publishingplatform == "aspnet-core" %} +You can add and customize the leading icon of Chips using the [`leadingIconCss`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_LeadingIconCss) property. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/leadingIcon/tagHelper %} @@ -60,6 +70,8 @@ You can add and customize the leading icon of chip using the `leadingIconCss` pr {% elsif page.publishingplatform == "aspnet-mvc" %} +You can add and customize the leading icon of Chips using the [`leadingIconCss`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_LeadingIconCss) property. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/leadingIcon/razor %} @@ -70,14 +82,14 @@ You can add and customize the leading icon of chip using the `leadingIconCss` pr {% endtabs %} {% endif %} - +![ASP.NET Leading Icon Chips Control](images/leading-icon.png) ## Avatar -You can add and customize the avatar of chip using the `avatarIconCss` property. - {% if page.publishingplatform == "aspnet-core" %} +You can add and customize the avatar of Chips using the [`avatarIconCss`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_AvatarIconCss) property. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/avatar/tagHelper %} @@ -86,6 +98,8 @@ You can add and customize the avatar of chip using the `avatarIconCss` property. {% elsif page.publishingplatform == "aspnet-mvc" %} +You can add and customize the avatar of Chips using the [`avatarIconCss`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_AvatarIconCss) property. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/avatar/razor %} @@ -96,14 +110,14 @@ You can add and customize the avatar of chip using the `avatarIconCss` property. {% endtabs %} {% endif %} - +![ASP.NET Avatar Chips Control](images/avatar.png) ## Avatar Content -You can add and customize the avatar content of chip using the `avatarText` property. - {% if page.publishingplatform == "aspnet-core" %} +You can add and customize the avatar content of Chips using the [`avatarText`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_AvatarText) property. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/avatarText/tagHelper %} @@ -112,6 +126,8 @@ You can add and customize the avatar content of chip using the `avatarText` prop {% elsif page.publishingplatform == "aspnet-mvc" %} +You can add and customize the avatar content of Chips using the [`avatarText`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_AvatarText) property. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/avatarText/razor %} @@ -122,14 +138,14 @@ You can add and customize the avatar content of chip using the `avatarText` prop {% endtabs %} {% endif %} - +![ASP.NET Avatar content Chips Control](images/avatar-content.png) ## Trailing Icon -You can add and customize the trailing icon of chip using the `trailingIconCss` property. - {% if page.publishingplatform == "aspnet-core" %} +You can add and customize the trailing icon of Chips using the [`trailingIconCss`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_TrailingIconCss) property. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/trailing/tagHelper %} @@ -138,6 +154,8 @@ You can add and customize the trailing icon of chip using the `trailingIconCss` {% elsif page.publishingplatform == "aspnet-mvc" %} +You can add and customize the trailing icon of Chips using the [`trailingIconCss`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_TrailingIconCss) property. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/trailing/razor %} @@ -150,12 +168,12 @@ You can add and customize the trailing icon of chip using the `trailingIconCss` -## Outline Chip - -Outline chip has the border with the background transparent. It can be set using the `cssClass` property. +## Outline Chips {% if page.publishingplatform == "aspnet-core" %} +Outline Chips have a border with a transparent background. It can be set using the [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_CssClass) property. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/outline/tagHelper %} @@ -164,6 +182,8 @@ Outline chip has the border with the background transparent. It can be set using {% elsif page.publishingplatform == "aspnet-mvc" %} +Outline Chips have a border with a transparent background. It can be set using the [`cssClass`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_CssClass) property. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/outline/razor %} @@ -174,11 +194,13 @@ Outline chip has the border with the background transparent. It can be set using {% endtabs %} {% endif %} +![ASP.NET Outline Chips Control](images/outline-chip.png) + ## Template {% if page.publishingplatform == "aspnet-core" %} -The [`Template`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_Template) property of the Chips control allows users to fully customize the layout and design of each chip. By using the `Template` property, users can include custom HTML elements, such as links, icons, or additional content. +The [`Template`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_Template) property of the Chips control allows users to fully customize the layout and design of each Chips. By using the `Template` property, users can include custom HTML elements such as links, icons, or additional content. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -188,7 +210,7 @@ The [`Template`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.bu {% elsif page.publishingplatform == "aspnet-mvc" %} -The [`Template`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_Template) property of the Chips control allows users to fully customize the layout and design of each chip. By using the `Template` property, users can include custom HTML elements, such as links, icons, or additional content. +The [`Template`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_Template) property of the Chips control allows users to fully customize the layout and design of each Chips. By using the `Template` property, users can include custom HTML elements such as links, icons, or additional content. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -200,5 +222,6 @@ The [`Template`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.but {% endtabs %} {% endif %} +![ASP.NET template Chips Control](images/template.png) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Chips/ChipsSample). diff --git a/ej2-asp-core-mvc/chips/images/action-chip.png b/ej2-asp-core-mvc/chips/images/action-chip.png new file mode 100644 index 0000000000..841b05dd19 Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/action-chip.png differ diff --git a/ej2-asp-core-mvc/chips/images/avatar-content.png b/ej2-asp-core-mvc/chips/images/avatar-content.png new file mode 100644 index 0000000000..497e32d832 Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/avatar-content.png differ diff --git a/ej2-asp-core-mvc/chips/images/avatar.png b/ej2-asp-core-mvc/chips/images/avatar.png new file mode 100644 index 0000000000..baa425d96a Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/avatar.png differ diff --git a/ej2-asp-core-mvc/chips/images/choice-chip.png b/ej2-asp-core-mvc/chips/images/choice-chip.png new file mode 100644 index 0000000000..01c898fb57 Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/choice-chip.png differ diff --git a/ej2-asp-core-mvc/chips/images/deletable-chip.png b/ej2-asp-core-mvc/chips/images/deletable-chip.png new file mode 100644 index 0000000000..5195133a06 Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/deletable-chip.png differ diff --git a/ej2-asp-core-mvc/chips/images/filter-chip.png b/ej2-asp-core-mvc/chips/images/filter-chip.png new file mode 100644 index 0000000000..52ba3cbf0d Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/filter-chip.png differ diff --git a/ej2-asp-core-mvc/chips/images/input-chip.png b/ej2-asp-core-mvc/chips/images/input-chip.png new file mode 100644 index 0000000000..2ea159893b Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/input-chip.png differ diff --git a/ej2-asp-core-mvc/chips/images/leading-icon.png b/ej2-asp-core-mvc/chips/images/leading-icon.png new file mode 100644 index 0000000000..baa425d96a Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/leading-icon.png differ diff --git a/ej2-asp-core-mvc/chips/images/outline-chip.png b/ej2-asp-core-mvc/chips/images/outline-chip.png new file mode 100644 index 0000000000..ad6e55bb43 Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/outline-chip.png differ diff --git a/ej2-asp-core-mvc/chips/images/styles.png b/ej2-asp-core-mvc/chips/images/styles.png new file mode 100644 index 0000000000..6be391b43f Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/styles.png differ diff --git a/ej2-asp-core-mvc/chips/images/template.png b/ej2-asp-core-mvc/chips/images/template.png new file mode 100644 index 0000000000..16cfcc8e62 Binary files /dev/null and b/ej2-asp-core-mvc/chips/images/template.png differ diff --git a/ej2-asp-core-mvc/chips/style.md b/ej2-asp-core-mvc/chips/style.md index 22811b438c..64f288e376 100644 --- a/ej2-asp-core-mvc/chips/style.md +++ b/ej2-asp-core-mvc/chips/style.md @@ -1,7 +1,7 @@ --- layout: post -title: Style in ##Platform_Name## Chips Component -description: Learn here all about Style in Syncfusion ##Platform_Name## Chips component of Syncfusion Essential JS 2 and more. +title: Style in ##Platform_Name## Chips Control | Syncfusion +description: Learn here all about Style in Syncfusion ##Platform_Name## Chips control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Style publishingplatform: ##Platform_Name## @@ -12,9 +12,9 @@ documentation: ug The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. -## Customizing the chip text +## Customizing the Chips text -Use the following CSS to customize the chip text properties. +Use the following CSS to customize the Chips text properties. ```css .e-chip .e-chip-text { @@ -24,9 +24,9 @@ Use the following CSS to customize the chip text properties. } ``` -## Customizing the chip icon +## Customizing the Chips icon -Use the following CSS to customize the chip icon properties. +Use the following CSS to customize the Chips icon properties. ```css .e-chip .e-icon { @@ -35,9 +35,9 @@ Use the following CSS to customize the chip icon properties. } ``` -## Customizing the chip delete button +## Customizing the Chips delete button -Use the following CSS to customize the chip delete button. +Use the following CSS to customize the Chips delete button. ```css .e-chip-list .e-chip .e-chip-delete.e-dlt-btn { @@ -46,9 +46,9 @@ Use the following CSS to customize the chip delete button. } ``` -## Customizing the chip outline +## Customizing the Chips outline -Use the following CSS to customize the chip outline. +Use the following CSS to customize the Chips outline. ```css .e-chip-list .e-chip.e-outline { @@ -57,27 +57,27 @@ Use the following CSS to customize the chip outline. } ``` -## Customizing the chip on selection +## Customizing the Chips on selection -Use the following CSS to customize the chip on selection. +Use the following CSS to customize the Chips on selection. ```css -/* To customize single chip on selection */ +/* To customize single Chips on selection */ .e-chip-list.e-selection .e-chip.e-active { background-color: #ffca1c; color: #e3165b; } -/* To customize multiple chip on selection */ +/* To customize multiple Chips on selection */ .e-chip-list .e-chip.e-active { background-color: #e3165b; color: white; } ``` -## Customizing the chip avatar text +## Customizing the Chips avatar text -Use the following CSS to customize the chip avatar text properties. +Use the following CSS to customize the Chips avatar text properties. ```css .e-chip-list .e-chip .e-chip-avatar { diff --git a/ej2-asp-core-mvc/chips/types.md b/ej2-asp-core-mvc/chips/types.md index 55bc0b6b57..e197086f37 100644 --- a/ej2-asp-core-mvc/chips/types.md +++ b/ej2-asp-core-mvc/chips/types.md @@ -12,14 +12,14 @@ documentation: ug The ChipList control has the following types. -* Input Chip -* Choice Chip -* Filter Chip -* Action Chip +* Input Chips +* Choice Chips +* Filter Chips +* Action Chips -## Input Chip +## Input Chips -Input Chip holds information in compact form. It converts user input into chips. +Input Chips holds information in compact form. It converts user input into Chips. {% if page.publishingplatform == "aspnet-core" %} @@ -41,14 +41,14 @@ Input Chip holds information in compact form. It converts user input into chips. {% endtabs %} {% endif %} +![ASP.NET Input Chips Control](images/input-chip.png) - -## Choice Chip - -Choice Chip allows to select a single chip from the set of ChipList/ChipCollection. It can be enabled by setting the `selection` property to `Single`. +## Choice Chips {% if page.publishingplatform == "aspnet-core" %} +Choice Chips allows to select a single Chips from the set of ChipList/ChipCollection. It can be enabled by setting the [`selection`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_Selection) property to `Single`. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/choice/tagHelper %} @@ -57,6 +57,8 @@ Choice Chip allows to select a single chip from the set of ChipList/ChipCollecti {% elsif page.publishingplatform == "aspnet-mvc" %} +Choice Chips allows to select a single Chips from the set of ChipList/ChipCollection. It can be enabled by setting the [`selection`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_Selection) property to `Single`. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/choice/razor %} @@ -67,14 +69,14 @@ Choice Chip allows to select a single chip from the set of ChipList/ChipCollecti {% endtabs %} {% endif %} +![ASP.NET Choice Chips Control](images/choice-chip.png) - -## Filter Chip - -Filter Chip allows to select a multiple chip from the set of ChipList/ChipCollection. It can be enabled by setting the `selection` property to `Multiple`. +## Filter Chips {% if page.publishingplatform == "aspnet-core" %} +Filter Chips allows to select a multiple Chips from the set of ChipList/ChipCollection. It can be enabled by setting the [`selection`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_Selection) property to `Multiple`. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/filter/tagHelper %} @@ -83,6 +85,8 @@ Filter Chip allows to select a multiple chip from the set of ChipList/ChipCollec {% elsif page.publishingplatform == "aspnet-mvc" %} +Filter Chips allows to select a multiple Chips from the set of ChipList/ChipCollection. It can be enabled by setting the [`selection`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_Selection) property to `Multiple`. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/filter/razor %} @@ -93,14 +97,14 @@ Filter Chip allows to select a multiple chip from the set of ChipList/ChipCollec {% endtabs %} {% endif %} +![ASP.NET Filter Chips Control](images/filter-chip.png) - -## Action Chip - -The Action Chip triggers the event like click or delete, which helps doing action based on the event. +## Action Chips {% if page.publishingplatform == "aspnet-core" %} +The Action Chips triggers the event like [`click`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_Click) or [`delete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_Delete), which helps doing action based on the event. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/action/tagHelper %} @@ -109,6 +113,8 @@ The Action Chip triggers the event like click or delete, which helps doing actio {% elsif page.publishingplatform == "aspnet-mvc" %} +The Action Chips triggers the event like [`click`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_Click) or [`delete`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_Delete), which helps doing action based on the event. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/action/razor %} @@ -119,14 +125,14 @@ The Action Chip triggers the event like click or delete, which helps doing actio {% endtabs %} {% endif %} +![ASP.NET Actions Chips Control](images/action-chip.png) - -### Deletable Chip - -Deletable Chip allows to delete a chip from ChipList/ChipCollection. It can be enabled by setting the `enableDelete` property to `true`. +### Deletable Chips {% if page.publishingplatform == "aspnet-core" %} +Deletable Chips allows to delete a Chips from ChipList/ChipCollection. It can be enabled by setting the [`enableDelete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_EnableDelete) property to `true`. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chips/delete/tagHelper %} @@ -135,6 +141,8 @@ Deletable Chip allows to delete a chip from ChipList/ChipCollection. It can be e {% elsif page.publishingplatform == "aspnet-mvc" %} +Deletable Chips allows to delete a Chips from ChipList/ChipCollection. It can be enabled by setting the [`enableDelete`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.ChipList.html#Syncfusion_EJ2_Buttons_ChipList_EnableDelete) property to `true`. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chips/delete/razor %} @@ -145,4 +153,6 @@ Deletable Chip allows to delete a chip from ChipList/ChipCollection. It can be e {% endtabs %} {% endif %} +![ASP.NET Deletable Chips Control](images/deletable-chip.png) + N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-UG-Examples/tree/main/Chips/ChipsSample). \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/badge/razor b/ej2-asp-core-mvc/code-snippet/avatar/badge/razor index 66eda5b2d3..a6634c0c4e 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/badge/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/badge/razor @@ -6,7 +6,7 @@
- profile_pic + profile_pic
6 @@ -14,7 +14,7 @@
- profile_pic + profile_pic
12 @@ -22,7 +22,7 @@
- profile_pic + profile_pic
46 @@ -30,7 +30,7 @@
- profile_pic + profile_pic
82 @@ -38,7 +38,7 @@
- profile_pic + profile_pic
99+ @@ -54,7 +54,7 @@
- profile_pic + profile_pic
6 @@ -62,7 +62,7 @@
- profile_pic + profile_pic
12 @@ -70,7 +70,7 @@
- profile_pic + profile_pic
46 @@ -78,7 +78,7 @@
- profile_pic + profile_pic
82 @@ -86,7 +86,7 @@
- profile_pic + profile_pic
99+ @@ -97,82 +97,85 @@
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/badge/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/badge/tagHelper index 39851fd999..a6634c0c4e 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/badge/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/badge/tagHelper @@ -6,7 +6,7 @@
- profile_pic + profile_pic
6 @@ -14,7 +14,7 @@
- profile_pic + profile_pic
12 @@ -22,7 +22,7 @@
- profile_pic + profile_pic
46 @@ -30,7 +30,7 @@
- profile_pic + profile_pic
82 @@ -38,7 +38,7 @@
- profile_pic + profile_pic
99+ @@ -54,7 +54,7 @@
- profile_pic + profile_pic
6 @@ -62,7 +62,7 @@
- profile_pic + profile_pic
12 @@ -70,7 +70,7 @@
- profile_pic + profile_pic
46 @@ -78,7 +78,7 @@
- profile_pic + profile_pic
82 @@ -86,7 +86,7 @@
- profile_pic + profile_pic
99+ @@ -97,83 +97,85 @@
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/circle/razor b/ej2-asp-core-mvc/code-snippet/avatar/circle/razor index ad7a756f99..c7bde28a76 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/circle/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/circle/razor @@ -7,10 +7,10 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/circle/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/circle/tagHelper index ad7a756f99..c7bde28a76 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/circle/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/circle/tagHelper @@ -7,10 +7,10 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/color/razor b/ej2-asp-core-mvc/code-snippet/avatar/color/razor index 0414195d42..eaf8bd4b4f 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/color/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/color/razor @@ -7,35 +7,35 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/color/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/color/tagHelper index 0414195d42..eaf8bd4b4f 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/color/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/color/tagHelper @@ -7,35 +7,35 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/custom-size/razor b/ej2-asp-core-mvc/code-snippet/avatar/custom-size/razor index f39c31a424..96667a9080 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/custom-size/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/custom-size/razor @@ -7,30 +7,30 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/custom-size/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/custom-size/tagHelper index f39c31a424..96667a9080 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/custom-size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/custom-size/tagHelper @@ -7,30 +7,30 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/default/razor b/ej2-asp-core-mvc/code-snippet/avatar/default/razor index 15f713e422..187a33a9c3 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/default/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/default/razor @@ -7,10 +7,10 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/default/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/default/tagHelper index 15f713e422..187a33a9c3 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/default/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/default/tagHelper @@ -7,10 +7,10 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/listview/razor b/ej2-asp-core-mvc/code-snippet/avatar/listview/razor index a035266b1b..d079eee680 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/listview/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/listview/razor @@ -1,119 +1,89 @@ -@using Syncfusion.EJ2 -
- -
- - @{ var template = "
" + - "${if(avatar!=='')}" + - "${avatar}" + - "${else}" + - " " + - "${/if}" + - "" + - "${text}
";} - @Html.EJS().ListView("letterAvatarList").Enable(true).DataSource((IEnumerable)ViewBag.dataSource).HeaderTitle("Contacts").ShowHeader(true).Template(template).SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render() - - - - - +@using Syncfusion.EJ2
< !-- Listview element -->@{ var template = "
" + + "${if(avatar!=='')}"+"${avatar}"+"${else}"+" "+"${/if}"+""+"${text}
"; +} + +@Html.EJS().ListView("letterAvatarList").Enable(true).DataSource((IEnumerable)ViewBag.dataSource).HeaderTitle("Contacts").ShowHeader(true).Template(template).SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/listview/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/listview/tagHelper index 3e3a134b88..020a9bdbc9 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/listview/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/listview/tagHelper @@ -1,14 +1,14 @@ -@{ - var template = "
" + - "${if(avatar!=='')}" + - "${avatar}" + - "${else}" + - " " + - "${/if}" + - "" + - "${text}
"; - - List data = new List(); +@{ + var template = "
" + + "${if(avatar!=='')}" + + "${avatar}" + + "${else}" + + " " + + "${/if}" + + "" + + "${text}
"; + + List data = new List < object > (); data.Add(new { text = "Robert", id = "s_01", avatar= "", pic= "pic04" }); data.Add(new { text = "Nancy", id = "s_02", avatar= "N", pic= "" }); data.Add(new { text = "John", id = "s_03", pic= "pic01", avatar= "" }); @@ -18,9 +18,10 @@ data.Add(new { text = "Margaret", id = "s_07", avatar= "M", pic= "" }); }
- - -
+ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/razor b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/razor index 581e772b07..47002e2b74 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/razor @@ -85,119 +85,121 @@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper index 39fdd4b39c..c4e4666749 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper @@ -1,11 +1,4 @@ -@page -@model AvatarUGSample.Pages.VariousAvatarMediaModel - -@{ - -} - -
+
@@ -92,119 +85,121 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/size/razor b/ej2-asp-core-mvc/code-snippet/avatar/size/razor index 0d1514720c..5c393e0e3c 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/size/razor +++ b/ej2-asp-core-mvc/code-snippet/avatar/size/razor @@ -15,6 +15,7 @@ } .e-avatar { - background-image: url(./pic01.png); + background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic01.png")'); + margin: 2px; } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/avatar/size/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/size/tagHelper index fddf9e54b7..3b652b7279 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/size/tagHelper @@ -15,6 +15,6 @@ } .e-avatar { - background-image: url(@Url.Content("~/css/avatar/images/pic01.png")); + background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic01.png")'); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/badge/position/tagHelper b/ej2-asp-core-mvc/code-snippet/badge/position/tagHelper index 2b3909d028..4eba5b92f2 100644 --- a/ej2-asp-core-mvc/code-snippet/badge/position/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/badge/position/tagHelper @@ -25,64 +25,65 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chips/avatar/razor b/ej2-asp-core-mvc/code-snippet/chips/avatar/razor index abd388f28f..ca067a0471 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/avatar/razor +++ b/ej2-asp-core-mvc/code-snippet/chips/avatar/razor @@ -1,25 +1,24 @@ - @Html.EJS().ChipList("chip-avatar").Chips(chip => - { - chip.Text("Andrew").AvatarIconCss("andrew").Enabled(true).Add(); - chip.Text("Janet").AvatarIconCss("janet").Enabled(true).Add(); - chip.Text("Laura").AvatarIconCss("laura").Enabled(true).Add(); - chip.Text("Margaret").AvatarIconCss("margaret").Enabled(true).Add(); - }).Render() +@Html.EJS().ChipList("chip-avatar").Chips(chip => { + chip.Text("Andrew").AvatarIconCss("andrew").Enabled(true).Add(); + chip.Text("Janet").AvatarIconCss("janet").Enabled(true).Add(); + chip.Text("Laura").AvatarIconCss("laura").Enabled(true).Add(); + chip.Text("Margaret").AvatarIconCss("margaret").Enabled(true).Add(); +}).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chips/avatar/tagHelper b/ej2-asp-core-mvc/code-snippet/chips/avatar/tagHelper index 330006e873..07e20c6549 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/avatar/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chips/avatar/tagHelper @@ -1,26 +1,26 @@ - - - - - - + + + + + + \ No newline at end of file + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chips/choice/razor b/ej2-asp-core-mvc/code-snippet/chips/choice/razor index 5d825b44fd..09fa31d3e0 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/choice/razor +++ b/ej2-asp-core-mvc/code-snippet/chips/choice/razor @@ -1,7 +1,7 @@ -@Html.EJS().ChipList("chip-avatar").Selection(Selection.Single).Chips(chip => - { - chip.Text("Small").Enabled(true).Add(); - chip.Text("Medium").Enabled(true).Add(); - chip.Text("Large").Enabled(true).Add(); - chip.Text("Extra Large").Enabled(true).Add(); - }).Render() \ No newline at end of file +@Html.EJS().ChipList("chip-avatar").Selection(Syncfusion.EJ2.Buttons.Selection.Single).Chips(chip => + { + chip.Text("Small").Enabled(true).Add(); + chip.Text("Medium").Enabled(true).Add(); + chip.Text("Large").Enabled(true).Add(); + chip.Text("Extra Large").Enabled(true).Add(); + }).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chips/filter/razor b/ej2-asp-core-mvc/code-snippet/chips/filter/razor index 07b2b70209..5f5cfa0e0e 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/filter/razor +++ b/ej2-asp-core-mvc/code-snippet/chips/filter/razor @@ -1,4 +1,4 @@ -@Html.EJS().ChipList("chip-avatar").Selection(Selection.Multiple).Chips(chip => +@Html.EJS().ChipList("chip-avatar").Selection(Syncfusion.EJ2.Buttons.Selection.Multiple).Chips(chip => { chip.Text("Chai").Enabled(true).Add(); chip.Text("Chang").Enabled(true).Add(); diff --git a/ej2-asp-core-mvc/code-snippet/chips/leadingIcon/razor b/ej2-asp-core-mvc/code-snippet/chips/leadingIcon/razor index e579167ce9..38af6bf6a9 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/leadingIcon/razor +++ b/ej2-asp-core-mvc/code-snippet/chips/leadingIcon/razor @@ -1,25 +1,25 @@ - @Html.EJS().ChipList("chip-avatar").Chips(chip => - { - chip.Text("Andrew").LeadingIconCss("andrew").Enabled(true).Add(); - chip.Text("Janet").LeadingIconCss("janet").Enabled(true).Add(); - chip.Text("Laura").LeadingIconCss("laura").Enabled(true).Add(); - chip.Text("Margaret").LeadingIconCss("margaret").Enabled(true).Add(); - }).Render() +@Html.EJS().ChipList("chip-avatar").Chips(chip => + { + chip.Text("Andrew").LeadingIconCss("andrew").Enabled(true).Add(); + chip.Text("Janet").LeadingIconCss("janet").Enabled(true).Add(); + chip.Text("Laura").LeadingIconCss("laura").Enabled(true).Add(); + chip.Text("Margaret").LeadingIconCss("margaret").Enabled(true).Add(); + }).Render() \ No newline at end of file +#chip-avatar .janet { +background-image: url('https://ej2.syncfusion.com/aspnetcore/css/chips/images/janet.png') +} + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chips/leadingIcon/tagHelper b/ej2-asp-core-mvc/code-snippet/chips/leadingIcon/tagHelper index 982cb91f0b..93d55450e3 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/leadingIcon/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chips/leadingIcon/tagHelper @@ -1,26 +1,26 @@ - - - - - - + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chips/outline/razor b/ej2-asp-core-mvc/code-snippet/chips/outline/razor index d882357125..8af3bb3fc7 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/outline/razor +++ b/ej2-asp-core-mvc/code-snippet/chips/outline/razor @@ -1,5 +1,5 @@
-@Html.EJS().ChipList("chip-avatar").CssClass("e-outline").Chips(chip => +@Html.EJS().ChipList("chip-avatar1").CssClass("e-outline").Chips(chip => { chip.Text("Chai").Enabled(true).Add(); chip.Text("Chung").Enabled(true).Add(); @@ -7,7 +7,7 @@ chip.Text("Ikura").Enabled(true).Add(); }).Render() -@Html.EJS().ChipList("chip-avatar").CssClass("e-outline").EnableDelete(true).Chips(chip => +@Html.EJS().ChipList("chip-avatar2").CssClass("e-outline").EnableDelete(true).Chips(chip => { chip.Text("Andrew").Enabled(true).Add(); chip.Text("Janet").Enabled(true).Add(); diff --git a/ej2-asp-core-mvc/code-snippet/chips/outline/tagHelper b/ej2-asp-core-mvc/code-snippet/chips/outline/tagHelper index 877c5f1416..6871c273ec 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/outline/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chips/outline/tagHelper @@ -1,5 +1,5 @@
- + @@ -7,7 +7,7 @@ - + diff --git a/ej2-asp-core-mvc/code-snippet/chips/template/razor b/ej2-asp-core-mvc/code-snippet/chips/template/razor index 5e9ad068ef..69ccd1ff42 100644 --- a/ej2-asp-core-mvc/code-snippet/chips/template/razor +++ b/ej2-asp-core-mvc/code-snippet/chips/template/razor @@ -1,9 +1,24 @@ - @Html.EJS().ChipList("chip-avatar").Chips(chip => - { - chip.LeadingIconCss("trendingIcon").Template('#BreakingNews125k posts').Enabled(true).Add(); - chip.LeadingIconCss("cameraIcon").Template('#PhotoOfTheDay').Enabled(true).Add(); - chip.LeadingIconCss("trendingIcon").Template('#TechNews107k posts').Enabled(true).Add(); - }).Render() + +@Html.EJS().ChipList("chip-avatar").Chips(chip => +{ + chip.LeadingIconCss("trendingIcon").Template("#trendingNewsTemplate").Enabled(true).Add(); + chip.LeadingIconCss("cameraIcon").Template("#photoOfTheDayTemplate").Enabled(true).Add(); + chip.LeadingIconCss("trendingIcon").Template("#techNewsTemplate").Enabled(true).Add(); +}).Render() + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/CSHTML.cs new file mode 100644 index 0000000000..d89330ddc4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/CSHTML.cs @@ -0,0 +1,4 @@ +public class cellSpacingModel +{ + public double[] cellSpacing { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/tagHelper index 26cce8adb1..2ef6d5d1c7 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/cell-spacing/tagHelper @@ -1,6 +1,13 @@ +@{ + ... + cellSpacingModel modelValue = new cellSpacingModel(); + modelValue.cellSpacing = new double[] { 20, 20 }; +} + +
- + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/CSHTML.cs new file mode 100644 index 0000000000..bdf391e654 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/CSHTML.cs @@ -0,0 +1,4 @@ + public class panelCellSpacingModel + { + public double[]? cellSpacing { get; set; } + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/tagHelper index 4efb47ab6c..9b655bb943 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/content-panel/tagHelper @@ -1,6 +1,13 @@ +@{ + ... + panelCellSpacingModel modelValue = new panelCellSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; +} + +
- + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/CSHTML.cs new file mode 100644 index 0000000000..85c1596770 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/CSHTML.cs @@ -0,0 +1,4 @@ +public class ddCellSpacingModel +{ + public double[]? cellSpacing { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/tagHelper index 0f687c4818..e0bac3cf55 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/disable-dragging/tagHelper @@ -1,7 +1,11 @@ -@model WebApplication.Controllers.HomeController.spacingModel +@{ + ... + ddCellSpacingModel modelValue = new ddCellSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; +}
- + @@ -29,4 +33,4 @@ text-align: center; line-height: 90px; } - \ No newline at end of file + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs new file mode 100644 index 0000000000..85c1596770 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs @@ -0,0 +1,4 @@ +public class ddCellSpacingModel +{ + public double[]? cellSpacing { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/tagHelper index d5e34c240b..83eff18eb3 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/drag-and-drop/tagHelper @@ -1,6 +1,13 @@ +@{ + ... + ddCellSpacingModel modelValue = new ddCellSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; +} + +
- + @@ -21,18 +28,18 @@
\ No newline at end of file + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/CSHTML.cs new file mode 100644 index 0000000000..e8949d6e67 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/CSHTML.cs @@ -0,0 +1,21 @@ +public class componentSpacingModel +{ + public double[]? cellSpacing { get; set; } +} +public class ChartData +{ + public string? month; + public double sales; +} +public class LineData +{ + public double x; + public double y; +} + +public class PieData +{ + public string x; + public double y; + public string? text; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/tagHelper index 8748005581..6e4e91b18d 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/dragging-handler/tagHelper @@ -1,6 +1,48 @@ +@{ + ... + componentSpacingModel modelValue = new componentSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; + + List chartData = new List + { + new ChartData { month = "Jan", sales = 35, }, + new ChartData { month = "Feb", sales = 28, }, + new ChartData { month = "Mar", sales = 34, }, + new ChartData { month = "Apr", sales = 32, }, + new ChartData { month = "May", sales = 40, }, + new ChartData { month = "Jun", sales = 32, }, + new ChartData { month = "Jul", sales = 35, }, + new ChartData { month = "Aug", sales = 55, }, + new ChartData { month = "Sep", sales = 38, }, + new ChartData { month = "Oct", sales = 30, }, + new ChartData { month = "Nov", sales = 25, }, + new ChartData { month = "Dec", sales = 32, } + }; + + List lineData = new List + { + new LineData { x = 2013, y = 28, }, + new LineData { x = 2014, y = 25, }, + new LineData { x = 2015, y = 26, }, + new LineData { x = 2016, y = 27, }, + new LineData { x = 2017, y = 32, }, + new LineData { x = 2018, y = 35, } + }; + + List pieData1 = new List + { + new PieData { x = "Chrome", y = 37, text = "37%", }, + new PieData { x = "UC Browser", y = 17, text = "17%", }, + new PieData { x = "iPhone", y = 19, text = "19%", }, + new PieData { x = "Others", y = 4, text = "4%", }, + new PieData { x = "Opera", y = 11, text = "11%", }, + new PieData { x = "Android", y = 12, text = "12%", } + }; +} +
- + @@ -17,7 +59,7 @@ - + @@ -29,7 +71,7 @@ - + @@ -43,7 +85,7 @@ - + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/CSHTML.cs new file mode 100644 index 0000000000..611ee0f9fd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/CSHTML.cs @@ -0,0 +1,5 @@ +public class floatingSpacingModel +{ + public double[]? cellSpacing { get; set; } +} + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/tagHelper index 819f2f22e8..5ba87fae1d 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/floating-panels/tagHelper @@ -1,11 +1,18 @@ + +@{ + .... + floatingSpacingModel modelValue = new floatingSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; +} +
- +
- + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/CSHTML.cs new file mode 100644 index 0000000000..d89330ddc4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/CSHTML.cs @@ -0,0 +1,4 @@ +public class cellSpacingModel +{ + public double[] cellSpacing { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/tagHelper index 5430e4586c..f97ed74bf0 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/graphical-representation/tagHelper @@ -1,6 +1,13 @@ +@{ + ... + cellSpacingModel modelValue = new cellSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; +} + +
- + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs new file mode 100644 index 0000000000..432efe815c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs @@ -0,0 +1,5 @@ +public class cellSpacingModel +{ + public double[] cellSpacing { get; set; } + public double aspectRatio { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/tagHelper index 2d9d77c3f7..6c7b82ef6b 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/modifying-cell-size/tagHelper @@ -1,6 +1,14 @@ +@{ + ... + cellSpacingModel modelValue = new cellSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; + modelValue.aspectRatio = 100 / 50; +} + +
- + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/CSHTML.cs new file mode 100644 index 0000000000..85c1596770 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/CSHTML.cs @@ -0,0 +1,4 @@ +public class ddCellSpacingModel +{ + public double[]? cellSpacing { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/tagHelper index 4999ab9b29..98d8d5b494 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/moving/tagHelper @@ -1,7 +1,11 @@ -@model WebApplication.Controllers.HomeController.spacingModel +@{ + ... + ddCellSpacingModel modelValue = new ddCellSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; +}
- + @@ -21,14 +25,14 @@
\ No newline at end of file + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/CSHTML.cs new file mode 100644 index 0000000000..85216ca578 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/CSHTML.cs @@ -0,0 +1,4 @@ +public class panelCellSpacingModel +{ + public double[]? cellSpacing { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/tagHelper index 2d60e2cace..86682d5f18 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-position/tagHelper @@ -1,6 +1,13 @@ +@{ + .. + panelCellSpacingModel modelValue = new panelCellSpacingModel(); + modelValue.cellSpacing = new double[] { 20, 20 }; +} + +
- + diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/CSHTML.cs new file mode 100644 index 0000000000..85216ca578 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/CSHTML.cs @@ -0,0 +1,4 @@ +public class panelCellSpacingModel +{ + public double[]? cellSpacing { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/tagHelper index 8972fe9c3c..2c8f1fc015 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/panel-size/tagHelper @@ -1,6 +1,13 @@ +@{ + ... + panelCellSpacingModel modelValue = new panelCellSpacingModel(); + modelValue.cellSpacing = new double[] { 20, 20 }; +} + +
- + @@ -30,4 +37,4 @@ text-align: center; line-height: 90px; } - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/CSHTML.cs new file mode 100644 index 0000000000..e8949d6e67 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/CSHTML.cs @@ -0,0 +1,21 @@ +public class componentSpacingModel +{ + public double[]? cellSpacing { get; set; } +} +public class ChartData +{ + public string? month; + public double sales; +} +public class LineData +{ + public double x; + public double y; +} + +public class PieData +{ + public string x; + public double y; + public string? text; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/tagHelper index 736e9fbf24..f75f9a68c2 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/placing-content/tagHelper @@ -1,6 +1,49 @@ +@{ + ... + componentSpacingModel modelValue = new componentSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; + + List chartData = new List + { + new ChartData { month = "Jan", sales = 35, }, + new ChartData { month = "Feb", sales = 28, }, + new ChartData { month = "Mar", sales = 34, }, + new ChartData { month = "Apr", sales = 32, }, + new ChartData { month = "May", sales = 40, }, + new ChartData { month = "Jun", sales = 32, }, + new ChartData { month = "Jul", sales = 35, }, + new ChartData { month = "Aug", sales = 55, }, + new ChartData { month = "Sep", sales = 38, }, + new ChartData { month = "Oct", sales = 30, }, + new ChartData { month = "Nov", sales = 25, }, + new ChartData { month = "Dec", sales = 32, } + }; + + List lineData = new List + { + new LineData { x = 2013, y = 28, }, + new LineData { x = 2014, y = 25, }, + new LineData { x = 2015, y = 26, }, + new LineData { x = 2016, y = 27, }, + new LineData { x = 2017, y = 32, }, + new LineData { x = 2018, y = 35, } + }; + + List pieData1 = new List + { + new PieData { x = "Chrome", y = 37, text = "37%", }, + new PieData { x = "UC Browser", y = 17, text = "17%", }, + new PieData { x = "iPhone", y = 19, text = "19%", }, + new PieData { x = "Others", y = 4, text = "4%", }, + new PieData { x = "Opera", y = 11, text = "11%", }, + new PieData { x = "Android", y = 12, text = "12%", } + }; +} + +
- + @@ -12,15 +55,15 @@
- - - - - - - - - + + + + + + + + +
@@ -36,19 +79,19 @@
- - - - - - - - - - - - - + + + + + + + + + + + + +
@@ -64,15 +107,15 @@
- - - - - - - - - + + + + + + + + +
@@ -129,9 +172,9 @@ height: 30px } - .e-dashboard-layout.e-control .e-panel .e-panel-header div { - text-align: center; - } + .e-dashboard-layout.e-control .e-panel .e-panel-header div { + text-align: center; + } .header { padding: 5px; diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/CSHTML.cs b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/CSHTML.cs new file mode 100644 index 0000000000..85c1596770 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/CSHTML.cs @@ -0,0 +1,4 @@ +public class ddCellSpacingModel +{ + public double[]? cellSpacing { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/tagHelper b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/tagHelper index ebc50986f9..982df4bb71 100644 --- a/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/dashboard-layout/resize-panel/tagHelper @@ -1,7 +1,11 @@ -@model WebApplication.Controllers.HomeController.spacingModel +@{ + ... + ddCellSpacingModel modelValue = new ddCellSpacingModel(); + modelValue.cellSpacing = new double[] { 10, 10 }; +}
- + @@ -21,12 +25,12 @@
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper index 897d79fc5e..7c35424522 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/custombutton/tagHelper @@ -1,25 +1,42 @@ - + - - - - - - + + + + + + + - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs index 77d8fe70cf..686c81f8f8 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/dialog.cs @@ -1,6 +1,5 @@ public IActionResult Index() { - var Order = OrderDetails.GetAllRecords(); - ViewBag.DataSource = Order; + ViewBag.DataSource = OrderDetails.GetAllRecords(); return View(); } diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor index 8de6e388c3..2ab1cb5d0e 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/razor @@ -1,34 +1,27 @@ -@using Syncfusion.EJ2 - -@section ControlsSection{ -
- @Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable)ViewBag.dataSource).ActionComplete("actionComplete").Columns(col => - { - col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add(); - col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add(); - }).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() - - - -} + }); + function actionComplete(args) { + if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { + var dialog = args.dialog; + dialog.showCloseIcon = false; + dialog.height = 360; + dialog.width = 300; + dialog.header = args.requestType === 'beginEdit' ? 'Edit Record of ' + args.rowData['CustomerID'] : 'New Customer'; + } + } + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper index c4fa6c3d34..ddef9c0d04 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/customizedialog/tagHelper @@ -1,17 +1,14 @@ - + - - - - + + + + - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs index f6f0126ac7..4019df2042 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/dialog.cs @@ -1,6 +1,5 @@ public IActionResult Index() { - var Order = OrderDetails.GetAllRecords(); - ViewBag.DataSource = Order; + ViewBag.DataSource = OrderDetails.GetAllRecords(); return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor index 71eb2c9d7e..6561b5e764 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/razor @@ -1,9 +1,8 @@ -@Html.EJS().Grid("DialogEdit").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true", minLength=3 }).Add(); - col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); - col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); - -}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() + col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipName").HeaderText("Ship Name").Width("150").ValidationRules(new { required = "true" }).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add(); +}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper index 6ce4d99f84..ee242e9ce8 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/dialog/tagHelper @@ -1,9 +1,10 @@ - + - - - + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs index 77d8fe70cf..686c81f8f8 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs @@ -1,6 +1,5 @@ public IActionResult Index() { - var Order = OrderDetails.GetAllRecords(); - ViewBag.DataSource = Order; + ViewBag.DataSource = OrderDetails.GetAllRecords(); return View(); } diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/razor b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/razor index c30d497891..2a791dcbb2 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/razor @@ -1,35 +1,40 @@ -@using Syncfusion.EJ2 - -@Html.EJS().Grid("DialogTemplateEdit").DataSource((IEnumerable)ViewBag.DataSource).ActionBegin("actionBegin").Columns(col => +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => { - col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer Name").Width("150").Visible(false).Add(); - col.Field("Freight").HeaderText("Freight").EditType("numericedit").Format("C2").Width("150").Add(); - col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add(); - -}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() - + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = "true" }).Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").ValidationRules(new { required = "true",min=1, max=1000 }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").ValidationRules(new { required = "true" }).Width("150").Add(); +}).ActionBegin("actionBegin").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/tagHelper index 6258056c8d..166d8d9740 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/show-hide-edit-dialog/tagHelper @@ -1,33 +1,40 @@ - + - - - - - - - + + + + + + - - - + - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/tagHelper index c7bae7eb2b..c452d7413b 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/edit/wizardediting/tagHelper @@ -1,129 +1,168 @@ -@{ - ViewData["Title"] = "DialogTemplate"; -} - -@model TestApplication.Models.OrdersDetails - -
- - - - - - - - - - -
- - - +@using Newtonsoft.Json + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/disablegrid.cs b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/disablegrid.cs index da9dcb1404..d9ebad91a3 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/disablegrid.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/disablegrid.cs @@ -1,6 +1,5 @@ public IActionResult Index() { - var Order = OrderDetails.GetAllRecords(); - ViewBag.DataSource = Order; + ViewBag.DataSource = OrderDetails.GetAllRecords(); return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/razor b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/razor index 01a35a75e3..003f328434 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/razor @@ -1,37 +1,32 @@ -@Html.EJS().Button("element").Content("Enable/Disable Grid").Render() - - -@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +
+ @Html.EJS().Button("element").Content("Enable/Disable Grid").Render() +
+@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => { - col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").Add(); + col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); - col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); - }).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/tagHelper index 3863cdf903..99883ee0a0 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/how-to/disablegrid/tagHelper @@ -1,37 +1,35 @@ - - -
- +
+ +
+
+ - +
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/print.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/print.cs new file mode 100644 index 0000000000..d9ebad91a3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/print.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/razor new file mode 100644 index 0000000000..89d6a9f926 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/razor @@ -0,0 +1,19 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.DataSource).Height("348px").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCity").HeaderText("Ship City").Width("120").Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); +}).AllowPaging().BeforePrint("beforePrint").Toolbar(new List() { "Print" }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/tagHelper new file mode 100644 index 0000000000..c0a713b817 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-add-title/tagHelper @@ -0,0 +1,20 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/hierarchyprint.cs b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/hierarchyprint.cs new file mode 100644 index 0000000000..000a47ca09 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/hierarchyprint.cs @@ -0,0 +1,7 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrdersDetails.GetAllRecords();; + ViewBag.EmployeeDataSource = EmployeeView.GetAllRecords(); + ViewBag.CustomerDataSource = Customer.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/razor b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/razor new file mode 100644 index 0000000000..0da1446fcd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/razor @@ -0,0 +1,59 @@ +@{ + var secondChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable)ViewBag.CustomerDataSource, + QueryString = "CustomerID", + Columns = new List + { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="90" }, + } + }; + var childGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable)ViewBag.DataSource, + QueryString = "EmployeeID", + Columns = new List + { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, + }, + ChildGrid = secondChildGrid + }; +} + +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.EmployeeDataSource).HierarchyPrintMode(Syncfusion.EJ2.Grids.HierarchyGridPrintMode.Expanded).Columns(col => +{ + col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("FirstName").HeaderText("First Name").Width("125").Add(); + col.Field("Title").HeaderText("Title").Width("180").Add(); + col.Field("City").HeaderText("City").Width("135").Add(); +}).AllowPaging().PageSettings(page => page.PageSize(4)).Toolbar(new List() { "Print"}).ChildGrid(childGrid).ActionBegin("actionBegin").Load("load").Render(); + diff --git a/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/tagHelper new file mode 100644 index 0000000000..fe4fadaf08 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/print/print-expanded-state/tagHelper @@ -0,0 +1,64 @@ +@{ + var secondChildGrid = new Syncfusion.EJ2.Grids.Grid() { + DataSource = (IEnumerable)ViewBag.CustomerDataSource, + QueryString = "CustomerID", + Columns = new List + { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="Country", HeaderText="Country", Width="90" }, + } + }; +} +@{ + var childGrid = new Syncfusion.EJ2.Grids.Grid() { + DataSource = (IEnumerable)ViewBag.DataSource, + QueryString = "EmployeeID", + Columns = new List + { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, + }, + ChildGrid = secondChildGrid + }; +} + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor new file mode 100644 index 0000000000..1882f42609 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/razor @@ -0,0 +1,34 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.dataSource).AllowSorting().Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("100").Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add(); + col.Field("OrderDate").HeaderText("Order Date").Format("yMd").SortComparer("sortComparer").Width("130").Add(); + col.Field("ShipCountry").HeaderText("ShipCountry").Width("150").Add(); + +}).ActionBegin("actionBegin").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/sort-comparer.cs b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/sort-comparer.cs new file mode 100644 index 0000000000..4169edafac --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/sort-comparer.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.dataSource =OrderDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper new file mode 100644 index 0000000000..f226b6bbfa --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/sorting/sort-comparer/tagHelper @@ -0,0 +1,39 @@ +@{ + Object sortComparer = "sortComparer"; +} + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/getting-start-mvc/error-handling/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/getting-start-mvc/error-handling/razor index 983bebd7af..86f7501b6c 100644 --- a/ej2-asp-core-mvc/code-snippet/tree-grid/getting-start-mvc/error-handling/razor +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/getting-start-mvc/error-handling/razor @@ -20,7 +20,7 @@ }).Height(400).ChildMapping("Children").ActionFailure("actionFailure").TreeColumnIndex(1).Render()) - < script > + diff --git a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md index 78022d51d6..31fd283a54 100644 --- a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.MVC/getting-started.md @@ -49,7 +49,7 @@ Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. ## Add stylesheet and script resources -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the theme and script is referred using CDN inside the `` of **~/Pages/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -69,7 +69,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio ## Register Syncfusion® script manager -Also, register the script manager `EJS().ScriptManager()` at the end of `` in the `~/Pages/Shared/_Layout.cshtml` file as follows. +Also, register the script manager `EJS().ScriptManager()` at the end of `` in the **~/Pages/Shared/_Layout.cshtml** file as follows. {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -85,16 +85,16 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `` ## Add ASP.NET MVC Dashboard Layout control -Now, add the Syncfusion® ASP.NET MVC Dashboard Layout control in `~/Views/Home/Index.cshtml` page by the following ways. +Now, add the Syncfusion® ASP.NET MVC Dashboard Layout control in **~/Views/Home/Index.cshtml** page by the following ways. * Defined the panels property as the attribute in the content template. * Using the [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property through helper. ### Setting the panels property using content template -You can render the Dashboard Layout control by adding the panels property as the attribute to the content template. Add the content template with panel definition for Dashboard Layout into your `index.cshtml` page which is present under `Views/Home` folder. +You can render the Dashboard Layout control by adding the panels property as the attribute to the content template. Add the content template with panel definition for Dashboard Layout into your **index.cshtml** page which is present under **Views/Home** folder. -In the following sample, the dashboard layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using content template. +In the following sample, the Dashboard Layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using content template. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -113,7 +113,7 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m You can render the Dashboard Layout control by using the **panels** property through helper. -In the following sample, the dashboard layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using tag helper. +In the following sample, the Dashboard Layout is rendered with [Panels](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using tag helper. {% tabs %} {% highlight razor tabtitle="CSHTML" %} diff --git a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.NETCORE/getting-started.md index 2a5e478945..7f66e763a6 100644 --- a/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/dashboard-layout/EJ2_ASP.NETCORE/getting-started.md @@ -38,7 +38,7 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. ## Add Syncfusion® ASP.NET Core Tag Helper -Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. +Open **~/Pages/_ViewImports.cshtml** file and import the `Syncfusion.EJ2` TagHelper. {% tabs %} {% highlight C# tabtitle="~/_ViewImports.cshtml" %} @@ -50,7 +50,7 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe ## Add stylesheet and script resources -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the theme and script is referred using CDN inside the `` of **~/Pages/Shared/_Layout.cshtml** file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -72,7 +72,7 @@ N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/ ## Register Syncfusion® Script Manager -Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. +Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -88,14 +88,14 @@ Also, register the script manager `` at the end of `` in the A ## Add ASP.NET Core DashboardLayout control -Now, add the Syncfusion® ASP.NET Core DashboardLayout tag helper in `~/Pages/Index.cshtml` page. +Now, add the Syncfusion® ASP.NET Core DashboardLayout tag helper in **~/Pages/Index.cshtml** page. * Defined the panels property as the attribute in the content template. * Using the [`panels`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property through tag helper. ### Setting the panels property using content template -DashboardLayout control can be rendered by using the [`ejs-dashboardlayout`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html) tag helper in ASP.NET Core application. Add the below simple code to your `index.cshtml` page which is available within the `Views/Home` folder, to initialize the DashboardLayout. +DashboardLayout control can be rendered by using the [`ejs-dashboardlayout`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html) tag helper in ASP.NET Core application. Add the below simple code to your **index.cshtml** page which is available within the **Views/Home** folder, to initialize the DashboardLayout. In the following sample, the dashboardlayout is rendered with [`panels`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html#Syncfusion_EJ2_Layouts_DashboardLayout_Panels) property using content template. diff --git a/ej2-asp-core-mvc/dashboard-layout/accessibility.md b/ej2-asp-core-mvc/dashboard-layout/accessibility.md index 0d77eaf304..14507d82fd 100644 --- a/ej2-asp-core-mvc/dashboard-layout/accessibility.md +++ b/ej2-asp-core-mvc/dashboard-layout/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Accessibility in ##Platform_Name## Dashboard Layout control +description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Accessibility publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Accessibility -The Dashboard Layout component has been designed with keeping the `WAI-ARIA` specifications in mind and applying the `WAI-ARIA` roles, states, and properties. This component is characterized by ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT). +The Dashboard Layout control has been designed with keeping the `WAI-ARIA` specifications in mind and applying the `WAI-ARIA` roles, states, and properties. This control is characterized by ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT). ## ARIA attributes diff --git a/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md b/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md index 81a4e319c2..36d5d579bc 100644 --- a/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md +++ b/ej2-asp-core-mvc/dashboard-layout/adaptive-layout.md @@ -1,7 +1,7 @@ --- layout: post -title: Adaptive Layout in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Adaptive Layout in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Adaptive Layout in ##Platform_Name## Dashboard Layout control +description: Learn here all about Adaptive Layout in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Adaptive Layout publishingplatform: ##Platform_Name## @@ -13,7 +13,7 @@ documentation: ug The control is provided with built-in responsive support, where panels within the layout get adjusted based on their parent element's dimensions to accommodate any resolution which relieves the burden of building responsive dashboards. -The dashboard layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one, so that the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600px or lower resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the [`mediaQuery`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~MediaQuery.html) property of the component. +The Dashboard Layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one, so that the panels will be displayed in a vertical column. By default, whenever the screen resolution meets 600px or lower resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the [`mediaQuery`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~MediaQuery.html) property of the control. The following sample demonstrates the usage of the [`mediaQuery`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~MediaQuery.html) property to turn out the layout into a stacked one in user defined resolution. Here, whenever the window size reaches 700px or lesser, the layout becomes a stacked layout. @@ -23,8 +23,8 @@ The following sample demonstrates the usage of the [`mediaQuery`](https://help.s {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/adaptive-layout/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/adaptive-layout/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/adaptive-layout/CSHTML.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md b/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md index 1eb673f4eb..d7199a4c9b 100644 --- a/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md +++ b/ej2-asp-core-mvc/dashboard-layout/configuring-layout.md @@ -1,7 +1,7 @@ --- layout: post -title: Configuring Layout in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Configuring Layout in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Configuring Layout in ##Platform_Name## Dashboard Layout control +description: Learn here all about Configuring Layout in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Configuring Layout publishingplatform: ##Platform_Name## @@ -13,7 +13,7 @@ documentation: ug The entire layout dimensions are assigned based on the height and width of the parent element. Hence, a responsive or static layout can be created by assigning a percentage or static dimension values to the parent element. The layout adapts to mobile resolutions by transforming the entire layout into a stacked orientation, so that, the panels will be displayed in a vertical column. -The **Dashboard Layout** is a grid structured component which can be split into subsections of equal size known as cells. The total number of cells in each row is defined by using the [`columns`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~Columns.html) property of the component. The width of each cell will be auto calculated based on the total number of cells placed in a row and the height of a cell will be same as that of its width. However, the height of these cells can also be configured to any desired size using the [`cellAspectRatio`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~CellAspectRatio.html) property (cellwidth/cellheight ratio) which defines the cell width to height ratio. +The **Dashboard Layout** is a grid structured control which can be split into subsections of equal size known as cells. The total number of cells in each row is defined by using the [`columns`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~Columns.html) property of the control. The width of each cell will be auto calculated based on the total number of cells placed in a row and the height of a cell will be same as that of its width. However, the height of these cells can also be configured to any desired size using the [`cellAspectRatio`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~CellAspectRatio.html) property (cellwidth/cellheight ratio) which defines the cell width to height ratio. The number of rows within the layout has no limits and can have any number of rows based on the panels count and position. Panels which acts as data containers will be placed or positioned over these cells. @@ -29,8 +29,8 @@ The following sample demonstrates how to modify a cell size using the [`columns` {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/modifying-cell-size/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/modifying-cell-size/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/modifying-cell-size/CSHTML.cs %} {% endhighlight %} {% endtabs %} @@ -60,8 +60,8 @@ The following sample demonstrates the usage of the [`cellSpacing`](https://help. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/cell-spacing/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/cell-spacing/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/cell-spacing/CSHTML.cs %} {% endhighlight %} {% endtabs %} @@ -91,8 +91,8 @@ In the following sample, the gridlines indicate the cells split-up of the layout {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/graphical-representation/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/graphical-representation/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/graphical-representation/CSHTML.cs %} {% endhighlight %} {% endtabs %} @@ -111,7 +111,7 @@ In the following sample, the gridlines indicate the cells split-up of the layout ![Graphical representation of the layout](./images/graphical_representation.PNG) -## Rendering component in right-to-left direction +## Rendering control in right-to-left direction It is possible to render the Dashboard Layout in right-to-left direction by setting the [enableRtl](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~EnableRtl.html) API to true. @@ -121,8 +121,8 @@ It is possible to render the Dashboard Layout in right-to-left direction by sett {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/rtl/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/rtl/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/rtl/CSHTML.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/dashboard-layout/floating-panel.md b/ej2-asp-core-mvc/dashboard-layout/floating-panel.md index 0b809d3617..73e58fed5b 100644 --- a/ej2-asp-core-mvc/dashboard-layout/floating-panel.md +++ b/ej2-asp-core-mvc/dashboard-layout/floating-panel.md @@ -1,7 +1,7 @@ --- layout: post -title: Floating Panel in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Floating Panel in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Floating Panel in ##Platform_Name## Dashboard Layout control +description: Learn here all about Floating Panel in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Floating Panel publishingplatform: ##Platform_Name## @@ -11,9 +11,9 @@ documentation: ug # Floating panels -The floating functionality of the component allows to effectively use the entire layout for the panel's placement. If the floating functionality is enabled, the panels within the layout get floated upwards automatically to occupy the empty cells available in previous rows. This functionality can be enabled or disabled using the [`allowFloating`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowFloating.html) property of the component. +The floating functionality of the control allows to effectively use the entire layout for the panel's placement. If the floating functionality is enabled, the panels within the layout get floated upwards automatically to occupy the empty cells available in previous rows. This functionality can be enabled or disabled using the [`allowFloating`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowFloating.html) property of the control. -The following sample demonstrates how to enable or disable the floating of panels in the DashboardLayout component using [`allowFloating`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowFloating.html) property. +The following sample demonstrates how to enable or disable the floating of panels in the DashboardLayout control using [`allowFloating`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowFloating.html) property. {% if page.publishingplatform == "aspnet-core" %} @@ -21,8 +21,8 @@ The following sample demonstrates how to enable or disable the floating of panel {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/floating-panels/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/floating-panels/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/floating-panels/CSHTML.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md index 87ae013e59..a4f85008ab 100644 --- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md +++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/dragging-of-panels.md @@ -1,7 +1,7 @@ --- layout: post -title: Dragging Of Panels in ##Platform_Name## Dashboard Layout Component | Syncfusion -description: Learn here all about Dragging Of Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Dragging Of Panels in ##Platform_Name## Dashboard Layout control | Syncfusion +description: Learn here all about Dragging Of Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Dragging Of Panels publishingplatform: ##Platform_Name## @@ -9,13 +9,13 @@ documentation: ug --- -# Dragging of Panels in ##Platform_Name## Dashboard Layout Component +# Dragging of Panels in ##Platform_Name## Dashboard Layout control -The Dashboard Layout component is provided with dragging functionality to drag and reorder the panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the user to decide whether to place the panel in the current position or revert to previous position without disturbing the layout. +The Dashboard Layout control is provided with dragging functionality to drag and reorder the panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the user to decide whether to place the panel in the current position or revert to previous position without disturbing the layout. If one or more panels collide while dragging, then the colliding panels will be pushed towards the left or right or top or bottom direction where an adaptive space for the collided panel is available. The position changes of these collided panels will be updated dynamically during dragging of a panel, so the user can conclude whether to place the panel in the current position or not. -While dragging a panel in Dashboard layout the following dragging events will be triggered, +While dragging a panel in Dashboard Layout the following dragging events will be triggered, * [`dragStart`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~DragStart.html) - Triggers when panel drag starts * [`drag`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~Drag.html) - Triggers when panel is being dragged * [dragStop](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~DragStop.html) - Triggers when panel drag stops @@ -28,8 +28,8 @@ The following sample demonstrates dragging and pushing of panels. For example, w {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/drag-and-drop/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/drag-and-drop/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/drag-and-drop/CSHTML.cs %} {% endhighlight %} {% endtabs %} @@ -60,8 +60,8 @@ The following sample demonstrates customizing the dragging handler of the panels {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/dragging-handler/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/dragging-handler/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/dragging-handler/CSHTML.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md index 837ffa2570..1fa8eacc7a 100644 --- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md +++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/moving-panels.md @@ -1,7 +1,7 @@ --- layout: post -title: Moving Panels in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Moving Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Moving Panels in ##Platform_Name## Dashboard Layout control +description: Learn here all about Moving Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Moving Panels publishingplatform: ##Platform_Name## @@ -33,8 +33,8 @@ The following sample demonstrates moving a panel programatically to a new positi {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/moving/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/moving/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/moving/CSHTML.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md index b0074cdf63..17af02a431 100644 --- a/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md +++ b/ej2-asp-core-mvc/dashboard-layout/interaction-with-panels/resizing-of-panels.md @@ -1,7 +1,7 @@ --- layout: post -title: Resizing Of Panels in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Resizing of Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Resizing Of Panels in ##Platform_Name## Dashboard Layout control +description: Learn here all about Resizing of Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Resizing Of Panels publishingplatform: ##Platform_Name## @@ -11,11 +11,11 @@ documentation: ug # Resizing of panels -The DashboardLayout component is also provided with the panel resizing functionality which can be enabled or disabled using the [`allowResizing`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowResizing.html) property. This functionality allows you to resize the panels dynamically through UI interactions using the resizing handlers, which controls the panel resizing in various directions. +The DashboardLayout control is also provided with the panel resizing functionality which can be enabled or disabled using the [`allowResizing`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~AllowResizing.html) property. This functionality allows you to resize the panels dynamically through UI interactions using the resizing handlers, which controls the panel resizing in various directions. Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by defining the required directions with the [`resizableHandles`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~ResizableHandles.html) property. -On resizing a panel in Dashboard layout the following events will be triggered, +On resizing a panel in Dashboard Layout the following events will be triggered, * [resizeStart](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~ResizeStart.html) - Triggers when panel resize starts * [resize](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~Resize.html) - Triggers when panel is being resized * [resizeStop](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayout~ResizeStop.html) - Triggers when panel resize stops @@ -26,8 +26,8 @@ On resizing a panel in Dashboard layout the following events will be triggered, {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/resizing-panels/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/resizing-panels/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/resizing-panels/CSHTML.cs %} {% endhighlight %} {% endtabs %} @@ -67,8 +67,8 @@ The following sample demonstrates resizing panels programatically in the Dashboa {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/resize-panel/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/resize-panel/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/resize-panel/CSHTML.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/dashboard-layout/panels/add-remove-panels.md b/ej2-asp-core-mvc/dashboard-layout/panels/add-remove-panels.md index e7427c23cf..5a76b191d1 100644 --- a/ej2-asp-core-mvc/dashboard-layout/panels/add-remove-panels.md +++ b/ej2-asp-core-mvc/dashboard-layout/panels/add-remove-panels.md @@ -1,7 +1,7 @@ --- layout: post -title: Add Remove Panels in ##Platform_Name## Dashboard Layout Component -description: Learn here all about how to add or remove panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Add Remove Panels in ##Platform_Name## Dashboard Layout control +description: Learn here all about how to add or remove panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Add Remove Panels publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Adding and removing panels dynamically -In real-time cases, the data being presented within the dashboard should be updated frequently which includes adding or removing the data dynamically within the dashboard. This can be easily achieved by using the `addPanel` and `removePanel` public methods of the component. +In real-time cases, the data being presented within the dashboard should be updated frequently which includes adding or removing the data dynamically within the dashboard. This can be easily achieved by using the `addPanel` and `removePanel` public methods of the control. ## Add or remove panels dynamically @@ -24,7 +24,7 @@ dashboard.removeAll(); ``` -The following sample demonstrates how to add and remove the panels dynamically in the dashboard layout component. Here, panels can be added in any desired position of required size by selecting them in the numeric boxes and clicking add button and remove them by selecting the ID of the panel. +The following sample demonstrates how to add and remove the panels dynamically in the Dashboard Layout control. Here, panels can be added in any desired position of required size by selecting them in the numeric boxes and clicking add button and remove them by selecting the ID of the panel. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md index 943f685a80..928f9f7e76 100644 --- a/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md +++ b/ej2-asp-core-mvc/dashboard-layout/panels/position-sizing-of-panels.md @@ -1,7 +1,7 @@ --- layout: post -title: Position Sizing Of Panels in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Position Sizing of Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Position Sizing Of Panels in ##Platform_Name## Dashboard Layout control +description: Learn here all about Position Sizing of Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Position Sizing Of Panels publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Panels -Panels are the basic building blocks of the dashboard layout component. They act as a container for the data to be visualized or presented. These panels can be positioned or resized for effective presentation of the data. +Panels are the basic building blocks of the Dashboard Layout control. They act as a container for the data to be visualized or presented. These panels can be positioned or resized for effective presentation of the data. The below table represents all the available panel properties and the corresponding functionalities @@ -40,8 +40,8 @@ The panels within the layout can be easily positioned or ordered using the [`row {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/panel-position/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/panel-position/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/panel-position/CSHTML.cs %} {% endhighlight %} {% endtabs %} @@ -69,8 +69,8 @@ A panel's size can be varied easily by defining the [`sizeX`](https://help.syncf {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/panel-size/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/panel-size/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/panel-size/CSHTML.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md b/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md index 13284703ae..6299b47757 100644 --- a/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md +++ b/ej2-asp-core-mvc/dashboard-layout/panels/setting-header-of-panels.md @@ -1,7 +1,7 @@ --- layout: post -title: Setting Header Of Panels in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Setting Header of Panels in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Setting Header Of Panels in ##Platform_Name## Dashboard Layout control +description: Learn here all about Setting Header of Panels in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Setting Header Of Panels publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Header and content of panels -The dashboard layout component is mostly used to represent the data used for monitoring or managing a process. These data or any HTML template can be placed as the [`content`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Content.html) of a panel using the content property. Also, word or phrase that summarize the panel’s content can be added as the header on the top of each panel using the [`header`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Header.html) property of the panel. +The Dashboard Layout control is mostly used to represent the data used for monitoring or managing a process. These data or any HTML template can be placed as the [`content`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Content.html) of a panel using the content property. Also, word or phrase that summarize the panel’s content can be added as the header on the top of each panel using the [`header`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Header.html) property of the panel. {% if page.publishingplatform == "aspnet-core" %} @@ -19,8 +19,8 @@ The dashboard layout component is mostly used to represent the data used for mon {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/content-panel/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/content-panel/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/content-panel/CSHTML.cs %} {% endhighlight %} {% endtabs %} @@ -40,11 +40,11 @@ The dashboard layout component is mostly used to represent the data used for mon ## Placing components as content -In a dashboard, components like charts, grids, maps, gauges, and more can be used to present complex data. Such components can be placed as the panel content by assigning the corresponding component element as the `content template` of the panel. +In a dashboard, controls like charts, grids, maps, gauges, and more can be used to present complex data. Such controls can be placed as the panel content by assigning the corresponding control element as the `content template` of the panel. -N> You must assign the empty div element inside the content template to add the component as content and also define the .e-panel, .e-panel-container, .e-panel-header, and .e-panel-content classes while rendering the DashboardLayout component using content template. +N> You must assign the empty div element inside the content template to add the control as content and also define the .e-panel, .e-panel-container, .e-panel-header, and .e-panel-content classes while rendering the DashboardLayout control using content template. -The following sample demonstrates how to add ej2-chart components as the [`content`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Content.html) for each panel in the DashboardLayout component. +The following sample demonstrates how to add ej2-chart controls as the [`content`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Layouts.DashboardLayoutPanel~Content.html) for each panel in the DashboardLayout control. {% if page.publishingplatform == "aspnet-core" %} @@ -52,8 +52,8 @@ The following sample demonstrates how to add ej2-chart components as the [`conte {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/dashboard-layout/placing-content/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/dashboard-layout/placing-content/HomeController.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +{% include code-snippet/dashboard-layout/placing-content/CSHTML.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md index be34234031..c69c12e474 100644 --- a/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md +++ b/ej2-asp-core-mvc/dashboard-layout/state-maintenance.md @@ -1,7 +1,7 @@ --- layout: post -title: State Maintenance in ##Platform_Name## Dashboard Layout Component -description: Learn here all about State Maintenance in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: State Maintenance in ##Platform_Name## Dashboard Layout control +description: Learn here all about State Maintenance in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: State Maintenance publishingplatform: ##Platform_Name## @@ -11,7 +11,7 @@ documentation: ug # Panel state maintenance -The current layout structure of the Dashboard Layout component can be obtained and saved to construct another dashboard with same panel structure using the `serialize` public method of the component. This method returns the component's current panel setting which can be used to construct a dashboard with the same layout settings. +The current layout structure of the Dashboard Layout control can be obtained and saved to construct another dashboard with same panel structure using the `serialize` public method of the control. This method returns the control's current panel setting which can be used to construct a dashboard with the same layout settings. The following sample demonstrates how to save and restore the state of the panels using the serialize method. Click Save to store the panel's settings and click Restore to restore the previously saved panel settings. diff --git a/ej2-asp-core-mvc/dashboard-layout/style.md b/ej2-asp-core-mvc/dashboard-layout/style.md index a51e44197d..6e9604d812 100644 --- a/ej2-asp-core-mvc/dashboard-layout/style.md +++ b/ej2-asp-core-mvc/dashboard-layout/style.md @@ -1,7 +1,7 @@ --- layout: post -title: Style in ##Platform_Name## Dashboard Layout Component -description: Learn here all about Style in Syncfusion ##Platform_Name## Dashboard Layout component of Syncfusion Essential JS 2 and more. +title: Style in ##Platform_Name## Dashboard Layout control +description: Learn here all about Style in Syncfusion ##Platform_Name## Dashboard Layout control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Style publishingplatform: ##Platform_Name## @@ -13,9 +13,9 @@ documentation: ug The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. -## Customizing the dashboard layout panel header +## Customizing the Dashboard Layout panel header -Use the following CSS to customize the dashboard layout panel header. +Use the following CSS to customize the Dashboard Layout panel header. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header { @@ -25,9 +25,9 @@ Use the following CSS to customize the dashboard layout panel header. } ``` -## Customizing the dashboard layout panel content +## Customizing the Dashboard Layout panel content -Use the following CSS to customize the dashboard layout panel content. +Use the following CSS to customize the Dashboard Layout panel content. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content { @@ -36,9 +36,9 @@ Use the following CSS to customize the dashboard layout panel content. } ``` -## Customizing the dashboard layout panel resize icon +## Customizing the Dashboard Layout panel resize icon -Use the following CSS to customize the dashboard layout resize icon. +Use the following CSS to customize the Dashboard Layout resize icon. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double{ @@ -49,9 +49,9 @@ Use the following CSS to customize the dashboard layout resize icon. } ``` -## Customizing the dashboard layout panel background +## Customizing the Dashboard Layout panel background -Use the following CSS to customize the dashboard layout panel background. +Use the following CSS to customize the Dashboard Layout panel background. ```css .e-dashboardlayout.e-control.e-responsive { diff --git a/ej2-asp-core-mvc/diagram/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/diagram/EJ2_ASP.NETCORE/getting-started.md index 3a082edd62..324d733f14 100644 --- a/ej2-asp-core-mvc/diagram/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/diagram/EJ2_ASP.NETCORE/getting-started.md @@ -16,17 +16,13 @@ This section briefly explains about how to include [ASP.NET Core Diagram](https: [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements) -## Create an ASP.NET Core web application - -### Visual Studio - -### Create ASP.NET Core web application with Razor pages +## Create ASP.NET Core web application with Razor pages * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-6.0&tabs=visual-studio#create-a-razor-pages-web-app) * [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/project-template) -### Install ASP.NET Core package in the application +## Install ASP.NET Core package in the application To add `ASP.NET Core` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/) and then install it. Alternatively, you can utilize the following package manager command to achieve the same. @@ -40,48 +36,6 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. -### Visual Studio Code - -### Create an ASP.NET Core web application - -1.Create a new folder and open it in the VS Code by **File > Open Folder...**. - -N> Visual Studio Code displays a dialog box that asks `Do you trust the authors of the files in this folder`. Select: -
* The checkbox trust the authors of all files in the parent folder. -
* Yes, I trust the authors. - -2.Open the [Integrated Terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) by selecting a menu using **View > Terminal** in VS Code. -3.Run the following command in the terminal to create a new ASP.NET Core web application. - -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} -dotnet new webapp -o AspNetCoreWebApp -{% endhighlight %} -{% endtabs %} - -The `dotnet new` command creates new Razor Pages project in the AspNetCoreWebApp folder. Refer to this [topic](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new?tabs=net60) for more information about .NET CLI commands. - -4.Run the following command in the terminal to open the project in current instance of the VS Code. -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} - -code -r AspNetCoreWebApp - -{% endhighlight %} -{% endtabs %} - -### Install Syncfusion® ASP.NET Core package in the application - -Run the following command in the terminal to install `Syncfusion.EJ2.AspNet.Core` NuGet package in the application. - -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} -dotnet add package Syncfusion.EJ2.AspNet.Core -{% endhighlight %} -{% endtabs %} - -Refer to [NuGet packages topic](../nuget-packages/) for more details about NuGet packages. - ## Add Syncfusion® ASP.NET Core Tag Helper Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. @@ -142,7 +96,7 @@ Now, add the Syncfusion® ASP.NET Core Diagr {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app in Visual Studio. Alternatively, you can run the `dotnet run` command in the terminal to run the sample in Visual Studio Code. Then, the Syncfusion® ASP.NET Core Diagram control will be rendered in the default web browser. +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core Diagram control will be rendered in the default web browser. ![ASP.NET Core Diagram Control](images/diagram-control.png) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/dialog-editing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/dialog-editing.md index 228d6014ee..2559102b33 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/dialog-editing.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/dialog-editing.md @@ -8,23 +8,13 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Dialog editing in ASP.NET MVC Grid component -# Dialog Editing in ##Platform_Name## Grid Component +Dialog editing is a feature in the Grid component that allows you to edit the data of the currently selected row using a dialog window. With dialog editing, you can easily modify cell values and save the changes back to the data source.This feature is particularly beneficial in scenarios where you need to quickly modify data without navigating to a separate page or view, and it streamlines the process of editing multiple cells. -In dialog edit mode, when you start editing the currently selected row data will be shown on a dialog. You can change the cell values and save edited data to the data source. To enable Dialog edit, set the [`Mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) of [`EditSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html) as **Dialog**. +To enable dialog editing in grid component, you need to set the [EditSettings.Mode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property to **Dialog**. This property determines the editing mode for the grid, and when set to **Dialog**, it enables the dialog editing feature. -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/dialog/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/dialog/dialog.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} +Here's an example how to enable dialog editing in the ASP.NET MVC grid component: {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -34,35 +24,18 @@ In dialog edit mode, when you start editing the currently selected row data will {% include code-snippet/grid/edit/dialog/dialog.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Dialog editing](../images/editing/dialog-edit.png) ## Customize edit dialog -You can customize the appearance of the edit dialog in the [`ActionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridBuilder-1.html#Syncfusion_EJ2_Grids_GridBuilder_1_ActionComplete_System_String_) event based on **requestType** as **beginEdit** or **add**. - -In the following example, the dialog's properties like header text, showCloseIcon, height have been changed while editing and adding the records. - -Also the locale text for the **Save** and **Cancel** buttons has been changed by overriding the default locale strings. - -You can refer the Grid [`Default text`](../global-local/) list for more localization. +The edit dialog in the Grid component allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. You can modify properties like header text, showCloseIcon, and height to tailor the edit dialog to your specific requirements. Additionally, you can override default localization strings to provide custom text for buttons or other elements within the dialog. -{% if page.publishingplatform == "aspnet-core" %} +To customize the edit dialog, you need to handle the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid component and perform the necessary modifications based on the **requestType** parameter. The **requestType** parameter identifies the type of action being performed, such as **beginEdit** for editing a record or **add** for adding a new record. -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customizedialog/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/customizedialog/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/customizedialog/dialog.cs %} -{% endhighlight %} -{% endtabs %} +>You can refer the Grid [Default text](../global-local/) list for more localization. -{% elsif page.publishingplatform == "aspnet-mvc" %} +The following example that demonstrates how to customize the edit dialog using the `ActionComplete` event: {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -71,39 +44,19 @@ You can refer the Grid [`Default text`](../global-local/) list for more localiza {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/customizedialog/dialog.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/customizedialog/dialog.cs %} -{% endhighlight %} {% endtabs %} -{% endif %} +![Customize edit dialog](../images/editing/dialog-customize.png) - -> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog’s height up to 658px. +> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog's height up to 658px. ## Show or hide columns in dialog editing -The Grid has the option to show hidden columns or hide visible columns while editing in the dialog edit mode by using the [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event of the Grid. - -In the `ActionBegin` event, when the `requestType` is `beginEdit` or `add`, the column will be shown or hidden using the [Visible](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of [Column](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html). When the `requestType` is `save`, the properties will be reset to their original state. - -In the following example, the CustomerID column is rendered as a hidden column, and the ShipCountry column is rendered as a visible column. In the edit mode, the CustomerID column will be changed to a visible state and the ShipCountry column will be changed to a hidden state. - -{% if page.publishingplatform == "aspnet-core" %} +The show or hide columns in dialog editing feature in the grid allows you to dynamically control the visibility of columns while editing in the dialog edit mode. This feature is useful when you want to display specific columns based on the type of action being performed, such as editing an existing record or adding a new record. To achieve this, you can utilize the [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event of the Grid. -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %} -{% endhighlight %} -{% endtabs %} +The `ActionBegin` event is triggered whenever an action is initiated in the grid, such as editing, adding, or deleting a record. Within the event handler, you can check the **requestType** parameter to determine the type of action being performed. If the **requestType** is `beginEdit` or `add`, you can modify the visibility of columns using the `Column.Visible` property. This property is used to determine whether a column should be displayed or hidden. Then, when the **requestType** is `save`, you can reset the column visibility to its initial state using the `Column.Visible` property. -{% elsif page.publishingplatform == "aspnet-mvc" %} +In the following example, the **CustomerID** column is rendered as a hidden column, and the **ShipCountry** column is rendered as a visible column. In the edit mode, the **CustomerID** column will be changed to a visible state and the **ShipCountry** column will be changed to a hidden state. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -112,35 +65,17 @@ In the following example, the CustomerID column is rendered as a hidden column, {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %} -{% endhighlight %} {% endtabs %} -{% endif %} - +![Show or hide columns in dialog editing](../images/editing/dialog-show-hide.png) ## Use wizard like dialog editing -Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by using the dialog template feature. It support your own editing template by defining [`Mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) of [`EditSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html) as **Dialog** and [`Template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) as SCRIPT element ID or HTML string which holds the template. - -The following example demonstrate the wizard like editing in the grid with the obtrusive Validation. +Wizard-like dialog editing is a powerful feature in the Grid component that enables the creation of intuitive step-by-step forms. This feature provides a structured approach to form completion or data entry by breaking down the process into manageable steps.This feature is particularly useful when you have complex forms that need to be broken down into smaller sections to guide you through the data entry process. -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/wizardediting/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/wizardediting/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/wizardediting/dialog.cs %} -{% endhighlight %} -{% endtabs %} +To achieve wizard-like dialog editing in the grid component, you can use the dialog template feature. This feature allows you to define your own custom editing template using the [EditSettings.Mode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property set to **Dialog** and the [EditSettings.Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property to specify the template variable that defines the editors for each step of the wizard. -{% elsif page.publishingplatform == "aspnet-mvc" %} +The following example demonstrate the wizard like editing in the grid with the unobtrusive validation. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -149,38 +84,23 @@ The following example demonstrate the wizard like editing in the grid with the o {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/wizardediting/dialog.cs %} {% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/wizardediting/dialog.cs %} -{% endhighlight %} {% endtabs %} -{% endif %} +![Use wizard like dialog editing](../images/editing/dialog-tabs-multiple.gif) -## Customize Add/Edit Dialog footer +## Customize add/edit dialog footer -In dialog edit mode, a dialog will show up when editing the currently selected row or adding a new row. By default, you can save or cancel the edited changes by clicking the Save or Cancel button in the dialog's footer. Along with these buttons, it is possible to add a custom button in the footer section using the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridBuilder-1.html#Syncfusion_EJ2_Grids_GridBuilder_1_ActionComplete_System_String_) event of the Grid. +The Customize add/edit dialog footer feature in the grid allows you to modify the footer section of the dialog that appears when editing the currently selected row or adding a new row. By default, the dialog displays two buttons in the footer section: Save and Cancel, which allow you to save or discard the changes made in the dialog. This feature is particularly helpful when you want to add custom buttons to the dialog's footer, implement specific actions, or customize the appearance of the buttons, such as changing their color or size in the dialog's footer. This can be achieved using the [ActionComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid component. In the following sample, using the `dialog` argument of the `ActionComplete` event, the action for the custom button can be customized. -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/custombutton/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog-Footer.cs" %} -{% include code-snippet/grid/edit/custombutton/custombutton.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/edit/custombutton/razor %} {% endhighlight %} -{% highlight c# tabtitle="Dialog-Footer.cs" %} +{% highlight c# tabtitle="custombutton.cs" %} {% include code-snippet/grid/edit/custombutton/custombutton.cs %} {% endhighlight %} {% endtabs %} -{% endif %} \ No newline at end of file + +![Customize add/edit dialog footer](../images/editing/dialog-footer.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/avoid-typescript-compilation.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/avoid-typescript-compilation.md index 9936ccfb35..24ddfe70f3 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/avoid-typescript-compilation.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/avoid-typescript-compilation.md @@ -1,6 +1,6 @@ --- layout: post -title: Avoid Typescript Compilation in ##Platform_Name## Grid Component +title: Avoid TypeScript Compilation in the Syncfusion Grid Component for ##Platform_Name## description: Learn here all about Avoid Typescript Compilation in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Avoid Typescript Compilation @@ -8,7 +8,6 @@ publishingplatform: ##Platform_Name## documentation: ug --- - # Avoid TypeScript Compilation **Syncfusion.EJ2.Javascript** includes typescript declaration files. If your application is not configured to compile typescript then exception may occur. To resolve this we need to prevent the typescript compilation during MS build process by adding the below line in **.csproj** file. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-disable-grid-and-its-actions.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-disable-grid-and-its-actions.md index 15225b8087..e8481ef087 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-disable-grid-and-its-actions.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/enable-disable-grid-and-its-actions.md @@ -8,12 +8,9 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Enable disable grid and its actions in ASP.Net MVC Grid component -# Enable/Disable Grid and its actions - -You can enable/disable the Grid and its actions by applying/removing corresponding CSS styles. - -To enable/disable the grid and its actions, follow the given steps: +You can enable or disable the Syncfusion® ASP.Net MVC Grid and its actions by applying or removing specific CSS styles. This functionality is particularly useful in scenarios where interactions need to be restricted. Follow the steps below to implement this feature. **Step 1**: Create CSS class with custom style to override the default style of Grid. @@ -28,19 +25,19 @@ To enable/disable the grid and its actions, follow the given steps: ``` -**Step 2**: Add/Remove the custom CSS class to the Grid in the click event handler of Button. +**Step 2**: Add/Remove the CSS class to the Grid in the click event handler of Button. ```typescript @@ -49,27 +46,13 @@ To enable/disable the grid and its actions, follow the given steps: In the below demo, the button click will enable/disable the Grid and its actions. -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/disablegrid/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Disablegrid.cs" %} -{% include code-snippet/grid/how-to/disablegrid/disablegrid.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/how-to/disablegrid/razor %} {% endhighlight %} -{% highlight c# tabtitle="Disablegrid.cs" %} +{% highlight c# tabtitle="disablegrid.cs" %} {% include code-snippet/grid/how-to/disablegrid/disablegrid.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Enable disable grid and its actions](../images/howto-enable-disable.gif) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/perform-crud-operation-using-anti-forgery-token.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/perform-crud-operation-using-anti-forgery-token.md index b025e4e9d2..3461d45f97 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/perform-crud-operation-using-anti-forgery-token.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/perform-crud-operation-using-anti-forgery-token.md @@ -71,19 +71,6 @@ Now assign the custom adaptor to the grid as follows. ``` -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/anti-forgery-token/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Anti-forgery-token.cs" %} -{% include code-snippet/grid/how-to/anti-forgery-token/anti-forgery-token.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/how-to/anti-forgery-token/razor %} @@ -92,8 +79,5 @@ Now assign the custom adaptor to the grid as follows. {% include code-snippet/grid/how-to/anti-forgery-token/anti-forgery-token.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - - N> You can find the full sample at our [GitHub repository](https://github.com/SyncfusionSamples/ej2-mvc-grid-antiforgerytoken). diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/render-both-ej1-and-ej2-grids-in-same-application.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/render-both-ej1-and-ej2-grids-in-same-application.md index 4217324d79..5b366d7fb0 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/render-both-ej1-and-ej2-grids-in-same-application.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/how-to/render-both-ej1-and-ej2-grids-in-same-application.md @@ -8,7 +8,6 @@ publishingplatform: ##Platform_Name## documentation: ug --- - # Render both EJ1 and EJ2 Grids in same application To achieve this requirement, you need to use the below code in **_Layout.cshtml** page. Because EJ1 and EJ2 has same library names to perform the different actions. So conflicts may occur when we refer this both controls in same application. To overcome this we need to extend this libraries in ej namespace. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/paging.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/paging.md index 1f34ea5f6e..53c4eb4f83 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/paging.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/paging.md @@ -1,6 +1,6 @@ --- layout: post -title: Paging in ##Platform_Name## Grid Component +title: Paging in ##Platform_Name## Grid Component | Syncfusion description: Learn here all about Paging in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Paging diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md index 0f9fd50811..a3235eb010 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/print.md @@ -150,11 +150,43 @@ Here's a code example that demonstrates how to show a hidden column (CustomerID) ![Show or hide columns while printing](images/print/print-hide.png) +## Add a title to the header while printing + +You can add a title to the header when printing the Syncfusion® Grid by utilizing the [BeforePrint](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event. This event allows you to customize the print layout, including the addition of a title element, ensuring that the printed document is informative and visually appealing. + +Here’s an example of how to add a title to your Grid when using the print function: + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-add-title/razor %} +{% endhighlight %} +{% highlight c# tabtitle="print.cs" %} +{% include code-snippet/grid/print/print-add-title/print.cs %} +{% endhighlight %} +{% endtabs %} + +## Print the expanded state from other pages + +By default, when printing, the Syncfusion® Grid component only includes the expanded child grids visible on the current page. However, you can enhance the printing functionality to include expanded child grids from other pages. This can be achieved using the [Load](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Load) and [ActionBegin](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) events, which help manage the expanded state of rows across different pages. + +The following example demonstrates how to print the expanded child grids from other pages: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-expanded-state/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Hierarchyprint.cs" %} +{% include code-snippet/grid/print/print-expanded-state/hierarchyprint.cs %} +{% endhighlight %} +{% endtabs %} + +![Print the expanded state from other pages](../images/print/print-another-page.png) + ## Limitations of printing large data Printing a large volume of data all at once in the grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The grid offers a solution to manage extensive datasets through virtualization. However, it's important to note that virtualization for both rows and columns is not feasible during the printing process. -If printing all the data remains a requirement, an alternative approach is recommended. Exporting the grid data to formats like [Excel](https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-exporting) or [CSV](https://ej2.syncfusion.com/aspnetcore/documentation/grid/excel-export/excel-exporting) or [Pdf](https://ej2.syncfusion.com/aspnetcore/documentation/grid/pdf-export/pdf-export) is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser. +If printing all the data remains a requirement, an alternative approach is recommended. Exporting the grid data to formats like [Excel](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/excel-export/excel-exporting) or [CSV](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/excel-export/excel-exporting) or [Pdf](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/pdf-export/pdf-export) is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser. ## Retain grid styles while printing diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md index 725505ac85..3c4519dd2e 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/sorting.md @@ -116,10 +116,10 @@ The example below demonstrates how to display null values at the bottom of the g {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/sort-comparer/razor %} +{% include code-snippet/grid/sorting/sort-comparer/razor %} {% endhighlight %} {% highlight c# tabtitle="sort-comparer.cs" %} -{% include code-snippet/grid/how-to/sort-comparer/sort-comparer.cs %} +{% include code-snippet/grid/sorting/sort-comparer/sort-comparer.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/dialog-editing.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/dialog-editing.md index 3bfd4f31b2..4eb10046ad 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/dialog-editing.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/dialog-editing.md @@ -8,179 +8,99 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Dialog editing in ASP.NET Core Grid component -# Dialog Editing in ASP.NET Core Grid Component +Dialog editing is a feature in the Grid component that allows you to edit the data of the currently selected row using a dialog window. With dialog editing, you can easily modify cell values and save the changes back to the data source.This feature is particularly beneficial in scenarios where you need to quickly modify data without navigating to a separate page or view, and it streamlines the process of editing multiple cells. -In dialog edit mode, when you start editing the currently selected row data will be shown on a dialog. You can change the cell values and save edited data to the data source. To enable Dialog edit, set the [`mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property of [`e-grid-editSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_EditSettings) tag helper as **Dialog**. +To enable dialog editing in grid component, you need to set the [editSettings.mode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property to **Dialog**. This property determines the editing mode for the grid, and when set to **Dialog**, it enables the dialog editing feature. -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/dialog/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/dialog/dialog.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} +Here's an example how to enable dialog editing in the ASP.NET Core grid component: {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/dialog/razor %} +{% include code-snippet/grid/edit/dialog/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/dialog/dialog.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Dialog editing](../images/editing/dialog-edit.png) ## Customize edit dialog -You can customize the appearance of the edit dialog in the [`actionComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event based on **requestType** as **beginEdit** or **add**. - -In the following example, the dialog's properties like header text, showCloseIcon, height have been changed while editing and adding the records. - -Also the locale text for the **Save** and **Cancel** buttons has been changed by overriding the default locale strings. - -You can refer the Grid [`Default text`](../global-local/) list for more localization. +The edit dialog in the Grid component allows you to customize its appearance and behavior based on the type of action being performed, such as editing or adding a record. You can modify properties like header text, showCloseIcon, and height to tailor the edit dialog to your specific requirements. Additionally, you can override default localization strings to provide custom text for buttons or other elements within the dialog. -{% if page.publishingplatform == "aspnet-core" %} +To customize the edit dialog, you need to handle the [actionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid component and perform the necessary modifications based on the **requestType** parameter. The **requestType** parameter identifies the type of action being performed, such as **beginEdit** for editing a record or **add** for adding a new record. -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customizedialog/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/customizedialog/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/customizedialog/dialog.cs %} -{% endhighlight %} -{% endtabs %} +>You can refer the Grid [Default text](../global-local/) list for more localization. -{% elsif page.publishingplatform == "aspnet-mvc" %} +The following example that demonstrates how to customize the edit dialog using the `actionComplete` event: {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/customizedialog/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/customizedialog/dialog.cs %} +{% include code-snippet/grid/edit/customizedialog/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/customizedialog/dialog.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Customize edit dialog](../images/editing/dialog-customize.png) -> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog’s height up to 658px. +> The Grid add or edit dialog element has the max-height property, which is calculated based on the available window height. So, in the normal window (1920 x 1080), it is possible to set the dialog's height up to 658px. ## Show or hide columns in dialog editing -The Grid has the option to show hidden columns or hide visible columns while editing in the dialog edit mode by using the [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event of the Grid. - -In the `actionBegin` event, when the `requestType` is `beginEdit` or `add`, the column will be shown or hidden using the [visible](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of [e-grid-column](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html) tag helper. When the `requestType` is `save`, the properties will be reset to their original state. - -In the following example, the CustomerID column is rendered as a hidden column, and the ShipCountry column is rendered as a visible column. In the edit mode, the CustomerID column will be changed to a visible state and the ShipCountry column will be changed to a hidden state. - -{% if page.publishingplatform == "aspnet-core" %} +The show or hide columns in dialog editing feature in the grid allows you to dynamically control the visibility of columns while editing in the dialog edit mode. This feature is useful when you want to display specific columns based on the type of action being performed, such as editing an existing record or adding a new record. To achieve this, you can utilize the [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) event of the Grid. -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %} -{% endhighlight %} -{% endtabs %} +The `actionBegin` event is triggered whenever an action is initiated in the grid, such as editing, adding, or deleting a record. Within the event handler, you can check the **requestType** parameter to determine the type of action being performed. If the **requestType** is `beginEdit` or `add`, you can modify the visibility of columns using the `column.visible` property. This property is used to determine whether a column should be displayed or hidden. Then, when the **requestType** is `save`, you can reset the column visibility to its initial state using the `column.visible` property. -{% elsif page.publishingplatform == "aspnet-mvc" %} +In the following example, the **CustomerID** column is rendered as a hidden column, and the **ShipCountry** column is rendered as a visible column. In the edit mode, the **CustomerID** column will be changed to a visible state and the **ShipCountry** column will be changed to a hidden state. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %} +{% include code-snippet/grid/edit/show-hide-edit-dialog/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/show-hide-edit-dialog/dialog.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Show or hide columns in dialog editing](../images/editing/dialog-show-hide.png) ## Use wizard like dialog editing -Wizard helps you create intuitive step-by-step forms to fill. You can achieve the wizard like editing by using the dialog template feature. It support your own editing template by defining [`mode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) as **Dialog** and [`template`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) as SCRIPT element ID or HTML string which holds the template. - -The following example demonstrate the wizard like editing in the grid with the obtrusive Validation. +Wizard-like dialog editing is a powerful feature in the Grid component that enables the creation of intuitive step-by-step forms. This feature provides a structured approach to form completion or data entry by breaking down the process into manageable steps.This feature is particularly useful when you have complex forms that need to be broken down into smaller sections to guide you through the data entry process. -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/wizardediting/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/wizardediting/dialog.cs %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/wizardediting/dialog.cs %} -{% endhighlight %} -{% endtabs %} +To achieve wizard-like dialog editing in the grid component, you can use the dialog template feature. This feature allows you to define your own custom editing template using the [editSettings.mode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Mode) property set to **Dialog** and the [editSettings.template](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridEditSettings.html#Syncfusion_EJ2_Grids_GridEditSettings_Template) property to specify the template variable that defines the editors for each step of the wizard. -{% elsif page.publishingplatform == "aspnet-mvc" %} +The following example demonstrate the wizard like editing in the grid with the unobtrusive validation. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/wizardediting/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog.cs" %} -{% include code-snippet/grid/edit/wizardediting/dialog.cs %} +{% include code-snippet/grid/edit/wizardediting/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Dialog.cs" %} {% include code-snippet/grid/edit/wizardediting/dialog.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +![Use wizard like dialog editing](../images/editing/dialog-tabs-multiple.gif) -## Customize Add/Edit Dialog footer +## Customize add/edit dialog footer -In dialog edit mode, a dialog will show up when editing the currently selected row or adding a new row. By default, you can save or cancel the edited changes by clicking the Save or Cancel button in the dialog's footer. Along with these buttons, it is possible to add a custom button in the footer section using the [ActionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridBuilder-1.html#Syncfusion_EJ2_Grids_GridBuilder_1_ActionComplete_System_String_) event of the Grid. +The Customize add/edit dialog footer feature in the grid allows you to modify the footer section of the dialog that appears when editing the currently selected row or adding a new row. By default, the dialog displays two buttons in the footer section: Save and Cancel, which allow you to save or discard the changes made in the dialog. This feature is particularly helpful when you want to add custom buttons to the dialog's footer, implement specific actions, or customize the appearance of the buttons, such as changing their color or size in the dialog's footer. This can be achieved using the [actionComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionComplete) event of the Grid component. -In the following sample, using the `dialog` argument of the `ActionComplete` event, the action for the custom button can be customized. - -{% if page.publishingplatform == "aspnet-core" %} +In the following sample, using the `dialog` argument of the `actionComplete` event, the action for the custom button can be customized. {% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} +{% highlight razor tabtitle="CSHTML" %} {% include code-snippet/grid/edit/custombutton/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Dialog-Footer.cs" %} +{% highlight c# tabtitle="custombutton.cs" %} {% include code-snippet/grid/edit/custombutton/custombutton.cs %} {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/edit/custombutton/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Dialog-Footer.cs" %} -{% include code-snippet/grid/edit/custombutton/custombutton.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} \ No newline at end of file +![Customize add/edit dialog footer](../images/editing/dialog-footer.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-disable-grid-and-its-actions.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-disable-grid-and-its-actions.md index 05596b4385..80093db9b4 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-disable-grid-and-its-actions.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/enable-disable-grid-and-its-actions.md @@ -8,43 +8,36 @@ publishingplatform: ##Platform_Name## documentation: ug --- +# Enable disable grid and its actions in ASP.NET Core Grid component -# Enable/Disable Grid and its actions +You can enable or disable the Syncfusion® ASP.NET Core Grid and its actions by applying or removing specific CSS styles. This functionality is particularly useful in scenarios where interactions need to be restricted. Follow the steps below to implement this feature. -You can enable/disable the Grid and its actions by applying/removing corresponding CSS styles. - -To enable/disable the grid and its actions, follow the given steps: - -**Step 1**: - -Create CSS class with custom style to override the default style of Grid. +**Step 1**: Create CSS class with custom style to override the default style of Grid. ```css - .disablegrid { - pointer-events: none; - opacity: 0.4; - } - .wrapper { - cursor: not-allowed; - } + .disablegrid { + pointer-events: none; + opacity: 0.4; + } + .wrapper { + cursor: not-allowed; + } ``` -**Step 2**: - -Add/Remove the custom CSS class to the Grid in the click event handler of Button. +**Step 2**: Add/Remove the CSS class to the Grid in the click event handler of Button. ```typescript @@ -53,27 +46,13 @@ Add/Remove the custom CSS class to the Grid in the click event handler of Button In the below demo, the button click will enable/disable the Grid and its actions. -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/disablegrid/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Disablegrid.cs" %} -{% include code-snippet/grid/how-to/disablegrid/disablegrid.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/disablegrid/razor %} +{% include code-snippet/grid/how-to/disablegrid/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Disablegrid.cs" %} +{% highlight c# tabtitle="disablegrid.cs" %} {% include code-snippet/grid/how-to/disablegrid/disablegrid.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - +![Enable disable grid and its actions](../images/howto-enable-disable.gif) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/perform-crud-operation-using-anti-forgery-token.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/perform-crud-operation-using-anti-forgery-token.md index e8f4e1997d..35481912ae 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/perform-crud-operation-using-anti-forgery-token.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/perform-crud-operation-using-anti-forgery-token.md @@ -91,8 +91,6 @@ Now assign the custom adaptor to the grid as follows. ``` -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/grid/how-to/anti-forgery-token/tagHelper %} @@ -102,18 +100,4 @@ Now assign the custom adaptor to the grid as follows. {% endhighlight %} {% endtabs %} -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/anti-forgery-token/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Anti-forgery-token.cs" %} -{% include code-snippet/grid/how-to/anti-forgery-token/anti-forgery-token.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - N> You can find the full sample at our [GitHub repository](https://github.com/SyncfusionSamples/ej2-mvc-grid-antiforgerytoken). diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/render-both-ej1-and-ej2-grids-in-same-application.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/render-both-ej1-and-ej2-grids-in-same-application.md index 4217324d79..5b366d7fb0 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/render-both-ej1-and-ej2-grids-in-same-application.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/how-to/render-both-ej1-and-ej2-grids-in-same-application.md @@ -8,7 +8,6 @@ publishingplatform: ##Platform_Name## documentation: ug --- - # Render both EJ1 and EJ2 Grids in same application To achieve this requirement, you need to use the below code in **_Layout.cshtml** page. Because EJ1 and EJ2 has same library names to perform the different actions. So conflicts may occur when we refer this both controls in same application. To overcome this we need to extend this libraries in ej namespace. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md index f3d15a99c0..b2b61463a4 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/print.md @@ -150,6 +150,38 @@ Here's a code example that demonstrates how to show a hidden column (CustomerID) ![Show or hide columns while printing](images/print/print-hide.png) +## Add a title to the header while printing + +You can add a title to the header when printing the Syncfusion® Grid by utilizing the [beforePrint](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_BeforePrint) event. This event allows you to customize the print layout, including the addition of a title element, ensuring that the printed document is informative and visually appealing. + +Here’s an example of how to add a title to your Grid when using the print function: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-add-title/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="print.cs" %} +{% include code-snippet/grid/print/print-add-title/print.cs %} +{% endhighlight %} +{% endtabs %} + +## Print the expanded state from other pages + +By default, when printing, the Syncfusion® Grid component only includes the expanded child grids visible on the current page. However, you can enhance the printing functionality to include expanded child grids from other pages. This can be achieved using the [load](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Load) and [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionBegin) events, which help manage the expanded state of rows across different pages. + +The following example demonstrates how to print the expanded child grids from other pages: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/print/print-expanded-state/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Hierarchyprint.cs" %} +{% include code-snippet/grid/print/print-expanded-state/hierarchyprint.cs %} +{% endhighlight %} +{% endtabs %} + +![Retain grid styles while printing](images/print/print-style.png) + ## Limitations of printing large data Printing a large volume of data all at once in the grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The grid offers a solution to manage extensive datasets through virtualization. However, it's important to note that virtualization for both rows and columns is not feasible during the printing process. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md index 55d44bd1a4..d72324797e 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/sorting.md @@ -116,10 +116,10 @@ The example below demonstrates how to display null values at the bottom of the g {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/how-to/sort-comparer/tagHelper %} +{% include code-snippet/grid/sorting/sort-comparer/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="sort-comparer.cs" %} -{% include code-snippet/grid/how-to/sort-comparer/sort-comparer.cs %} +{% include code-snippet/grid/sorting/sort-comparer/sort-comparer.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-customize.png b/ej2-asp-core-mvc/grid/images/editing/dialog-customize.png new file mode 100644 index 0000000000..ed8badc555 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-customize.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-edit.png b/ej2-asp-core-mvc/grid/images/editing/dialog-edit.png new file mode 100644 index 0000000000..1da61a27ad Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-edit.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-footer.png b/ej2-asp-core-mvc/grid/images/editing/dialog-footer.png new file mode 100644 index 0000000000..cc49b61a3c Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-footer.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-show-hide.png b/ej2-asp-core-mvc/grid/images/editing/dialog-show-hide.png new file mode 100644 index 0000000000..7db80d51e6 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-show-hide.png differ diff --git a/ej2-asp-core-mvc/grid/images/editing/dialog-tabs-multiple.gif b/ej2-asp-core-mvc/grid/images/editing/dialog-tabs-multiple.gif new file mode 100644 index 0000000000..50ce58e02a Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/editing/dialog-tabs-multiple.gif differ diff --git a/ej2-asp-core-mvc/grid/images/howto-enable-disable.gif b/ej2-asp-core-mvc/grid/images/howto-enable-disable.gif new file mode 100644 index 0000000000..d8a5ce55d1 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/howto-enable-disable.gif differ diff --git a/ej2-asp-core-mvc/grid/images/print/print-another-page.png b/ej2-asp-core-mvc/grid/images/print/print-another-page.png new file mode 100644 index 0000000000..5705ea17cc Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/print/print-another-page.png differ diff --git a/ej2-asp-core-mvc/list-box/drag-and-drop.md b/ej2-asp-core-mvc/list-box/drag-and-drop.md index d5e319b7b5..9fb3830367 100644 --- a/ej2-asp-core-mvc/list-box/drag-and-drop.md +++ b/ej2-asp-core-mvc/list-box/drag-and-drop.md @@ -91,8 +91,16 @@ In the following sample, the `allowDragAndDrop` property is set as `true` and `s ## Dual ListBox with drag and drop +{% if page.publishingplatform == "aspnet-core" %} + The toolbar and drag and drop actions between two listboxes can be enabled by setting a listbox unique id and the same [`scope`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.ListBox.html#Syncfusion_EJ2_DropDowns_ListBox_Scope) property value. +{% elsif page.publishingplatform == "aspnet-mvc" %} + +The toolbar and drag and drop actions between two listboxes can be enabled by setting a listbox unique id and the same [`scope`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.ListBox.html#Syncfusion_EJ2_DropDowns_ListBox_Scope) property value. + +{% endif %} + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -114,4 +122,4 @@ The toolbar and drag and drop actions between two listboxes can be enabled by se {% include code-snippet/listbox/drag-drop/dual-drag/dualdraglistbox.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/maskedtextbox/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/maskedtextbox/EJ2_ASP.NETCORE/getting-started.md index adaf06ad86..0b651c3411 100644 --- a/ej2-asp-core-mvc/maskedtextbox/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/maskedtextbox/EJ2_ASP.NETCORE/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with ##Platform_Name## Maskedtextbox Control +title: Getting Started with ##Platform_Name## Maskedtextbox Control | Syncfusion description: Checkout and learn about getting started with ##Platform_Name## Maskedtextbox control of Syncfusion Essential JS 2 and more details. platform: ej2-asp-core-mvc control: Getting Started @@ -118,9 +118,9 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Ge ## See also -* [Getting Started with Syncfusion® ASP.NET Core using Razor Pages](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages/) +* [Getting Started with Syncfusion® ASP.NET Core using Razor Pages](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) * [Getting Started with Syncfusion® ASP.NET Core MVC using Tag Helper](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/aspnet-core-mvc-taghelper) -* [How to perform custom validation using FormValidator](./how-to/perform-custom-validation-using-form-validator/) -* [How to customize the UI appearance of the control](./how-to/customize-the-ui-appearance-of-the-control/) -* [How to set cursor position while focus on the input textbox](./how-to/set-cursor-position-while-focus-on-the-input-textbox/) -* [How to display numeric keypad when focus on mobile devices](./how-to/display-numeric-keypad-when-focus-on-mobile-devices/) \ No newline at end of file +* [How to perform custom validation using FormValidator](./how-to/perform-custom-validation-using-form-validator) +* [How to customize the UI appearance of the control](./how-to/customize-the-ui-appearance-of-the-control) +* [How to set cursor position while focus on the input textbox](./how-to/set-cursor-position-while-focus-on-the-input-textbox) +* [How to display numeric keypad when focus on mobile devices](./how-to/display-numeric-keypad-when-focus-on-mobile-devices) \ No newline at end of file diff --git a/ej2-asp-core-mvc/multi-select/checkbox.md b/ej2-asp-core-mvc/multi-select/checkbox.md index 9f7a61a46a..9c2e750e2f 100644 --- a/ej2-asp-core-mvc/multi-select/checkbox.md +++ b/ej2-asp-core-mvc/multi-select/checkbox.md @@ -133,7 +133,7 @@ Using [enableSelectionOrder](https://help.syncfusion.com/cr/cref_files/aspnetcor ## See Also -* [How to bind the data](./data-binding/) -* [How to filter the bound data](./filtering/) -* [How to add custom value to the MultiSelect](./custom-value/) -* [How to render checkbox in grouping to the MultiSelect](./grouping/#grouping-with-checkbox). +* [How to bind the data](./data-binding) +* [How to filter the bound data](./filtering) +* [How to add custom value to the MultiSelect](./custom-value) +* [How to render checkbox in grouping to the MultiSelect](./grouping#grouping-with-checkbox). diff --git a/ej2-asp-core-mvc/query-builder/how-to/state-persistence.md b/ej2-asp-core-mvc/query-builder/how-to/state-persistence.md index 77e63d949c..6580dbb407 100644 --- a/ej2-asp-core-mvc/query-builder/how-to/state-persistence.md +++ b/ej2-asp-core-mvc/query-builder/how-to/state-persistence.md @@ -1,6 +1,6 @@ --- layout: post -title: State Persistence in ##Platform_Name## Query Builder Component | Syncfusion +title: State Persistence in ##Platform_Name## Query Builder Component description: Learn here all about State Persistence in Syncfusion ##Platform_Name## Query Builder component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: State Persistence diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/image.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/image.md index 225fb19c48..6592cc0812 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/image.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/image.md @@ -1,6 +1,6 @@ --- layout: post -title: Image in ##Platform_Name## Rich Text Editor Component +title: Image in ##Platform_Name## Rich Text Editor Component | Syncfusion description: Learn here all about Image in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Image @@ -252,5 +252,5 @@ You can prevent drag-and-drop action by setting the actionBegin argument cancel ## See Also -* [How to edit the quick toolbar settings](./toolbar/#quick-inline-toolbar) -* [How to use link editing option in the toolbar items](./link/) \ No newline at end of file +* [How to edit the quick toolbar settings](./toolbar#quick-inline-toolbar) +* [How to use link editing option in the toolbar items](./link) \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/images/image-link.png b/ej2-asp-core-mvc/rich-text-editor/images/image-link.png index b59f513317..a35051576e 100644 Binary files a/ej2-asp-core-mvc/rich-text-editor/images/image-link.png and b/ej2-asp-core-mvc/rich-text-editor/images/image-link.png differ diff --git a/ej2-asp-core-mvc/toast/EJ2_ASP.NETCORE/action-buttons.md b/ej2-asp-core-mvc/toast/EJ2_ASP.NETCORE/action-buttons.md index d5c6d521ec..a3cc4a0ab4 100644 --- a/ej2-asp-core-mvc/toast/EJ2_ASP.NETCORE/action-buttons.md +++ b/ej2-asp-core-mvc/toast/EJ2_ASP.NETCORE/action-buttons.md @@ -1,6 +1,6 @@ --- layout: post -title: Action Buttons in ##Platform_Name## Toast Component +title: Action Buttons in ##Platform_Name## Toast Component | Syncfusion description: Learn here all about Action Buttons in Syncfusion ##Platform_Name## Toast component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Action Buttons @@ -44,4 +44,4 @@ Output be like the below. ## See Also -* [Configuring options](./config/) \ No newline at end of file +* [Configuring options](./config) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/getting-started-mvc.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/getting-started-mvc.md index bc02392d25..43a45e4350 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/getting-started-mvc.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/getting-started-mvc.md @@ -49,7 +49,7 @@ Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. ## Add stylesheet and script resources -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the theme and script is referred using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -69,7 +69,7 @@ N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentatio ## Register Syncfusion® script manager -Also, register the script manager `EJS().ScriptManager()` at the end of `` in the `~/Pages/Shared/_Layout.cshtml` file as follows. +Also, register the script manager `EJS().ScriptManager()` at the end of `` in the `~/Views/Shared/_Layout.cshtml` file as follows. {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -228,4 +228,4 @@ N> You can refer to our [ASP.NET MVC Tree Grid](https://www.syncfusion.com/aspne * [Getting Started with Syncfusion® React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started) * [Getting Started with Syncfusion® ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core) * [Getting Started with Syncfusion® Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/virtual-scroll.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/virtual-scroll.md index b6b91b946d..ebec051c81 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/virtual-scroll.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/virtual-scroll.md @@ -44,7 +44,29 @@ Expand and Collapse state of any child record will be persisted. {% endtabs %} {% endif %} - +### Limitations + +* Row virtual scrolling is not compatible with the following feature + 1. Batch editing + 2. Detail template + 3. Row template + 4. Rowspan + 5. Autofill + +* It is necessary to set a static height for the component or its parent container when using row virtualization. The 100% height will work only if the component height is set to 100%, and its parent container has a static height. + +* When row virtual scrolling is activated, compatibility for copy-paste and drag-and-drop operations is limited to the data items visible in the current viewport of the tree grid. +* The cell-based selection is not supported for row virtual scrolling. +* Using different row heights with a template column, when the template height differs for each row, is not supported. +* Due to the element height limitation in browsers, the maximum number of records loaded by the tree grid is limited by the browser capability. +* The height of the tree grid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. +* If you want to increase the row height to accommodate the content then you can specify the row height as below to ensure all the table rows are in same height. + + ```css + .e-treegrid .e-row { + height: 2em; + } + ``` ## Column Virtualization @@ -81,21 +103,28 @@ N> Column's `Width` is required for column virtualization. If column's width is -## Limitations for Virtualization - -* Due to the element height limitation in browsers, the maximum number of records loaded by the treegrid is limited by the browser capability. -* Cell selection will not be persisted in row. -* Virtual scrolling is not compatible with detail template, clipboard functionality and row drag and drop features. -* The page size provided must be two times larger than the number of visible rows in the TreeGrid. If the page size is failed to meet this condition then the size will be determined by TreeGrid. -* The virtual height of the treegrid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. If you want to increase the row height to accommodate the content then you can specify the row height as below to ensure all the table rows are in same height. - -```css -.e-treegrid .e-row { - height: 2em; -} -``` - -* Programmatic selection using the **SelectRows** method is not supported in virtual scrolling. -* When virtualization is active in a tree grid, the editCell method is unusable for records outside the currently visible viewport. - +### Limitations + +* While using column virtual scrolling, column width should be in pixel. Percentage values are not accepted. +* Selected column details are only retained within the viewport. When the next set of columns is loaded, the selection for previously visible columns is lost. +* The cell selection is not supported for column virtual scrolling. +* The **Ctrl + Home** and **Ctrl + End** keys are not supported when using column virtual scrolling. +* The following features are compatible with column virtualization and works only within the viewport: + 1. Column resizing + 2. Column reordering + 3. Auto-fit + 4. Print + 5. Clipboard + 6. Column menu - Column chooser, AutofitAll + +* Column virtual scrolling is not compatible with the following feature + 1. Colspan + 2. Batch editing + 3. Column with infinite scrolling + 4. Stacked header + 5. Row template + 6. Detail template + 7. Autofill + 8. Column chooser + N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data. diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/virtual-scroll.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/virtual-scroll.md index 7a48022bdf..449dba1ca6 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/virtual-scroll.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/virtual-scroll.md @@ -44,7 +44,29 @@ Expand and Collapse state of any child record will be persisted. {% endtabs %} {% endif %} - +### Limitations + +* Row virtual scrolling is not compatible with the following feature + 1. Batch editing + 2. Detail template + 3. Row template + 4. Rowspan + 5. Autofill + +* It is necessary to set a static height for the component or its parent container when using row virtualization. The 100% height will work only if the component height is set to 100%, and its parent container has a static height. + +* When row virtual scrolling is activated, compatibility for copy-paste and drag-and-drop operations is limited to the data items visible in the current viewport of the tree grid. +* The cell-based selection is not supported for row virtual scrolling. +* Using different row heights with a template column, when the template height differs for each row, is not supported. +* Due to the element height limitation in browsers, the maximum number of records loaded by the tree grid is limited by the browser capability. +* The height of the tree grid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. +* If you want to increase the row height to accommodate the content then you can specify the row height as below to ensure all the table rows are in same height. + + ```css + .e-treegrid .e-row { + height: 2em; + } + ``` ## Column Virtualization @@ -81,21 +103,28 @@ N> Column's `Width` is required for column virtualization. If column's width is -## Limitations for Virtualization - -* Due to the element height limitation in browsers, the maximum number of records loaded by the treegrid is limited by the browser capability. -* Cell selection will not be persisted in row. -* Virtual scrolling is not compatible with detail template, clipboard functionality, Batch editing and row drag and drop features. -* The page size provided must be two times larger than the number of visible rows in the TreeGrid. If the page size is failed to meet this condition then the size will be determined by TreeGrid. -* The virtual height of the treegrid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. If you want to increase the row height to accommodate the content then you can specify the row height as below to ensure all the table rows are in same height. - -```css -.e-treegrid .e-row { - height: 2em; -} -``` - -* Programmatic selection using the **selectRows** method is not supported in virtual scrolling. -* When virtualization is active in a tree grid, the editCell method is unusable for records outside the currently visible viewport. +### Limitations + +* While using column virtual scrolling, column width should be in pixel. Percentage values are not accepted. +* Selected column details are only retained within the viewport. When the next set of columns is loaded, the selection for previously visible columns is lost. +* The cell selection is not supported for column virtual scrolling. +* The **Ctrl + Home** and **Ctrl + End** keys are not supported when using column virtual scrolling. +* The following features are compatible with column virtualization and works only within the viewport: + 1. Column resizing + 2. Column reordering + 3. Auto-fit + 4. Print + 5. Clipboard + 6. Column menu - Column chooser, AutofitAll + +* Column virtual scrolling is not compatible with the following feature + 1. Colspan + 2. Batch editing + 3. Column with infinite scrolling + 4. Stacked header + 5. Row template + 6. Detail template + 7. Autofill + 8. Column chooser N> You can refer to our [`ASP.NET Core Tree Grid`](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example [`ASP.NET Core Tree Grid example`](https://ej2.syncfusion.com/aspnetcore/TreeGrid/Overview#/material) to knows how to present and manipulate data. diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 6bb7826fb0..116fbdc5d8 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1427,22 +1427,6 @@
  • Enable or Disable Grid and its actions
  • Print the expanded state from other pages
  • Perform CRUD operation using anti-forgery token
    • -
  • Perform Grid actions by keyboard shortcut keys
    • -
  • Customize Pager DropDown
    • -
  • Hide the expand or collapse icon in parent row with no record in child grid
    • -
  • Render both EJ1 and EJ2 Grids in same application
    • -
  • How to set complex column as Foreignkey column
    • -
  • Complex Data Binding with list of Array Of Objects
    • -
  • Select grid rows based on certain condition
    • -
  • Collapse all grouped rows at initial rendering
    • -
  • How to show grouped rows based on the pageSize
    • -
  • Get specific row and cell index in Grid
    • -
  • Display null date values at the bottom of the grid
    • -
  • Enable editing in single click
    • -
  • Cascading DropDownList with Grid editing
    • -
  • Hide sorting options on Excel filter Dialog
    • -
  • Add a title to the header when using Grid print function
    • -
  • Customizing Filter Dialog by using an additional Parameter
  • @@ -1886,7 +1870,7 @@
  • Feature Modules
  • - Open PDF files + Open PDF files
  • Release Notes -