Skip to content

Commit 1553957

Browse files
gustavnavargustavnavar
committed
Embedded components started from the rows
1 parent f887b3f commit 1553957

37 files changed

+717
-231
lines changed

‎GridBlazor/Pages/GridComponent.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@
310310
}
311311
</div>
312312
}
313-
else if (Grid.Mode == GridMode.ButtonComponent)
313+
else if (Grid.Mode == GridMode.Form)
314314
{
315315
<div dir="@Grid.Direction.ToDirection()">
316316
@CrudRender

‎GridBlazor/Pages/GridComponent.razor.cs‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -651,10 +651,22 @@ public async Task ExcelHandler()
651651
public void ButtonComponentHandler(string key)
652652
{
653653
var buttonComponent = Grid.ButtonComponents.Get(key);
654-
((CGrid<T>)Grid).Mode = GridMode.ButtonComponent;
655-
if (buttonComponent.ComponentType != null)
656-
CrudRender = ButtonComponent(buttonComponent.Label, buttonComponent.ComponentType, buttonComponent.Actions,
654+
StartFormComponent(buttonComponent.Label, buttonComponent.ComponentType, buttonComponent.Actions,
657655
buttonComponent.Functions, buttonComponent.Object);
656+
}
657+
658+
public void StartFormComponent<TFormComponent>(string label, IList<Action<object>> actions,
659+
IList<Func<object, Task>> functions, object obj)
660+
{
661+
StartFormComponent(label, typeof(TFormComponent), actions, functions, obj);
662+
}
663+
664+
public void StartFormComponent(string label, Type componentType, IList<Action<object>> actions,
665+
IList<Func<object, Task>> functions, object obj)
666+
{
667+
((CGrid<T>)Grid).Mode = GridMode.Form;
668+
if (componentType != null)
669+
CrudRender = FormComponent(label, componentType, actions, functions, obj);
658670
else
659671
CrudRender = null;
660672

@@ -810,18 +822,18 @@ private RenderFragment DeleteCrudChildComponent() => builder =>
810822
builder.CloseComponent();
811823
};
812824

813-
protected RenderFragment ButtonComponent(string label, Type componentType, IList<Action<object>> actions,
825+
protected RenderFragment FormComponent(string label, Type componentType, IList<Action<object>> actions,
814826
IList<Func<object, Task>> functions, object obj) => builder =>
815827
{
816828
builder.OpenComponent<CascadingValue<GridComponent<T>>>(++_sequence);
817829
builder.AddAttribute(++_sequence, "Value", this);
818830
builder.AddAttribute(++_sequence, "Name", "GridComponent");
819-
builder.AddAttribute(++_sequence, "ChildContent", ButtonChildComponent(label, componentType, actions,
831+
builder.AddAttribute(++_sequence, "ChildContent", FormChildComponent(label, componentType, actions,
820832
functions, obj));
821833
builder.CloseComponent();
822834
};
823835

824-
private RenderFragment ButtonChildComponent(string label, Type componentType, IList<Action<object>> actions,
836+
private RenderFragment FormChildComponent(string label, Type componentType, IList<Action<object>> actions,
825837
IList<Func<object, Task>> functions, object obj) => builder =>
826838
{
827839
builder.OpenComponent(++_sequence, componentType);

‎GridBlazorClientSide.Client/ColumnCollections/ColumnCollections.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,38 @@ public static Action<IGridColumnCollection<Order>, string, Func<object[], bool,
398398
.RenderValueAs(o => o.Customer.IsVip ? Strings.BoolTrueLabel : Strings.BoolFalseLabel);
399399
};
400400

401+
public static Action<IGridColumnCollection<Order>> OrderColumnsWithButttonComponents = c =>
402+
{
403+
/* Adding not mapped column, that renders body, using inline Razor html helper */
404+
c.Add().Encoded(false).Sanitized(false).RenderComponentAs<ShipperButtonCell>();
405+
406+
/* Adding "OrderID" column: */
407+
c.Add(o => o.OrderID).Titled(SharedResource.Number).SetTooltip("Order ID is ... ").SetWidth(100);
408+
409+
/* Adding "OrderDate" column: */
410+
c.Add(o => o.OrderDate, "OrderCustomDate").Titled(SharedResource.OrderCustomDate)
411+
.SetWidth(120).RenderComponentAs<TooltipCell>();
412+
413+
/* Adding "CompanyName" column: */
414+
c.Add(o => o.Customer.CompanyName).Titled(SharedResource.CompanyName)
415+
.SetWidth(250);
416+
417+
/* Adding "ContactName" column: */
418+
c.Add(o => o.Customer.ContactName).Titled(SharedResource.ContactName).SetWidth(250);
419+
420+
/* Adding "Customer.Country" hidden column: */
421+
c.Add(o => o.Customer.Country, true);
422+
423+
/* Adding "Freight" column: */
424+
c.Add(o => o.Freight)
425+
.Titled(SharedResource.Freight)
426+
.Format("{0:F}");
427+
428+
/* Adding "Vip customer" column: */
429+
c.Add(o => o.Customer.IsVip).Titled(SharedResource.IsVip).SetWidth(70).Css("hidden-xs") //hide on phones
430+
.RenderValueAs(o => o.Customer.IsVip ? Strings.BoolTrueLabel : Strings.BoolFalseLabel);
431+
};
432+
401433
public static Action<IGridColumnCollection<Order>, string, IEnumerable<SelectItem>,
402434
Func<object[], bool, bool, bool, bool, Task<IGrid>>>
403435
OrderColumnsAllFeatures = (c, path, list, subgrids) =>

GridBlazorClientSide.Client/Pages/GridButtons.razor renamed to GridBlazorClientSide.Client/Pages/Embedded.razor

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/gridbuttons"
1+
@page "/embedded"
22
@using GridBlazorClientSide.Client.ColumnCollections
33
@using GridBlazorClientSide.Shared.Models
44
@using Microsoft.Extensions.Primitives
@@ -10,7 +10,7 @@
1010
<h1>Grid Sample</h1>
1111

1212
<p>
13-
This page contains a grid with additional buttons
13+
This page contains a grid with embedded components started by additional buttons on the header and rows
1414
</p>
1515

1616
<p>
@@ -42,7 +42,7 @@ else
4242
var query = new QueryDictionary<StringValues>();
4343

4444
string url = NavigationManager.BaseUri + "api/SampleData/GetOrdersGrid";
45-
var client = new GridClient<Order>(HttpClient, url, query, false, "ordersGrid", ColumnCollections.OrderColumns, locale)
45+
var client = new GridClient<Order>(HttpClient, url, query, false, "ordersGrid", ColumnCollections.OrderColumnsWithButttonComponents, locale)
4646
.Sortable()
4747
.Filterable()
4848
.SetStriped(true)

‎GridBlazorClientSide.Client/Pages/ShipperButtonCell.razor‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@using GridBlazorClientSide.Shared.Models
2+
@using GridShared.Columns
3+
@implements ICustomGridComponent<Order>
4+
5+
@if (Item.Shipper != null)
6+
{
7+
<button class='btn btn-sm btn-primary' @onclick="MyClickHandler">View Shipper</button>
8+
}
9+
10+
@code {
11+
12+
[CascadingParameter(Name = "GridComponent")]
13+
public GridComponent<Order> GridComponent { get; set; }
14+
15+
[Parameter]
16+
public Order Item { get; set; }
17+
18+
private void MyClickHandler(MouseEventArgs e)
19+
{
20+
GridComponent.StartFormComponent<ShipperComponent>("Shipper Information", null, null, Item.Shipper);
21+
}
22+
}

‎GridBlazorClientSide.Client/Pages/ShipperComponent.razor‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@using GridBlazor.Resources
2+
@using GridBlazorClientSide.Shared.Models
3+
4+
5+
<div class="form-horizontal">
6+
<div class="form-group">
7+
<label for="OrderID" class="control-label col-md-2">ShipperID: </label>
8+
<div class="col-md-5">
9+
<input id="ShipperID" class="form-control" readonly="readonly" value="@_shipper.ShipperID" />
10+
</div>
11+
</div>
12+
13+
<div class="form-group">
14+
<label for="RequiredDate" class="control-label col-md-2">CompanyName: </label>
15+
<div class="col-md-5">
16+
<input id="CompanyName" class="form-control" readonly="readonly" value="@_shipper.CompanyName" />
17+
</div>
18+
</div>
19+
20+
<div class="form-group">
21+
<label for="ShippedDate" class="control-label col-md-2">Phone: </label>
22+
<div class="col-md-5">
23+
<input id="Phone" class="form-control" readonly="readonly" value="@_shipper.Phone" />
24+
</div>
25+
</div>
26+
27+
<div class="form-group">
28+
<div class="col-md-5">
29+
<button type="button" class="btn btn-primary btn-md" @onclick="BackButtonClicked">@Strings.Back</button>
30+
</div>
31+
</div>
32+
</div>
33+
34+
@code
35+
{
36+
private Shipper _shipper;
37+
38+
[CascadingParameter(Name = "GridComponent")]
39+
protected GridComponent<Order> GridComponent { get; set; }
40+
41+
[Parameter]
42+
public object Object { get; set; }
43+
44+
protected override void OnParametersSet()
45+
{
46+
_shipper = (Shipper)Object;
47+
}
48+
49+
protected void BackButtonClicked()
50+
{
51+
GridComponent.BackButton();
52+
}
53+
}

‎GridBlazorClientSide.Client/Shared/NavMenu.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@
9898
</NavLink>
9999
</li>
100100
<li class="nav-item px-3">
101-
<NavLink class="nav-link" href="gridbuttons">
102-
<span class="oi oi-list-rich" aria-hidden="true"></span> Grid Buttons
101+
<NavLink class="nav-link" href="embedded">
102+
<span class="oi oi-list-rich" aria-hidden="true"></span> Embedded
103103
</NavLink>
104104
</li>
105105
<li class="nav-item px-3">

GridBlazorOData.Client/Pages/GridButtons.razor renamed to GridBlazorOData.Client/Pages/Embedded.razor

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/gridbuttons"
1+
@page "/embedded"
22
@using GridBlazor.Resources
33
@using GridBlazorOData.Client.Resources
44
@using GridBlazorOData.Shared.Models
@@ -11,7 +11,7 @@
1111
<h1>Grid Sample</h1>
1212

1313
<p>
14-
This page contains a grid with additional buttons
14+
This page contains a grid with embedded components started by additional buttons on the header and rows
1515
</p>
1616

1717
<p>
@@ -44,6 +44,7 @@ else
4444

4545
Action<IGridColumnCollection<Order>> columns = c =>
4646
{
47+
c.Add().Encoded(false).Sanitized(false).RenderComponentAs<ShipperButtonCell>();
4748
c.Add(o => o.OrderID).Titled(SharedResource.Number).SetWidth(100);
4849
c.Add(o => o.OrderDate, "OrderCustomDate").Titled(SharedResource.OrderCustomDate).SetWidth(120).RenderComponentAs<TooltipCell>();
4950
c.Add(o => o.Customer.CompanyName).Titled(SharedResource.CompanyName).SetWidth(250);
@@ -54,14 +55,15 @@ else
5455
};
5556

5657
string url = NavigationManager.BaseUri + "odata/Orders";
57-
var client = new GridODataClient<Order>(HttpClient, url, query, false, "ordersGrid", columns, 10, locale)
58-
.Sortable()
59-
.Filterable()
60-
.SetStriped(true)
61-
.WithMultipleFilters()
62-
.WithGridItemsCount()
63-
.AddButtonComponent<EmployeeComponent>("Employees", "Employee's Grid")
64-
.AddButtonComponent<CustomerComponent>("Customers", "Curstomer's Grid");
58+
var client = new GridODataClient<Order>(HttpClient, url, query, false, "ordersGrid", columns, 10, locale,
59+
new List<string> { "Shipper" })
60+
.Sortable()
61+
.Filterable()
62+
.SetStriped(true)
63+
.WithMultipleFilters()
64+
.WithGridItemsCount()
65+
.AddButtonComponent<EmployeeComponent>("Employees", "Employee's Grid")
66+
.AddButtonComponent<CustomerComponent>("Customers", "Curstomer's Grid");
6567

6668
_grid = client.Grid;
6769
// Set new items to grid

‎GridBlazorOData.Client/Pages/ShipperButtonCell.razor‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@using GridBlazorOData.Shared.Models
2+
@using GridShared.Columns
3+
@implements ICustomGridComponent<Order>
4+
5+
@if (Item.Shipper != null)
6+
{
7+
<button class='btn btn-sm btn-primary' @onclick="MyClickHandler">View Shipper</button>
8+
}
9+
10+
@code {
11+
12+
[CascadingParameter(Name = "GridComponent")]
13+
public GridComponent<Order> GridComponent { get; set; }
14+
15+
[Parameter]
16+
public Order Item { get; set; }
17+
18+
private void MyClickHandler(MouseEventArgs e)
19+
{
20+
GridComponent.StartFormComponent<ShipperComponent>("Shipper Information", null, null, Item.Shipper);
21+
}
22+
}

‎GridBlazorOData.Client/Pages/ShipperComponent.razor‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@using GridBlazor.Resources
2+
@using GridBlazorOData.Shared.Models
3+
4+
5+
<div class="form-horizontal">
6+
<div class="form-group">
7+
<label for="OrderID" class="control-label col-md-2">ShipperID: </label>
8+
<div class="col-md-5">
9+
<input id="ShipperID" class="form-control" readonly="readonly" value="@_shipper.ShipperID" />
10+
</div>
11+
</div>
12+
13+
<div class="form-group">
14+
<label for="RequiredDate" class="control-label col-md-2">CompanyName: </label>
15+
<div class="col-md-5">
16+
<input id="CompanyName" class="form-control" readonly="readonly" value="@_shipper.CompanyName" />
17+
</div>
18+
</div>
19+
20+
<div class="form-group">
21+
<label for="ShippedDate" class="control-label col-md-2">Phone: </label>
22+
<div class="col-md-5">
23+
<input id="Phone" class="form-control" readonly="readonly" value="@_shipper.Phone" />
24+
</div>
25+
</div>
26+
27+
<div class="form-group">
28+
<div class="col-md-5">
29+
<button type="button" class="btn btn-primary btn-md" @onclick="BackButtonClicked">@Strings.Back</button>
30+
</div>
31+
</div>
32+
</div>
33+
34+
@code
35+
{
36+
private Shipper _shipper;
37+
38+
[CascadingParameter(Name = "GridComponent")]
39+
protected GridComponent<Order> GridComponent { get; set; }
40+
41+
[Parameter]
42+
public object Object { get; set; }
43+
44+
protected override void OnParametersSet()
45+
{
46+
_shipper = (Shipper)Object;
47+
}
48+
49+
protected void BackButtonClicked()
50+
{
51+
GridComponent.BackButton();
52+
}
53+
}

0 commit comments

Comments
 (0)