Skip to content

Commit 58568e1

Browse files
abooarulrajabooarulraj
authored
Committed the example project.
1 parent e864504 commit 58568e1

38 files changed

+1441
-2
lines changed

‎App.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Router AppAssembly="@typeof(Program).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
</Found>
5+
<NotFound>
6+
<LayoutView Layout="@typeof(MainLayout)">
7+
<p>Sorry, there's nothing at this address.</p>
8+
</LayoutView>
9+
</NotFound>
10+
</Router>

‎MyBlazorProject.csproj‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>netstandard2.1</TargetFramework>
5+
<RazorLangVersion>3.0</RazorLangVersion>
6+
</PropertyGroup>
7+
8+
<ItemGroup>
9+
<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.2.0-preview1.20073.1" />
10+
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.2.0-preview1.20073.1" PrivateAssets="all" />
11+
<PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.2.0-preview1.20073.1" PrivateAssets="all" />
12+
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.2.0-preview1.20073.1" />
13+
<PackageReference Include="Syncfusion.Blazor" Version="18.2.0.48" />
14+
</ItemGroup>
15+
16+
</Project>

‎MyBlazorProject.sln‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 16
4+
VisualStudioVersion = 16.0.29424.173
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MyBlazorProject", "MyBlazorProject.csproj", "{97D0F337-BC9D-4D96-AFDB-2A86BB7DE9C8}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{97D0F337-BC9D-4D96-AFDB-2A86BB7DE9C8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{97D0F337-BC9D-4D96-AFDB-2A86BB7DE9C8}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{97D0F337-BC9D-4D96-AFDB-2A86BB7DE9C8}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{97D0F337-BC9D-4D96-AFDB-2A86BB7DE9C8}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {20F99420-39E9-43BE-A318-0B2FACE40579}
24+
EndGlobalSection
25+
EndGlobal

‎Pages/Counter.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page "/counter"
2+
3+
<h1>Counter</h1>
4+
5+
<p>Current count: @currentCount</p>
6+
7+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
8+
9+
@code {
10+
private int currentCount = 0;
11+
12+
private void IncrementCount()
13+
{
14+
currentCount++;
15+
}
16+
}

‎Pages/FetchData.razor‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@page "/fetchdata"
2+
@inject HttpClient Http
3+
4+
<h1>Weather forecast</h1>
5+
6+
<p>This component demonstrates fetching data from the server.</p>
7+
8+
@if (forecasts == null)
9+
{
10+
<p><em>Loading...</em></p>
11+
}
12+
else
13+
{
14+
<table class="table">
15+
<thead>
16+
<tr>
17+
<th>Date</th>
18+
<th>Temp. (C)</th>
19+
<th>Temp. (F)</th>
20+
<th>Summary</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
@foreach (var forecast in forecasts)
25+
{
26+
<tr>
27+
<td>@forecast.Date.ToShortDateString()</td>
28+
<td>@forecast.TemperatureC</td>
29+
<td>@forecast.TemperatureF</td>
30+
<td>@forecast.Summary</td>
31+
</tr>
32+
}
33+
</tbody>
34+
</table>
35+
}
36+
37+
@code {
38+
private WeatherForecast[] forecasts;
39+
40+
protected override async Task OnInitializedAsync()
41+
{
42+
forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
43+
}
44+
45+
public class WeatherForecast
46+
{
47+
public DateTime Date { get; set; }
48+
49+
public int TemperatureC { get; set; }
50+
51+
public string Summary { get; set; }
52+
53+
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
54+
}
55+
}

‎Pages/Index.razor‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
@page "/"
2+
3+
<SfListView DataSource="@CallListData" ShowHeader="true">
4+
<ListViewFieldSettings Id="Id" Text="Text" GroupBy="Category"></ListViewFieldSettings>
5+
<ListViewTemplates TValue="ContactDetails">
6+
<HeaderTemplate>
7+
<span class="e-icon"></span>
8+
<span>Call History</span>
9+
</HeaderTemplate>
10+
<Template>
11+
<div class="e-list-wrapper e-list-avatar">
12+
@if(@context.Avatar != "")
13+
{
14+
<span class="e-avatar e-avatar-circle @context.Avatar">@context.Avatar</span>
15+
}
16+
else
17+
{
18+
<img class="e-avatar e-avatar-circle @context.Pic" />
19+
}
20+
<span>@context.Text</span>
21+
</div>
22+
</Template>
23+
<GroupTemplate>
24+
<span>Day: @context.Text</span>
25+
</GroupTemplate>
26+
</ListViewTemplates>
27+
</SfListView>
28+
29+
@code
30+
{
31+
List<ContactDetails> CallListData = new List<ContactDetails>();
32+
protected override void OnInitialized()
33+
{
34+
base.OnInitialized();
35+
CallListData.Add(new ContactDetails
36+
{
37+
Text = "Jenifer",
38+
Id = "1",
39+
Avatar = "J",
40+
Category = "Today"
41+
});
42+
CallListData.Add(new ContactDetails
43+
{
44+
Text = "Amenda",
45+
Id = "2",
46+
Avatar = "",
47+
Pic = "pic01",
48+
Category = "Today",
49+
});
50+
CallListData.Add(new ContactDetails
51+
{
52+
Text = "Isabella",
53+
Id = "4",
54+
Avatar = "I",
55+
Category = "Today",
56+
});
57+
CallListData.Add(new ContactDetails
58+
{
59+
Text = "William ",
60+
Id = "5",
61+
Avatar = "W",
62+
Category = "Yesterday"
63+
});
64+
CallListData.Add(new ContactDetails
65+
{
66+
Text = "Jacob",
67+
Id = "6",
68+
Avatar = "",
69+
Pic = "pic02",
70+
Category = "Today",
71+
});
72+
CallListData.Add(new ContactDetails
73+
{
74+
Text = "Matthew",
75+
Id = "7",
76+
Avatar = "M",
77+
Category = "Yesterday",
78+
});
79+
CallListData.Add(new ContactDetails
80+
{
81+
Text = "Oliver",
82+
Id = "8",
83+
Avatar = "O",
84+
Category = "Yesterday",
85+
});
86+
CallListData.Add(new ContactDetails
87+
{
88+
Text = "Charlotte",
89+
Id = "9",
90+
Avatar = "C",
91+
Category = "Today",
92+
});
93+
94+
}
95+
class ContactDetails
96+
{
97+
public string Id { get; set; }
98+
public string Text { get; set; }
99+
public string Avatar { get; set; }
100+
public string Pic { get; set; }
101+
public string Category { get; set; }
102+
}
103+
}
104+
105+
<style>
106+
.e-listview {
107+
max-width: 345px;
108+
height: 380px;
109+
border: 1px solid lightgray;
110+
}
111+
112+
.e-listview:not(.e-list-template) .e-list-item {
113+
height: 45px;
114+
margin: 2px 0 2px 0;
115+
}
116+
117+
.e-icon {
118+
font-family: 'e-customized-icons';
119+
background: transparent;
120+
color: black;
121+
margin-right: 10px;
122+
}
123+
124+
.e-icon:before {
125+
content: '\e902';
126+
}
127+
128+
@@font-face {
129+
font-family: 'e-customized-icons';
130+
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
131+
font-weight: normal;
132+
font-style: normal;
133+
}
134+
135+
.e-listview .e-list-item .e-list-wrapper .J {
136+
background: lightgreen;
137+
}
138+
139+
.e-listview .e-list-item .e-list-wrapper .I {
140+
background: lightskyblue;
141+
}
142+
143+
.e-listview .e-list-item .e-list-wrapper .W {
144+
background: orange;
145+
}
146+
147+
.e-listview .e-list-item .e-list-wrapper .M {
148+
background: lightblue;
149+
}
150+
151+
.e-listview .e-list-item .e-list-wrapper .O {
152+
background: orange;
153+
}
154+
155+
.e-listview .e-list-item .e-list-wrapper .C {
156+
background: lightblue;
157+
}
158+
159+
.pic01 {
160+
background-image: url('images/employees/1.png');
161+
}
162+
163+
.pic02 {
164+
background-image: url('images/employees/2.png');
165+
}
166+
</style>

‎Program.cs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Threading.Tasks;
4+
using System.Text;
5+
using Microsoft.AspNetCore.Blazor.Hosting;
6+
using Microsoft.Extensions.DependencyInjection;
7+
using Syncfusion.Blazor;
8+
9+
namespace MyBlazorProject
10+
{
11+
public class Program
12+
{
13+
public static async Task Main(string[] args)
14+
{
15+
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("Add your licence");
16+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
17+
builder.RootComponents.Add<App>("app");
18+
builder.Services.AddSyncfusionBlazor();
19+
await builder.Build().RunAsync();
20+
}
21+
}
22+
}

‎Properties/launchSettings.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:49681/",
7+
"sslPort": 0
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"environmentVariables": {
15+
"ASPNETCORE_ENVIRONMENT": "Development"
16+
}
17+
},
18+
"MyBlazorProject": {
19+
"commandName": "Project",
20+
"launchBrowser": true,
21+
"environmentVariables": {
22+
"ASPNETCORE_ENVIRONMENT": "Development"
23+
},
24+
"applicationUrl": "http://localhost:49682/"
25+
}
26+
}
27+
}

‎README.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# customizing-blazor-listview-using-templates
2-
A quick start Blazor WebAssembly app that helps you to customize the ListView component header, item, and its group header using templates.
1+
# Customizing Blazor ListView using Templates
2+
A quick start Blazor WebAssembly app that helps you to customize the ListView component header, item, and its group header using templates.
3+
4+
Documentation: https://blazor.syncfusion.com/documentation/listview/customizing-templates/
5+
6+
Online examples: https://blazor.syncfusion.com/demos/listview/list-templates
7+
8+
## Project prerequisites
9+
10+
Make sure that you have the compatible versions of Visual Studio 2019 and .NET Core SDK 3.1.3 in your machine before starting to work on this project.
11+
12+
## How to run this application?
13+
14+
To run this application, you need to first clone the `customizing-blazor-listview-using-templates` repository and then open it in Visual Studio 2019. Now, simply build and run your project to view the output.

‎Shared/MainLayout.razor‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@inherits LayoutComponentBase
2+
3+
<div class="sidebar">
4+
<NavMenu />
5+
</div>
6+
7+
<div class="main">
8+
<div class="top-row px-4">
9+
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
10+
</div>
11+
12+
<div class="content px-4">
13+
@Body
14+
</div>
15+
</div>

0 commit comments

Comments
 (0)