How to reload a List in main page from Dialog component
Hello I'm not sure if this is where I need to ask but I've scoured the web trying to find the answer. I'm using the Dialog component and have it set up like this explanation: https://www.syncfusion.com/forums/171494/custom-dialog-component-with-dynamic-content
It works beautifully which is awesome but I'm having an issue where I need it to repopulate a list from the page the button is on that opens the Dialog.
In my main page it uses this to display the Dialog:
this.DialogServices.Open(new DialogOptions()
{
Content = @<NewCommittees ChurchID="ChurchID" />,
IsModal = true,
ShowCloseIcon = true
});
In the NewCommittees page it adds a new committee to my DB. What I need it to do is then reload the list of Committees on my main committee page. The only way I have figured out to do this is to force a reload via Navigation Manager. This is not preferred as I'm using the tab manager on this page so would rather not have people go back through tabs. Any help is appreciated.
| @using Dialog.Components
@inject DialogService DialogServices
<button class="e-btn" @onclick="@SignUpDialog"> Add </button>
<table>
<thead>
<tr>
<th width="200px">Column 1</th>
<th width="200px">Column 2</th>
<th width="200px">Column 3</th>
</tr>
</thead>
@foreach (var Order in Orders)
{
<tr @key="@Order">
<td>@Order.OrderID</td>
<td>@Order.CustomerID</td>
<td>@Order.Freight</td>
</tr>
}
</table>
@code {
public Order OrdersField { get; set; } = new Order();
public List<TestTable> TestTbl = new List<TestTable>();
public TestTable TestTblField { get; set; } = new TestTable();
public List<Order> Orders = new List<Order>()
{
new Order{OrderID= 1234, CustomerID= "testing", Freight = "freight"},
new Order{OrderID= 1234, CustomerID= "testing", Freight = "freight"},
new Order{OrderID= 1234, CustomerID= "testing", Freight = "freight"},
};
public void UpdateData(Order data)
{
Orders.Add(data);
StateHasChanged();
}
public void Close()
{
this.DialogServices.Open(new DialogOptions()
{
Visibility = false,
});
}
private void SignUpDialog()
{
this.DialogServices.Open(new DialogOptions()
{
Header = "Sign Up",
Content = @<CascadingValue Value="@this"><SignUp /></CascadingValue>, // Fragment loaded from external component
IsModal = true,
ShowCloseIcon = true,
Visibility = true,
FooterTemplate = @<button> Ok </button>
});
}
} |
| <label for="column-one" class="col-sm-2 col-form-label">
Column 1
</label>
<div class="col-sm-10">
<input type="text" id="column-one" class="form-control" placeholder="Column One" @bind="@TestTblField.Column1" />
</div>
<label for="column-two" class="col-sm-2 col-form-label">
Column 2
</label>
<div class="col-sm-10">
<input type="text" id="column-two" class="form-control" placeholder="Column Two" @bind="@TestTblField.Column2" />
</div>
<label for="column-three" class="col-sm-2 col-form-label">
Column 3
</label>
<div class="col-sm-10">
<input type="text" id="column-three" class="form-control" placeholder="Column Three" @bind="@TestTblField.Column3" />
</div>
<button id="btn-addtable" class="btn btn-primary" @onclick="AddTable">Add Row</button>
@code {
[CascadingParameter]
public Index indexObj { get; set; }
public Order OrdersField { get; set; } = new Order();
public List<TestTable> TestTbl = new List<TestTable>();
public TestTable TestTblField { get; set; } = new TestTable();
public List<Order> Orders = new List<Order>()
{
new Order{OrderID= 1234, CustomerID= "testing", Freight = "freight"},
new Order{OrderID= 1234, CustomerID= "testing", Freight = "freight"},
new Order{OrderID= 1234, CustomerID= "testing", Freight = "freight"},
};
public void AddTable()
{
indexObj.UpdateData(new Order()
{
OrderID = TestTblField.Column1,
CustomerID = TestTblField.Column2,
Freight = TestTblField.Column3,
});
indexObj.Close();
}
|
- 2 Replies
- 2 Participants
-
AN Andrew
- Jan 6, 2022 07:40 PM UTC
- Jan 13, 2022 02:20 PM UTC
