BoldDeskWe are launching BoldDesk on Product Hunt soon. Learn more & follow us.
Was not sure where to include this, but I have a InPlaceEditor component that is binded to data in my backend. When the content changes, the backend is updated, as is the content in the Editor. However, in the same body as this component is a Card which contains a nav link, which contains a span. I would like the string in the span to change when the content in the Editor changes as well. I should note that this card is in a separate razor file, a file that itself contains the main body (the editor and data grid). I should also note that I do get what I wish when I refresh the page, but it does not do it automatically when the editor value changes.
BODY CONTENT:
<SfInPlaceEditor ValueChanged="@ValueChangeHandler" Value="@TableName" TValue="string" Mode="RenderMode.Inline" EditableOn="EditableType.EditIconClick" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Text" ShowButtons="true" Disabled="false" SubmitOnEnter="true">
<EditorComponent>
<SfTextBox Value="@TableName" Placeholder="Enter a new Table Name"> </SfTextBox>
</EditorComponent>
</SfInPlaceEditor>
@code {
IEnumerable<ConfigurationTableNameDTO>? tableNameList;
ODLimitManager.Shared.ConfigLayout configLayout;
public IEditorSettings LevelEditParams = new NumericEditCellParams { Params = new NumericTextBoxModel<object>() { ShowClearButton = true, ShowSpinButton = false } };
protected override async Task OnInitializedAsync()
{
tableNameList = await Http.GetFromJsonAsync<IEnumerable<ConfigurationTableNameDTO>>("https://localhost:7120/ConfigurationTableName");
string tableName = tableNameList.Where(x => x.TableType == "BPCode").Select(x => x.TableName).FirstOrDefault();
TableName = tableName;
}
private async void ValueChangeHandler(String args)
{
var tableName = tableNameList.Where(x => x.TableType == "BPCode").FirstOrDefault();
if (tableName != null)
{
tableName.TableName = args;
}
TableName = args;
await Http.PutAsJsonAsync<ConfigurationTableNameDTO>("https://localhost:7120/ConfigurationTableName", tableName);
}
PARENT CONTENT:
<SfCard>
<div class="row">
<div class="col-md-2 divider">
<ul class="nav flex-column">
<li class="nav-item-Config listMargins">
<NavLink @bind-Value="@BPTableName" class="nav-link configFont" rel='nofollow' href="configurations/bpcodes">
<span class="" aria-hidden="true"></span> @BPTableName
</NavLink>
</li>
<li class="nav-item-Config listMargins">
<NavLink class="nav-link configFont" rel='nofollow' href="configurations/decimalamountcriteria">
<span class="" aria-hidden="true"></span> @DecimalTableName
</NavLink>
</li>
<li class="nav-item-Config listMargins">
<NavLink class="nav-link configFont" rel='nofollow' href="configurations/integercountcriteria">
<span class="" aria-hidden="true"></span> @IntegerTableName
</NavLink>
</li>
<li class="nav-item-Config listMargins">
<NavLink class="nav-link configFont" rel='nofollow' href="configurations/loantypes">
<span class="" aria-hidden="true"></span> @LoanTableName
</NavLink>
</li>
<li class="nav-item-Config listMargins">
<NavLink class="nav-link configFont" rel='nofollow' href="configurations/transactioncodes">
<span class="" aria-hidden="true"></span> @TranCodeTableName
</NavLink>
</li>
</ul>
</div>
<div class="col-md-10">
@Body
</div>
</div>
</SfCard>
@code {
IEnumerable<ConfigurationTableNameDTO>? tableNameList;
string? TableName;
string? BPTableName;
string? TranCodeTableName;
string? LoanTableName;
string? IntegerTableName;
string? DecimalTableName;
ODLimitManager.Pages.Configuration.BPCodePage.Index index;
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InvokeVoidAsync("methods.keepActiveConfig");
}
nav.LocationChanged += (o, e) =>
{
if (e.Location.Contains("configuration"))
JSRuntime.InvokeVoidAsync("methods.keepActiveConfig");
};
}
protected override async Task OnInitializedAsync()
{
tableNameList = await Http.GetFromJsonAsync<IEnumerable<ConfigurationTableNameDTO>>("https://localhost:7120/ConfigurationTableName");
//geting all of the table names
string tableNameBP = tableNameList.Where(x => x.TableType == "BPCode").Select(x => x.TableName).FirstOrDefault();
string tableNameTC = tableNameList.Where(x => x.TableType == "TranCode").Select(x => x.TableName).FirstOrDefault();
string tableNameLoan = tableNameList.Where(x => x.TableType == "Loan").Select(x => x.TableName).FirstOrDefault();
string tableNameInteger = tableNameList.Where(x => x.TableType == "IntCountCrit").Select(x => x.TableName).FirstOrDefault();
string tableNameDecimal = tableNameList.Where(x => x.TableType == "DecAmountCrit").Select(x => x.TableName).FirstOrDefault();
//assigning table names to be displayed on the nav menu
BPTableName = tableNameBP;
TranCodeTableName = tableNameTC;
LoanTableName = tableNameLoan;
IntegerTableName = tableNameInteger;
DecimalTableName = tableNameDecimal;
}
}
I hope the question makes sense! I decided to leave out the libraies i am using etc to make the code more clean and clear
Update: In the Main Content section, I included
uriHelper.NavigateTo(uriHelper.Uri, forceLoad: true);
into the last line of the ValueChangedHandler method. Of course this was after I injected NavigationManager class into the razor