Skip to content

Commit c8994eb

Browse files
marin-bratanovmarin-bratanov
authored
feat(grid): merge cells and rows (#83)
1 parent 52ca0b7 commit c8994eb

28 files changed

+1287
-0
lines changed

‎grid/merge-cells-rows/App.razor

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

‎grid/merge-cells-rows/MergeCells.csproj

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net5.0</TargetFramework>
5+
</PropertyGroup>
6+
7+
<ItemGroup>
8+
<PackageReference Include="Telerik.UI.for.Blazor" Version="2.23.0" />
9+
</ItemGroup>
10+
11+
</Project>

‎grid/merge-cells-rows/MergeCells.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.31112.23
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MergeCells", "MergeCells.csproj", "{5D1386EA-D06D-4ACF-9C96-62B1413FD39C}"
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+
{5D1386EA-D06D-4ACF-9C96-62B1413FD39C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{5D1386EA-D06D-4ACF-9C96-62B1413FD39C}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{5D1386EA-D06D-4ACF-9C96-62B1413FD39C}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{5D1386EA-D06D-4ACF-9C96-62B1413FD39C}.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 = {BC452DCE-5EAB-4CB8-8D0C-CE66A1A2E158}
24+
EndGlobalSection
25+
EndGlobal

‎grid/merge-cells-rows/Pages/Index.razor

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@page "/"
2+
3+
@* See the rowspan attribute for the last cell. Replace that logic with your actual project logic. *@
4+
5+
<TelerikGrid Data=@MyData Pageable="true">
6+
<RowTemplate Context="product">
7+
<td>@product.Id</td>
8+
<td>@product.Name</td>
9+
<td>@product.Quantity</td>
10+
11+
@*
12+
As required by your logic, set the rowspan attribute of a cell to merge it with other cells
13+
NOTE: Subsequent rows must not render a cell there - their number must match the rowspan you set
14+
This example renders every odd cell for the sake of brevity.
15+
*@
16+
@if (product.Id % 2 != 0)
17+
{
18+
<td rowspan="2">@product.Discontinued</td>
19+
}
20+
21+
</RowTemplate>
22+
<GridColumns>
23+
<GridColumn Field=@nameof(Product.Id) Title="Id" />
24+
<GridColumn Field=@nameof(Product.Name) Title="Product Name" />
25+
<GridColumn Field=@nameof(Product.Quantity) Title="Units in Stock" />
26+
<GridColumn Field=@nameof(Product.Discontinued) />
27+
</GridColumns>
28+
</TelerikGrid>
29+
30+
@code {
31+
public class Product
32+
{
33+
public int Id { get; set; }
34+
public string Name { get; set; }
35+
public int Quantity { get; set; }
36+
public bool Discontinued { get; set; }
37+
}
38+
39+
public IEnumerable<Product> MyData = Enumerable.Range(1, 50).Select(x => new Product
40+
{
41+
Id = x,
42+
Name = "Product " + x,
43+
Quantity = x ^ 2,
44+
Discontinued = x % 3 == 0
45+
});
46+
}

‎grid/merge-cells-rows/Pages/_Host.cshtml

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/"
2+
@namespace MergeCells.Pages
3+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4+
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<title>MergeCells</title>
11+
<base href="~/" />
12+
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
13+
<link href="css/site.css" rel="stylesheet" />
14+
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
15+
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
16+
</head>
17+
<body>
18+
<component type="typeof(App)" render-mode="ServerPrerendered" />
19+
20+
<div id="blazor-error-ui">
21+
<environment include="Staging,Production">
22+
An error has occurred. This application may no longer respond until reloaded.
23+
</environment>
24+
<environment include="Development">
25+
An unhandled exception has occurred. See browser dev tools for details.
26+
</environment>
27+
<a href class="reload">Reload</a>
28+
<a class="dismiss">🗙</a>
29+
</div>
30+
31+
<script src="_framework/blazor.server.js"></script>
32+
</body>
33+
</html>

‎grid/merge-cells-rows/Program.cs

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using Microsoft.AspNetCore;
2+
using Microsoft.AspNetCore.Hosting;
3+
using Microsoft.Extensions.Configuration;
4+
using Microsoft.Extensions.Hosting;
5+
using Microsoft.Extensions.Logging;
6+
using System;
7+
using System.Collections.Generic;
8+
using System.IO;
9+
using System.Linq;
10+
using System.Threading.Tasks;
11+
12+
namespace MergeCells
13+
{
14+
public class Program
15+
{
16+
public static void Main(string[] args)
17+
{
18+
CreateHostBuilder(args).Build().Run();
19+
}
20+
21+
public static IHostBuilder CreateHostBuilder(string[] args) =>
22+
Host.CreateDefaultBuilder(args)
23+
.ConfigureWebHostDefaults(webBuilder =>
24+
{
25+
webBuilder.UseStaticWebAssets();
26+
webBuilder.UseStartup<Startup>();
27+
});
28+
}
29+
}

‎grid/merge-cells-rows/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:55276/",
7+
"sslPort": 44398
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"environmentVariables": {
15+
"ASPNETCORE_ENVIRONMENT": "Development"
16+
}
17+
},
18+
"MergeCells": {
19+
"commandName": "Project",
20+
"launchBrowser": true,
21+
"environmentVariables": {
22+
"ASPNETCORE_ENVIRONMENT": "Development"
23+
},
24+
"applicationUrl": "https://localhost:5001;http://localhost:5000"
25+
}
26+
}
27+
}

‎grid/merge-cells-rows/Shared/MainLayout.razor

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@layout TelerikLayout
2+
3+
@inherits LayoutComponentBase
4+
5+
<div class="page">
6+
<div class="sidebar">
7+
<NavMenu />
8+
</div>
9+
10+
<div class="main">
11+
<div class="top-row px-4">
12+
<a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
13+
</div>
14+
15+
<div class="content px-4">
16+
@Body
17+
</div>
18+
</div>
19+
</div>

‎grid/merge-cells-rows/Shared/NavMenu.razor

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="top-row pl-4 navbar navbar-dark">
2+
<a class="navbar-brand" href="">MergeCells</a>
3+
<button class="navbar-toggler" @onclick="ToggleNavMenu">
4+
<span class="navbar-toggler-icon"></span>
5+
</button>
6+
</div>
7+
8+
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
9+
<ul class="nav flex-column">
10+
<li class="nav-item px-3">
11+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
12+
<span class="oi oi-home" aria-hidden="true"></span> Home
13+
</NavLink>
14+
</li>
15+
</ul>
16+
</div>
17+
18+
@code {
19+
bool collapseNavMenu = true;
20+
21+
string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
22+
23+
void ToggleNavMenu()
24+
{
25+
collapseNavMenu = !collapseNavMenu;
26+
}
27+
}

‎grid/merge-cells-rows/Shared/TelerikLayout.razor

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@inherits LayoutComponentBase
2+
3+
<TelerikRootComponent>
4+
@Body
5+
</TelerikRootComponent>

‎grid/merge-cells-rows/Startup.cs

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
using Microsoft.AspNetCore.Builder;
2+
using Microsoft.AspNetCore.Components;
3+
using Microsoft.AspNetCore.Hosting;
4+
using Microsoft.AspNetCore.HttpsPolicy;
5+
using Microsoft.Extensions.Configuration;
6+
using Microsoft.Extensions.DependencyInjection;
7+
using Microsoft.Extensions.Hosting;
8+
using System;
9+
using System.Collections.Generic;
10+
using System.Linq;
11+
using System.Threading.Tasks;
12+
13+
namespace MergeCells
14+
{
15+
public class Startup
16+
{
17+
public Startup(IConfiguration configuration)
18+
{
19+
Configuration = configuration;
20+
}
21+
22+
public IConfiguration Configuration { get; }
23+
24+
// This method gets called by the runtime. Use this method to add services to the container.
25+
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
26+
public void ConfigureServices(IServiceCollection services)
27+
{
28+
services.AddRazorPages();
29+
services.AddServerSideBlazor();
30+
services.AddTelerikBlazor();
31+
}
32+
33+
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
34+
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
35+
{
36+
if (env.IsDevelopment())
37+
{
38+
app.UseDeveloperExceptionPage();
39+
}
40+
else
41+
{
42+
app.UseExceptionHandler("/Error");
43+
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
44+
app.UseHsts();
45+
}
46+
47+
app.UseHttpsRedirection();
48+
app.UseStaticFiles();
49+
50+
app.UseRouting();
51+
52+
app.UseEndpoints(endpoints =>
53+
{
54+
endpoints.MapDefaultControllerRoute();
55+
endpoints.MapControllers();
56+
57+
endpoints.MapBlazorHub();
58+
endpoints.MapFallbackToPage("/_Host");
59+
});
60+
}
61+
}
62+
}

‎grid/merge-cells-rows/_Imports.razor

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@using System.Net.Http
2+
@using Microsoft.AspNetCore.Authorization
3+
@using Microsoft.AspNetCore.Components.Forms
4+
@using Microsoft.AspNetCore.Components.Routing
5+
@using Microsoft.AspNetCore.Components.Authorization
6+
@using Microsoft.AspNetCore.Components.Web
7+
@using Microsoft.JSInterop
8+
@using MergeCells
9+
@using MergeCells.Shared
10+
@using Telerik.Blazor
11+
@using Telerik.Blazor.Components

‎grid/merge-cells-rows/appsettings.Development.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"Logging": {
3+
"LogLevel": {
4+
"Default": "Debug",
5+
"System": "Information",
6+
"Microsoft": "Information"
7+
}
8+
}
9+
}

‎grid/merge-cells-rows/appsettings.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"Logging": {
3+
"LogLevel": {
4+
"Default": "Information",
5+
"Microsoft": "Warning",
6+
"Microsoft.Hosting.Lifetime": "Information"
7+
}
8+
},
9+
"AllowedHosts": "*"
10+
}

‎grid/merge-cells-rows/readme.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Merge Grid Cells or Rows
2+
3+
To control the table cell and row rendering, you must use the <a href="https://docs.telerik.com/blazor-ui/components/grid/templates/row" target="_blank">Row Template</a> of the grid.
4+
5+
Then, you can set the `rowspan` and `colspan` attributes of the `<td>` elements as necessary to merge them.
6+
7+
Make sure to provide valid HTML - if you make one cell larger, you must not render the appropriate number of adjacent cells. For example, if you set `rowspan=2`, the next row must not render that cell.

‎grid/merge-cells-rows/wwwroot/css/bootstrap/bootstrap.min.css

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎grid/merge-cells-rows/wwwroot/css/bootstrap/bootstrap.min.css.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)