Skip to content

Commit d0ceaab

Browse files
vinoth-Kumar-Svinoth-Kumar-S
committed
Adding the Blazor data grid edit dialog template sample
1 parent 6cb7ed5 commit d0ceaab

29 files changed

+1401
-0
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.Components.WebAssembly" Version="3.2.0" />
10+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />
11+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" />
12+
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.2.0-preview3.20168.3" />
13+
<PackageReference Include="Syncfusion.Blazor" Version="18.2.0.57" />
14+
</ItemGroup>
15+
16+
</Project>

‎MyBlazorProject.csproj.user‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<PropertyGroup>
4+
<ActiveDebugProfile>IIS Express</ActiveDebugProfile>
5+
</PropertyGroup>
6+
</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: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@page "/"
2+
@using Syncfusion.Blazor.Inputs;
3+
@using Syncfusion.Blazor.DropDowns;
4+
@using Syncfusion.Blazor.Calendars;
5+
6+
<SfGrid DataSource="@Orders"
7+
Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })">
8+
<GridEvents TValue="OrderDetails"
9+
OnActionBegin="OnActionBeginHandler"></GridEvents>
10+
<GridEditSettings AllowAdding="true"
11+
AllowEditing="true"
12+
AllowDeleting="true"
13+
Mode="EditMode.Dialog">
14+
<Template>
15+
@{
16+
var Order = (context as OrderDetails);
17+
}
18+
<div>
19+
<div class="form-row">
20+
<div class="form-group col-md-6">
21+
<SfNumericTextBox @bind-Value="@(Order.OrderID)"
22+
Enabled="@IsAddNew"
23+
Placeholder="Order ID"
24+
FloatLabelType="FloatLabelType.Always"
25+
TValue="int?"></SfNumericTextBox>
26+
</div>
27+
<div class="form-group col-md-6">
28+
<SfAutoComplete DataSource="@Orders"
29+
TItem="OrderDetails"
30+
TValue="string"
31+
@bind-Value="@(Order.CustomerID)"
32+
Placeholder="Customer Name"
33+
FloatLabelType="FloatLabelType.Always">
34+
<AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
35+
</SfAutoComplete>
36+
</div>
37+
</div>
38+
<div class="form-row">
39+
<div class="form-group col-md-6">
40+
<SfDatePicker @bind-Value="@(Order.OrderDate)"
41+
Placeholder="Order Date"
42+
FloatLabelType="FloatLabelType.Always"></SfDatePicker>
43+
</div>
44+
<div class="form-group col-md-6">
45+
<SfDropDownList DataSource="@Orders"
46+
TItem="OrderDetails"
47+
TValue="string"
48+
@bind-Value="@(Order.ShipCountry)"
49+
Placeholder="Ship Country"
50+
FloatLabelType="FloatLabelType.Always">
51+
<DropDownListFieldSettings Value="ShipCountry"
52+
Text="ShipCountry">
53+
</DropDownListFieldSettings>
54+
</SfDropDownList>
55+
</div>
56+
</div>
57+
<div class="form-row">
58+
<div class="form-group col-md-12">
59+
<SfTextBox @bind-Value="@(Order.ShipAddress)"
60+
Placeholder="Ship Address"
61+
FloatLabelType="FloatLabelType.Always"></SfTextBox>
62+
</div>
63+
</div>
64+
</div>
65+
</Template>
66+
</GridEditSettings>
67+
<GridColumns>
68+
<GridColumn Field="OrderID"
69+
HeaderText="Order ID"
70+
TextAlign="TextAlign.Right"
71+
Width="120"
72+
IsPrimaryKey="true">
73+
</GridColumn>
74+
<GridColumn Field="CustomerID"
75+
HeaderText="Customer Name"
76+
Width="150">
77+
</GridColumn>
78+
<GridColumn Field="ShipCountry"
79+
HeaderText="ShipCountry"
80+
Width="150">
81+
</GridColumn>
82+
</GridColumns>
83+
</SfGrid>
84+
85+
@code{
86+
public bool IsAddNew = false;
87+
88+
public List<OrderDetails> Orders { get; set; } = new List<OrderDetails>(){
89+
new OrderDetails() { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, ShipCity = "Berlin", OrderDate = DateTime.Now.AddDays(-2), ShipName = "Vins et alcools Chevalier", ShipCountry = "Denmark", ShipAddress = "Kirchgasse 6" },
90+
new OrderDetails() { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-5), ShipName = "Toms Spezialitäten", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
91+
new OrderDetails() { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83, ShipCity = "Cholchester", OrderDate = DateTime.Now.AddDays(-12), ShipName = "Hanari Carnes", ShipCountry = "Germany", ShipAddress = "Carrera 52 con Ave. Bolívar #65-98 Llano Largo" },
92+
new OrderDetails() { OrderID = 10251, CustomerID = "VICTE", Freight = 41.34, ShipCity = "Marseille", OrderDate = DateTime.Now.AddDays(-18), ShipName = "Victuailles en stock", ShipCountry = "Austria", ShipAddress = "Magazinweg 7" },
93+
new OrderDetails() { OrderID = 10252, CustomerID = "SUPRD", Freight = 51.3, ShipCity = "Tsawassen", OrderDate = DateTime.Now.AddDays(-22), ShipName = "Suprêmes délices", ShipCountry = "Switzerland", ShipAddress = "1029 - 12th Ave. S." },
94+
new OrderDetails() { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17, ShipCity = "Tsawassen", OrderDate = DateTime.Now.AddDays(-26), ShipName = "Hanari Carnes", ShipCountry = "Switzerland", ShipAddress = "1029 - 12th Ave. S." },
95+
new OrderDetails() { OrderID = 10254, CustomerID = "CHOPS", Freight = 22.98, ShipCity = "Berlin", OrderDate = DateTime.Now.AddDays(-34), ShipName = "Chop-suey Chinese", ShipCountry = "Denmark", ShipAddress = "Kirchgasse 6" },
96+
new OrderDetails() { OrderID = 10255, CustomerID = "RICSU", Freight = 148.33, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-39), ShipName = "Richter Supermarket", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
97+
new OrderDetails() { OrderID = 10256, CustomerID = "WELLI", Freight = 13.97, ShipCity = "Madrid", OrderDate = DateTime.Now.AddDays(-43), ShipName = "Wellington Importadora", ShipCountry = "Brazil", ShipAddress = "Avda. Azteca 123" },
98+
new OrderDetails() { OrderID = 10257, CustomerID = "HILAA", Freight = 81.91, ShipCity = "Cholchester", OrderDate = DateTime.Now.AddDays(-48), ShipName = "HILARION-Abastos", ShipCountry = "Germany", ShipAddress = "Carrera 52 con Ave. Bolívar #65-98 Llano Largo" }
99+
};
100+
101+
public class OrderDetails
102+
{
103+
public int? OrderID { get; set; }
104+
public string CustomerID { get; set; }
105+
public double? Freight { get; set; }
106+
public string ShipCity { get; set; }
107+
public DateTime OrderDate { get; set; }
108+
public string ShipName { get; set; }
109+
public string ShipCountry { get; set; }
110+
public string ShipAddress { get; set; }
111+
}
112+
113+
private void OnActionBeginHandler(ActionEventArgs<OrderDetails> args)
114+
=> IsAddNew = args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add);
115+
}
116+
117+
<style>
118+
.form-group .col-md-6{
119+
width: 200px;
120+
}
121+
</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.Components.WebAssembly.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 & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1+
# Customize the Edit Dialog Using Templates in Blazor Data Grid
2+
13
A quick-start project that helps you to customize the edit dialog in Syncfusion Blazor Data Grid. This project contains simple code customizations to add custom components like Numeric TextBox, AutoComplete, DatePicker, Dropdown List, and TextBox to the edit dialog using a template.
4+
5+
Documentation: https://blazor.syncfusion.com/documentation/datagrid/editing/#entity-framework
6+
7+
Online examples: https://blazor.syncfusion.com/demos/datagrid/grid-dialog-template
8+
9+
## Project prerequisites
10+
11+
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.
12+
13+
## How to run this application?
14+
15+
To run this application, you need to first clone the `customize-the-edit-dialog-using-templates-in-blazor-data-grid` repository and then open it in Visual Studio 2019. Now, simply build and run your project to view the output.

0 commit comments

Comments
 (0)