Skip to content

Commit a692c0f

Browse files
suba-1997suba-1997
committed
934883: Test and resolve issues in UG all sections - ASP core MVC Avatar control.
1 parent 838037a commit a692c0f

File tree

2 files changed

+195
-242
lines changed

2 files changed

+195
-242
lines changed

‎ej2-asp-core-mvc/code-snippet/avatar/listview/razor

Lines changed: 88 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,89 @@
1-
@using Syncfusion.EJ2
2-
3-
<div class="col-lg-12 control-section">
4-
5-
<div class="sample_container">
6-
<!-- Listview element -->
7-
@{ var template = "<div class='listWrapper'>" +
8-
"${if(avatar!=='')}" +
9-
"<span class='e-avatar e-avatar-small e-avatar-circle'>${avatar}</span>" +
10-
"${else}" +
11-
"<span class='${pic} e-avatar e-avatar-small e-avatar-circle'> </span>" +
12-
"${/if}" +
13-
"<span class='text'>" +
14-
"${text} </span> </div>";}
15-
@Html.EJS().ListView("letterAvatarList").Enable(true).DataSource((IEnumerable<object>)ViewBag.dataSource).HeaderTitle("Contacts").ShowHeader(true).Template(template).SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render()
16-
</div>
17-
</div>
18-
19-
20-
<style>
21-
.control-section {
22-
overflow: auto;
23-
}
24-
25-
/* Listview Customization */
26-
27-
#letterAvatarList {
28-
max-width: 350px;
29-
margin: auto;
30-
border: 1px solid #dddddd;
31-
border-radius: 3px;
32-
}
33-
34-
#letterAvatarList .listWrapper {
35-
width: inherit;
36-
height: inherit;
37-
position: relative;
38-
}
39-
40-
#letterAvatarList .e-list-header {
41-
height: 54px;
42-
}
43-
44-
.material #letterAvatarList .e-list-header .e-text {
45-
line-height: 22px;
46-
}
47-
48-
.fabric #letterAvatarList .e-list-header .e-text {
49-
line-height: 22px;
50-
}
51-
52-
.bootstrap #letterAvatarList .e-list-header .e-text {
53-
line-height: 13px;
54-
}
55-
56-
.highcontrast #letterAvatarList .e-list-header .e-text {
57-
line-height: 20px;
58-
}
59-
60-
#letterAvatarList .e-list-item {
61-
cursor: pointer;
62-
height: 50px;
63-
line-height: 44px;
64-
border: 0;
65-
}
66-
67-
/* Badge Positioning */
68-
69-
#letterAvatarList .e-badge {
70-
margin-top: 12px;
71-
}
72-
73-
#letterAvatarList .listWrapper .text {
74-
width: 60%;
75-
display: inline-block;
76-
vertical-align: middle;
77-
margin: 0 50px;
78-
}
79-
80-
/* Avatar Positioning */
81-
82-
#letterAvatarList .listWrapper .e-avatar {
83-
position: absolute;
84-
top: calc(100% - 40px);
85-
font-size: 10px;
86-
left: 5px;
87-
}
88-
89-
/* Avatar Background Customization */
90-
91-
#letterAvatarList .e-list-item:nth-child(1) .e-avatar {
92-
background-color: #039BE5;
93-
}
94-
95-
#letterAvatarList .e-list-item:nth-child(3) .e-avatar {
96-
background-color: #E91E63;
97-
}
98-
99-
#letterAvatarList .e-list-item:nth-child(5) .e-avatar {
100-
background-color: #009688;
101-
}
102-
103-
/* Avatar images using 'background-image' property */
104-
105-
.pic01 {
106-
background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic01.png")');
107-
}
108-
109-
.pic02 {
110-
background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic02.png")');
111-
}
112-
113-
.pic03 {
114-
background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic03.png")');
115-
}
116-
117-
.pic04 {
118-
background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic04.png")');
119-
}
1+
@using Syncfusion.EJ2 <div class="col-lg-12 control-section"><div class="sample_container">< !-- Listview element -->@{ var template = "<div class='listWrapper'>" +
2+
"${if(avatar!=='')}"+"<span class='e-avatar e-avatar-small e-avatar-circle'>${avatar}</span>"+"${else}"+"<span class='${pic} e-avatar e-avatar-small e-avatar-circle'> </span>"+"${/if}"+"<span class='text'>"+"${text} </span> </div>";
3+
}
4+
5+
@Html.EJS().ListView("letterAvatarList").Enable(true).DataSource((IEnumerable<object>)ViewBag.dataSource).HeaderTitle("Contacts").ShowHeader(true).Template(template).SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render() </div></div><style>.control-section {
6+
overflow: auto;
7+
}
8+
9+
/* Listview Customization */
10+
11+
#letterAvatarList {
12+
max-width: 350px;
13+
margin: auto;
14+
border: 1px solid #dddddd;
15+
border-radius: 3px;
16+
}
17+
18+
#letterAvatarList .listWrapper {
19+
width: inherit;
20+
height: inherit;
21+
position: relative;
22+
}
23+
24+
#letterAvatarList .e-list-header {
25+
height: 54px;
26+
}
27+
28+
#letterAvatarList .e-list-item {
29+
cursor: pointer;
30+
height: 50px;
31+
line-height: 44px;
32+
border: 0;
33+
}
34+
35+
/* Badge Positioning */
36+
37+
#letterAvatarList .e-badge {
38+
margin-top: 12px;
39+
}
40+
41+
#letterAvatarList .listWrapper .text {
42+
width: 60%;
43+
display: inline-block;
44+
vertical-align: middle;
45+
margin: 0 50px;
46+
}
47+
48+
/* Avatar Positioning */
49+
50+
#letterAvatarList .listWrapper .e-avatar {
51+
position: absolute;
52+
top: calc(100% - 40px);
53+
font-size: 10px;
54+
left: 5px;
55+
}
56+
57+
/* Avatar Background Customization */
58+
59+
#letterAvatarList .e-list-item:nth-child(1) .e-avatar {
60+
background-color: #039BE5;
61+
}
62+
63+
#letterAvatarList .e-list-item:nth-child(3) .e-avatar {
64+
background-color: #E91E63;
65+
}
66+
67+
#letterAvatarList .e-list-item:nth-child(5) .e-avatar {
68+
background-color: #009688;
69+
}
70+
71+
/* Avatar images using 'background-image' property */
72+
73+
.pic01 {
74+
background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic01.png")');
75+
}
76+
77+
.pic02 {
78+
background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic02.png")');
79+
}
80+
81+
.pic03 {
82+
background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic03.png")');
83+
}
84+
85+
.pic04 {
86+
background-image: url('@Url.Content("https://ej2.syncfusion.com/aspnetmvc/Content/avatar/images/pic04.png")');
87+
}
88+
12089
</style>

0 commit comments

Comments
 (0)