Skip to content

Commit

Permalink
#371 Triggering of after-binding-logic with @Bind:after instead of cu…
Browse files Browse the repository at this point in the history 
…stom ValueChanged handler
  • Loading branch information
@hakenr
hakenr committed Jan 7, 2024
1 parent 1f948cd commit ccd64b2
Show file tree
Hide file tree
Showing 9 changed files with 332 additions and 314 deletions.
153 changes: 75 additions & 78 deletions Havit.Blazor.Documentation/Pages/Components/HxFilterFormDoc/HxFilterForm_Demo.razor
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,90 @@
<HxFilterForm @ref="filterForm" Model="@model" ModelChanged="HandleModelChanged" TModel="FormModel" OnChipsUpdated="HandleChipsUpdated">
<DataAnnotationsValidator />
<ValidationSummary />

<h2>Filter</h2>

<HxInputText Label="Text1" @bind-Value="@context.Text1" />
<HxInputText Label="Text2" @bind-Value="@context.Text2">
<ChipTemplate>
Haha! There is also a chip with custom template! (value @context.Text2)
</ChipTemplate>
</HxInputText>
<HxInputNumber Label="Number 1" @bind-Value="@context.Number1" />

<HxSubmit Text="Apply" Color="ThemeColor.Primary" />

<h2>Values</h2>

<h3>Values in filter</h3>
<ul>
<li>Text1: @context.Text1</li>
<li>Text2: @context.Text2</li>
<li>Number1: @context.Number1</li>
</ul>
<HxFilterForm @ref="filterForm"
@bind-Model="@model"
@bind-Model:after="HandleModelChanged"
OnChipsUpdated="HandleChipsUpdated">
<DataAnnotationsValidator />
<ValidationSummary />

<h2>Filter</h2>

<HxInputText Label="Text1" @bind-Value="@context.Text1" />
<HxInputText Label="Text2" @bind-Value="@context.Text2">
<ChipTemplate>
Haha! There is also a chip with custom template! (value @context.Text2)
</ChipTemplate>
</HxInputText>
<HxInputNumber Label="Number 1" @bind-Value="@context.Number1" />

<HxSubmit Text="Apply" Color="ThemeColor.Primary" />

<h2>Values</h2>

<h3>Values in filter</h3>
<ul>
<li>Text1: @context.Text1</li>
<li>Text2: @context.Text2</li>
<li>Number1: @context.Number1</li>
</ul>
</HxFilterForm>

<h3>Values in model</h3>
<ul>
<li>Text1: @model.Text1</li>
<li>Text2: @model.Text2</li>
<li>Text3: @model.Number1</li>
<li>Text1: @model.Text1</li>
<li>Text2: @model.Text2</li>
<li>Text3: @model.Number1</li>
</ul>

<h4>Chips</h4>

<HxChipList Chips="@chips" OnChipRemoveClick="HandleChipRemoveClick" />

<HxGrid @ref="myGrid" TItem="string" DataProvider="@GridDataProvider">
<Columns>
<HxGridColumn TItem="string" HeaderText="Value" ItemTextSelector="(item) => item" />
</Columns>
<Columns>
<HxGridColumn TItem="string" HeaderText="Value" ItemTextSelector="(item) => item" />
</Columns>
</HxGrid>

@code {
protected FormModel model = new FormModel { Text1 = "initial value" };
private HxGrid<string> myGrid;

private HxFilterForm<FormModel> filterForm;
private ChipItem[] chips;

private void HandleChipsUpdated(ChipItem[] chips)
{
this.chips = chips;
}

private async Task HandleChipRemoveClick(ChipItem chipToRemove)
{
await filterForm.RemoveChipAsync(chipToRemove);
}

#region Nested class FormModel
public class FormModel : ICloneable
{
[Required]
[MaxLength(20)]
public string Text1 { get; set; }

public string Text2 { get; set; }

public int Number1 { get; set; } = 5;

public object Clone() => MemberwiseClone();
}
#endregion

private async Task HandleModelChanged(FormModel newModel)
{
model = newModel;
//StateHasChanged();
await myGrid.RefreshDataAsync();
}

private async Task<GridDataProviderResult<string>> GridDataProvider(GridDataProviderRequest<string> request)
{
await Task.Delay(3000); // simulate server call
var stringValues = new List<string>();
stringValues.Add(model.Text1);
stringValues.Add(model.Text2);
stringValues.Add(model.Number1.ToString());
return request.ApplyTo(stringValues);
}
protected FormModel model = new FormModel { Text1 = "initial value" };
private HxGrid<string> myGrid;
private HxFilterForm<FormModel> filterForm;
private ChipItem[] chips;

private void HandleChipsUpdated(ChipItem[] chips)
{
this.chips = chips;
}

private async Task HandleChipRemoveClick(ChipItem chipToRemove)
{
await filterForm.RemoveChipAsync(chipToRemove);
}

private async Task HandleModelChanged()
{
await myGrid.RefreshDataAsync();
}

private async Task<GridDataProviderResult<string>> GridDataProvider(GridDataProviderRequest<string> request)
{
await Task.Delay(3000); // simulate server call
var stringValues = new List<string>();
stringValues.Add(model.Text1);
stringValues.Add(model.Text2);
stringValues.Add(model.Number1.ToString());
return request.ApplyTo(stringValues);
}

public class FormModel : ICloneable
{
[Required, MaxLength(20)]
public string Text1 { get; set; }

public string Text2 { get; set; }

public int Number1 { get; set; } = 5;

public object Clone() => MemberwiseClone();
}
}
9 changes: 3 additions & 6 deletions Havit.Blazor.Documentation/Pages/Components/HxGridDoc/HxGrid_Demo_InlineEditing.razor
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<HxGrid SelectedDataItem="selectedDataItem"
SelectedDataItemChanged="HandleSelectedDataItemChanged"
TItem="EditableCultureInfo"
<HxGrid @bind-SelectedDataItem="selectedDataItem"
@bind-SelectedDataItem:after="HandleSelectedDataItemChanged"
Responsive="true"
DataProvider="ClientSideProcessingDataProvider"
PageSize="10">
Expand Down Expand Up @@ -71,16 +70,14 @@
return Task.FromResult(request.ApplyTo(localEditableCultureInfos));
}

private async Task HandleSelectedDataItemChanged(EditableCultureInfo newSelectedDataItem)
private async Task HandleSelectedDataItemChanged()
{
if (selectedDataItem != null)
{
// TODO: add your logic to save item changes here, the item which was selected (edited) is in selectedDataItem
await Task.Delay(200); // simulates API call (saving changes itself)
Console.WriteLine("Saving... " + selectedDataItem);
}

selectedDataItem = newSelectedDataItem;
}

private record EditableCultureInfo
Expand Down
107 changes: 0 additions & 107 deletions Havit.Blazor.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Demo.razor
View file

This file was deleted.

11 changes: 8 additions & 3 deletions ...stLayoutDoc/HxListLayout_Demo_Title.razor → ...stLayoutDoc/HxListLayout_Demo_Basic.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
<HxButton Text="New item" Color="ThemeColor.Primary" Icon="BootstrapIcon.PlusLg" OnClick="NewItemClicked" />
</CommandsTemplate>
<DataTemplate>
<HxGrid @ref="gridComponent" ContentNavigationMode="GridContentNavigationMode.Pagination" Responsive="true" TItem="EditableCultureInfo" PageSize="10" DataProvider="LoadDataItems" SelectedDataItem="currentItem" SelectedDataItemChanged="HandleSelectedDataItemChanged">
<HxGrid @ref="gridComponent"
ContentNavigationMode="GridContentNavigationMode.Pagination"
Responsive="true"
PageSize="10"
DataProvider="LoadDataItems"
@bind-SelectedDataItem="currentItem"
@bind-SelectedDataItem:after="HandleSelectedDataItemChanged">
<Columns>
<HxGridColumn HeaderText="LCID" ItemTextSelector="@(item => item.LCID.ToString())" SortKeySelector="@(item => item.LCID)" IsDefaultSortColumn="true" />
<HxGridColumn HeaderText="DisplayName" ItemTextSelector="@(item => item.DisplayName)" SortKeySelector="@(item => item.DisplayName)" />
Expand Down Expand Up @@ -49,9 +55,8 @@
await gridComponent.RefreshDataAsync();
}

private Task HandleSelectedDataItemChanged(EditableCultureInfo selection)
private Task HandleSelectedDataItemChanged()
{
currentItem = selection;
// await dataItemEditComponent.ShowAsync();
return Task.CompletedTask;
}
Expand Down
Loading

0 comments on commit ccd64b2

Please sign in to comment.