We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Detect NavLink (Nested in Card) on content change

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;

    }


}


3 Replies 1 reply marked as answer

JO Jose December 15, 2022 09:44 PM UTC

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



JO Jose December 15, 2022 09:59 PM UTC

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 




Marked as answer

VJ Vinitha Jeyakumar Syncfusion Team December 16, 2022 12:29 PM UTC

Hi Jose,

Can you please share some more details about your reported issue for our better understanding,

  • Your package version.
  • Issue replicating video illustration.
  • Please share us with the simple issue reproducing runnable sample to further validate on our end.

Regards,
Vinitha

Loader.
Live Chat Icon For mobile
Up arrow icon