Content is refreshed when I change the tab

Question

Hi. I have a complex scenario in Blazor and I need your help. I created a tabcontrol that will have an editable datagrid inside each tab. Tabs are created dinamically from a database table on the OnInitialized method. Each tab will have an editable datagrid with similar data. I must be able to edit the data inside the datagrids with different changes for each tab, then pressing a button will send the results of all the contents back to the database.

Problems I'm facing at this point:

a) How to create the datagrids inside the tabs.

b) How to preserve the content of the tabs when clicking a different tab.

To better understanding: Say I capture some changes in the datagrid of the first tab. Then I move to the second tab to capture some other changes. I then go back to the first tab and I must see the first datagrid in the same state as it was when I moved to the second tab. I I go to the second tab, it must preserve the state of the second datagrid. Same for other tabs created.

Currently, when I create content in a tab, this content is created dinamically so the content is refreshed in each tab click. This must not be the case, the content must be preserved so I keep the different changes for each datagrid. I think it's just tabcontrol settings, but I don't know how. I would appreciate any idea to come to this result. Thanks.

Satheesh Kumar Balasubramanian · Accepted Answer

Hi Juan,

Thanks for your update.

We have validated your reported query at our end and prepared a sample using DataGrid component with EditSettings feature and RenderTreeBuilder concept inside Tabs component. Also, we suggest you to use ContentLoad.Init to the property LoadOn to achieve your requirement. Please find the sample in the following link.

Sample: https://www.syncfusion.com/downloads/support/forum/161707/ze/TabComponent995013791

Comp.cs:

public class Comp<T> : SfGrid<T>

{

public async Task RowSelected(Syncfusion.Blazor.Grids.RowSelectEventArgs<T> args)

{

//perform your action here

}

//take Grid instance

private SfGrid<T> GridRef { get; set; }

protected override void BuildRenderTree(RenderTreeBuilder builder)

{

builder.OpenComponent<SfGrid<T>>(0);

builder.AddAttribute(1, nameof(AllowPaging), true);

builder.AddAttribute(2, nameof(DataSource), DataSource);

builder.AddAttribute(3, "ChildContent", new RenderFragment(inner =>

{

//page settings

inner.OpenComponent<GridPageSettings>(5);

inner.AddAttribute(6, nameof(GridPageSettings.PageSize), Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Int32>(10));

inner.CloseComponent();

//editsettings

inner.OpenComponent<GridEditSettings>(8);

inner.AddAttribute(9,"AllowAdding",true);

inner.AddAttribute(10, nameof(GridEditSettings.AllowDeleting), Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<bool>(true));

inner.AddAttribute(11, nameof(GridEditSettings.AllowEditing), Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Boolean>(true));

inner.CloseComponent();

. .

//grid events

inner.OpenComponent<GridEvents<T>>(31);

inner.AddAttribute<Syncfusion.Blazor.Grids.RowSelectEventArgs<T>>(32, "RowSelected",

EventCallback.Factory.Create<Syncfusion.Blazor.Grids.RowSelectEventArgs<T>>(this, RowSelected));

inner.CloseComponent();

}));

builder.AddAttribute(34, nameof(Toolbar), new List<string>() {"Add", "Edit", "Cancel", "Update" });

builder.AddComponentReferenceCapture(35, inst => { GridRef = (SfGrid<T>)inst; });

builder.CloseComponent();

}

We have extended the SfGrid<T> class and rendered the Comp Grid with Grid edit setting, page settings and Grid events.

Index.razor:

@foreach (TabData Item in TabItems)

{

<div>@(Item.Header)</div>

</HeaderTemplate>

</ContentTemplate>

</TabItem>

}

</TabItems>

</SfTab>

Kindly try the above sample and if the issue still persists at your end kindly share the below details to serve you better?

Replicate the issue in the above sample

Share issue replicating sample if possible
Share tab and grid related code snippets
Share the issue depicting image/video

Regards,

Satheesh Kumar B

@(Item.Header)

} Kindly try the above sample and if the issue still persists at your end kindly share the below details to serve you better? Replicate the issue in the above sample Share issue replicating sample if possible Share tab and grid related code snippets Share the issue depicting image/video Regards, Satheesh Kumar B

Satheesh Kumar Balasubramanian · Answer

Hi Juan,

Greetings from Syncfusion Support..!

We have validated your reported query at our end and suggest you to use ContentLoad.Demand to the property LoadOn to achieve your requirement. We have prepared a sample for your reference which can be downloaded from the following link.

Sample: https://www.syncfusion.com/downloads/support/forum/161707/ze/TabComponent-276723607

Code snippet:

.....

</SfTab>

UG: https://blazor.syncfusion.com/documentation/tabs/content-render-modes/

Kindly try the above sample and get back to us, if you need further assistance.

Regards,

Satheesh Kumar B

Juan Pablo · Answer

Thanks for your response. But, sorry, this example is not the scenario I need to see. First, if I run your example. I see two tabs. If I edit a row and then move to the second tab I see the same change in the second grid. Weird, because they must be independant (two separated instances). I will ellaborate a bit about the case:

1) The tabs must build dinamically. That's it, I don't know beforehand how many tabs (called "sections") to build, I just recover records from the database, then I build the tabs on the fly.

2) Each tab has one datagrid, also build dinamically. The columns of the grid are fixed, following a model (called "coverages"). But the records come from the database, So, there is a set of coverages for each section (a one to many relationship, in the database).

3) Each datagrid has a special behavior. The first column is of Type=Checkbox. The requirement says that if a user click a Checkbox, it must open the row for editing. Clicking another checkbox opens another row for editing without deselecting the previous one.

4) Each datagrid is independant. Clicking another tab must present a totally different grid instance. If I edit something in one grid and then I click a tab, edit another grid and click the previous tab, I must be able to see the respective changes. Ideally, the tab content must not be refreshed. I don't know if ContentLoad.Demand is the best option within this scenario.

I have many problems with this requirement. Obviously, it would be easier to create the datagrids in the blazor part, with tags. But I'm creating everything dynamically, because I don't know how many tabs I must build. After that, creating the grids is currently a nightmare, because I have to create them through a RenderTreeBuilder. And then I don't know how to attach the behaviour to them, because I haven't found documentation about how to create and use the GridEditSettings within the RenderTreeBuilder.

I would appreciate any insight about this problematic. I'm very urged about this requirement, with too few time to perform this.

Juan Pablo · Answer

Thanks for your valuable feedback, it's enlighting. It will serve a lot for me to improve my code. Requirements have changed somewhat. For simplicity, and because those changes are only about the grid, I'll open a new thread. Thank you for your wisdom and efforts.

Nevitha Ravi · Answer

Hi Juan, 

You are most welcome..! please get back to us if you need any further assistance. 

Regards, 
Nevitha