You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
13
+
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.
14
14
15
15
## Prerequisites
16
16
@@ -38,7 +38,7 @@ N> Syncfusion<sup style="font-size:70%">®</sup> ASP.NET MVC controls are ava
38
38
39
39
## Add namespace
40
40
41
-
Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder.
41
+
Add **Syncfusion.EJ2** namespace reference in `Web.config` under **Views** folder.
42
42
43
43
```
44
44
<namespaces>
@@ -48,7 +48,7 @@ Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder.
48
48
49
49
## Add stylesheet and script resources
50
50
51
-
Here, the theme and script is referred using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
51
+
Here, the theme and script is referred using CDN inside the `<head>` of **~/Pages/Shared/_Layout.cshtml** file as follows,
@@ -82,9 +82,9 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `<body>`
82
82
{% endhighlight %}
83
83
{% endtabs %}
84
84
85
-
## Add ASP.NET MVC Chip control
85
+
## Add ASP.NET MVC Chips control
86
86
87
-
Now, add the Syncfusion<supstyle="font-size:70%">®</sup> ASP.NET MVC Chip control in `~/Home/Index.cshtml` page.
87
+
Now, add the Syncfusion<supstyle="font-size:70%">®</sup> ASP.NET MVC Chips control in **~/Home/Index.cshtml** page.
88
88
89
89
{% tabs %}
90
90
{% highlight cshtml tabtitle="CSHTML" %}
@@ -94,8 +94,8 @@ Now, add the Syncfusion<sup style="font-size:70%">®</sup> ASP.NET MVC Chip c
94
94
{% endhighlight %}
95
95
{% endtabs %}
96
96
97
-
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<supstyle="font-size:70%">®</sup> ASP.NET MVC Chip control will be rendered in the default web browser.
97
+
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<supstyle="font-size:70%">®</sup> ASP.NET MVC Chips control will be rendered in the default web browser.
98
98
99
-
99
+
100
100
101
101
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/Chip/ASP.NET%20MVC%20Razor%20Examples).
N> Syncfusion<supstyle="font-size:70%">®</sup> 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<supstyle="font-size:70%">®</sup> license key.
38
38
39
39
## Add Syncfusion<supstyle="font-size:70%">®</sup> ASP.NET Core Tag Helper
40
-
Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
40
+
41
+
Open **~/Pages/_ViewImports.cshtml** file and import the `Syncfusion.EJ2` TagHelper.
This section explains the customization of styles, leading icons, avatar, and trailing icons in Chip control.
13
+
This section explains the customization of styles, leading icons, avatars, and trailing icons in the Chips control.
14
14
15
15
## Styles
16
16
17
-
The Chip control has the following predefined styles that can be defined using the `cssClass` property.
17
+
{% if page.publishingplatform == "aspnet-core" %}
18
+
19
+
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.
18
20
19
21
| Class | Description |
20
22
| -------- | -------- |
21
-
| e-primary | Represents a primary chip. |
22
-
| e-success | Represents a positive chip. |
23
-
| e-info | Represents an informative chip. |
24
-
| e-warning | Represents a chip with caution. |
25
-
| e-danger | Represents a negative chip. |
26
-
27
-
{% if page.publishingplatform == "aspnet-core" %}
23
+
| e-primary | Represents a primary Chips. |
24
+
| e-success | Represents a positive Chips. |
25
+
| e-info | Represents an informative Chips. |
26
+
| e-warning | Represents a Chips with caution. |
27
+
| e-danger | Represents a negative Chips. |
28
28
29
29
{% tabs %}
30
30
{% highlight cshtml tabtitle="CSHTML" %}
@@ -34,6 +34,16 @@ The Chip control has the following predefined styles that can be defined using t
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.
38
+
39
+
| Class | Description |
40
+
| -------- | -------- |
41
+
| e-primary | Represents a primary Chips. |
42
+
| e-success | Represents a positive Chips. |
43
+
| e-info | Represents an informative Chips. |
44
+
| e-warning | Represents a Chips with caution. |
45
+
| e-danger | Represents a negative Chips. |
46
+
37
47
{% tabs %}
38
48
{% highlight razor tabtitle="CSHTML" %}
39
49
{% include code-snippet/chips/styles/razor %}
@@ -44,14 +54,14 @@ The Chip control has the following predefined styles that can be defined using t
You can add and customize the leading icon of chip using the `leadingIconCss` property.
52
-
53
61
{% if page.publishingplatform == "aspnet-core" %}
54
62
63
+
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.
64
+
55
65
{% tabs %}
56
66
{% highlight cshtml tabtitle="CSHTML" %}
57
67
{% include code-snippet/chips/leadingIcon/tagHelper %}
@@ -60,6 +70,8 @@ You can add and customize the leading icon of chip using the `leadingIconCss` pr
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.
74
+
63
75
{% tabs %}
64
76
{% highlight razor tabtitle="CSHTML" %}
65
77
{% include code-snippet/chips/leadingIcon/razor %}
@@ -70,14 +82,14 @@ You can add and customize the leading icon of chip using the `leadingIconCss` pr
70
82
{% endtabs %}
71
83
{% endif %}
72
84
73
-
85
+
74
86
75
87
## Avatar
76
88
77
-
You can add and customize the avatar of chip using the `avatarIconCss` property.
78
-
79
89
{% if page.publishingplatform == "aspnet-core" %}
80
90
91
+
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.
92
+
81
93
{% tabs %}
82
94
{% highlight cshtml tabtitle="CSHTML" %}
83
95
{% include code-snippet/chips/avatar/tagHelper %}
@@ -86,6 +98,8 @@ You can add and customize the avatar of chip using the `avatarIconCss` property.
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.
102
+
89
103
{% tabs %}
90
104
{% highlight razor tabtitle="CSHTML" %}
91
105
{% include code-snippet/chips/avatar/razor %}
@@ -96,14 +110,14 @@ You can add and customize the avatar of chip using the `avatarIconCss` property.
You can add and customize the avatar content of chip using the `avatarText` property.
104
-
105
117
{% if page.publishingplatform == "aspnet-core" %}
106
118
119
+
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.
120
+
107
121
{% tabs %}
108
122
{% highlight cshtml tabtitle="CSHTML" %}
109
123
{% include code-snippet/chips/avatarText/tagHelper %}
@@ -112,6 +126,8 @@ You can add and customize the avatar content of chip using the `avatarText` prop
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.
130
+
115
131
{% tabs %}
116
132
{% highlight razor tabtitle="CSHTML" %}
117
133
{% include code-snippet/chips/avatarText/razor %}
@@ -122,14 +138,14 @@ You can add and customize the avatar content of chip using the `avatarText` prop
You can add and customize the trailing icon of chip using the `trailingIconCss` property.
130
-
131
145
{% if page.publishingplatform == "aspnet-core" %}
132
146
147
+
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.
148
+
133
149
{% tabs %}
134
150
{% highlight cshtml tabtitle="CSHTML" %}
135
151
{% include code-snippet/chips/trailing/tagHelper %}
@@ -138,6 +154,8 @@ You can add and customize the trailing icon of chip using the `trailingIconCss`
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.
158
+
141
159
{% tabs %}
142
160
{% highlight razor tabtitle="CSHTML" %}
143
161
{% include code-snippet/chips/trailing/razor %}
@@ -150,12 +168,12 @@ You can add and customize the trailing icon of chip using the `trailingIconCss`
150
168
151
169
152
170
153
-
## Outline Chip
154
-
155
-
Outline chip has the border with the background transparent. It can be set using the `cssClass` property.
171
+
## Outline Chips
156
172
157
173
{% if page.publishingplatform == "aspnet-core" %}
158
174
175
+
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.
176
+
159
177
{% tabs %}
160
178
{% highlight cshtml tabtitle="CSHTML" %}
161
179
{% include code-snippet/chips/outline/tagHelper %}
@@ -164,6 +182,8 @@ Outline chip has the border with the background transparent. It can be set using
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.
186
+
167
187
{% tabs %}
168
188
{% highlight razor tabtitle="CSHTML" %}
169
189
{% include code-snippet/chips/outline/razor %}
@@ -174,11 +194,13 @@ Outline chip has the border with the background transparent. It can be set using
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.
203
+
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.
182
204
183
205
{% tabs %}
184
206
{% highlight cshtml tabtitle="CSHTML" %}
@@ -188,7 +210,7 @@ The [`Template`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.bu
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.
213
+
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.
192
214
193
215
{% tabs %}
194
216
{% highlight razor tabtitle="CSHTML" %}
@@ -200,5 +222,6 @@ The [`Template`](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.but
title: Overview in ##Platform_Name## Chips Component
4
-
description: Learn here all about Overview in Syncfusion ##Platform_Name## Chips component of Syncfusion Essential JS 2 and more.
3
+
title: Overview in ##Platform_Name## Chips Control | Syncfusion
4
+
description: Learn here all about Overview in Syncfusion ##Platform_Name## Chips control of Syncfusion Essential JS 2 and more.
5
5
platform: ej2-asp-core-mvc
6
6
control: Index
7
7
publishingplatform: ##Platform_Name##
@@ -10,4 +10,4 @@ documentation: ug
10
10
11
11
# Overview
12
12
13
-
The chip is a small block of essential information that triggers an event on click action. It contains the text, image, or both and mostly used in contacts, mails, or filter tags.
13
+
The Chips is a small block of essential information that triggers an event on click action. It contains the text, image, or both and mostly used in contacts, mails, or filter tags.
0 commit comments