RadzenItemTab doesn't update style when linked to data source till second update

Please help me understand timing of updates to the style for itemtab...

description of function i want:
the functionality I want is to change the color or icon or anything about the currently displayed tab.
in this case, i have list of staff and when at least one staff is marked as excluded, then i want to highlight that tab as having someone excluded...

what i did:
i have the style attribute linked o the source data.
If the condition is true on the data, i change the style and use invoke for statehaschanged.

when a change to the child component occurs it doesn't work on first change

...the style only seems to change after second change...and in effect it's like the change is using stale data, yet i can see the data displayed
however, if I change to different tab or just click the current tab, the style does update

i know that the data is changed, because i display it, so it shows the data...but the control didn't get the update!!!!!

I know you can create ref to control, i thought i might be able to dynamically refresh it, but no luck there.

Any ideas what i could do to insure the style of the RadzenTabItem gets refreshed when the child component data for the style is changed?

    @foreach (var dept in ((MyService)myservice).SourceData)
    <RadzenTabsItem Text="@dept.dept" Style="@dept.style" >
        @dept.updated     <br />
        @dept.style       <br />
        @dept.description <br/>

        @foreach (var staff in ((MyService)myservice).SourceStaff.Where(a => a.dept == dept.dept))
            <DeptReminderEdit DeptSource="@dept" StaffSource="@staff"></DeptReminderEdit>


Try to execute StateHasChanged().

the picture is the parent component that is called by the child where the change to data occured...
and so yes, I know about that and have done due dilligence to make that happen and it does work for the data displayed....like i said originally, ..but the control of the parent does not refresh...and that is a Radzen control...


here is where the the style here gets updated...when refreshed...but the control does not...

a loom video showing issue

Hi @cglick,

We will try to handle this case in the next update (tomorrow).

1 Like

Turns out it just needs the Blazor @key attribute. Here is a working demo:

        @foreach (var tab in tabs)
            <RadzenTabsItem @key=@tab Text=@tab Style=@tab />

<RadzenButton Click=@OnClick />

@code {
    IList<string> tabs = new[] { "border: 1px solid red", "border: 1px solid green" };

    void OnClick()
        tabs[1] = "border: 1px solid blue";

yes i have used @key but i was having issue as it needed to be unique and that little example you provided there is what i was looking for...testing...

i'm sorry, but your example is not a mirror of my example and so it's not a valid comparison.

i have a service with the two different datasets...SourceData and SourceStaff.

@foreach (var dept in ((MyService)myservice).SourceData) <--- for the tabs
@foreach (var staff in ((MyService)myservice).SourceStaff.Where(a => a.dept == dept.dept)) <-- within each tab

for my custom control embedded inside the loop of staff...i pass both the sourcedata and sourcestaff data to the child control...

inside that control when the radzen checkbox is clicked...

it does the following...which updates the DeptSource, which is the reference to:

not out of the woods yet...

Did you try setting the @key attribute? It is the key to making it work. Considering the code you have pasted so far you can use @dept.style (if it is unique) or the index of the tab otherwise ...

<RadzenTabsItem @key=((MyService)myService).SourceData.IndexOf(dept) ...>

By the way the demo I posted behaves in the exact same way if you remove the @key attribute - it updates on the second click.

i set the key to @key=@dept and it didn't work. i will try this other method...

here is my service definition...

Perhaps you can use the same property as the Text - it is probably unique already? <RadzenTabsItem @key=@dept.dept ...>

roger will try that...

using your other example it didn't do it either...

If neither of those work we will need to reproduce the issue locally somehow. You can either modify my example so I can run it locally or send us a runnable version of your project to info@radzen.com.

my understanding of @key is that the data it is related to must change for it to fire...
in this case the dept.dept is not changing, but data inside of that dataset is...

i thought i could use a special unique field for this purpose , in other words, create a field that when i change the data , i then update the column with a new value which in effect tells this to be rerendered...

and so using that isn't going to work as far as i know..

Maybe try a combination of @dept.dept and @dept.style - they should be unique.

Anyway we will expose a method that forces the RadzenTabs component to render no matter what. It will probably help.

tried that and it almost worked....however, apparently the @key determines the order of the tabs.....
and so no matter what i associate it with that changes, when i make a change, the tab is rendered in different order now..and so i'm no longer on the right tab after clicking...no worky. sorry.

i sent you an email with my test project. Please take a look and see if you find a solution. Thank you so much.

Hi @cglick,

We just released a new version of Radzen.Blazor (2.15.12) which should handle this issue automatically. This means that if you upgrade your code should just work without using @key or manually invoking the newly introduced Reload method of the RadzenTabs component. You should keep the existing code of the RefreshMe method which invokes StateHasChanged of the page.

1 Like