How to Refersh Data in Tab Component

[KINS]

I have an Tab control which contain two Tab Item.

First Tab Item -----> Task List razor component which contain grid control

Second Tab Item -----> Task Entry razor Component which contain Task completion button.

I would like to know how to refresh Data in First Tab (Grid List) When I click "Task completion button" in Second Tab.

[Satheesh Kumar Balasubramanian]

Hi KINS,

You can use SfGrid refresh method to achieve your requirement.

Index.razor:

<SfTab>

    <TabItems>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Grid">

                </TabHeader>

            </ChildContent>

            <ContentTemplate>

                <SfGrid @ref="DefaultGrid" DataSource="@Orders" Height="100%" Width="100%">

                </SfGrid>

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Button">

                </TabHeader>

            </ChildContent>

            <ContentTemplate>

                <SfButton IsPrimary="true" @onclick="@AddRecord">ADD RECORD</SfButton>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

@code{

    public List<Order> Orders { get; set; }

    private SfGrid<Order> DefaultGrid;

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 5).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

    public void AddRecord()

    {

        Orders.Add(new Order() { OrderID = 1006, CustomerID = "BOB", Freight = 3.8, OrderDate = DateTime.Now });

        DefaultGrid.Refresh();

    }

}

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B

 

Attachment: TabComponent_11330d4b.zip

[KINS]

Thanks for reply..

Noted above code

But please see my actual requirement 

First Tab Item :_

It has separate component razor page (TaskList.razor) which contain grid control 

Second Tab Item:-

It has separate component razor page (TaskCompletion.razor) which contains date and buttons control.

I would like to refersh first Tab item component when I click button on second tab item component razor page

Hope its clear.

Please help ,its my top most urgent  requirement 

[Satheesh Kumar Balasubramanian]

Hi KINS,

You can use SfGrid Refresh method in SfTab Selecting to achieve your requirement.

Index.razor:

    <SfTab>

    <TabEvents Selecting="TabSelecting"></TabEvents>

    <TabItems>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Grid">

                </TabHeader>

            </ChildContent>

            <ContentTemplate>

                <TaskList @ref="DetailsGrid" Orders="ListData"></TaskList>

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Button">

                </TabHeader>

            </ChildContent>

            <ContentTemplate>

                <TaskCompletion @ref="DetailsButton" Orders="ListData"></TaskCompletion>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

@code{

    public TaskList DetailsGrid;

    public TaskCompletion DetailsButton;

    List<Order> ListData = new List<Order>();

    protected override void OnInitialized()

    {

        ListData = Enumerable.Range(1, 5).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

        }).ToList();

    }

    public void TabSelecting(SelectingEventArgs args)

    {

        if (args.SelectingIndex == 0)

        {

            DetailsGrid.DefaultGrid.Refresh();

        }

    }

}

Kindly try the attached sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible.

• Replicate the issue in attached sample or share simple issue replicating sample if possible
• Share all tab, TaskList and TaskCompletion related code snippets

Regards,

Satheesh Kumar B

Attachment: TabComponent_fed0a502.zip

[KINS]

Thanks for support.

I have added "ComponentName" in Tab in runtime. Please check below code and advise how to do above scenario in runtime

List<TabItem> TabData;

    SfTab Tab;

    private int SelectedTab = 0;

    public RenderFragment TabComp(Type type) => builder =>

    {

        builder.OpenComponent(0, type);

        builder.AddAttribute(0, "encryptParam", PageID);

        builder.CloseComponent();

    };

    public async Task AddTabItem(string ComponentName)

    {

        try

        {

            if (Tab.Items.Count <= 10)

            {

           Type type = null;

                    type = Type.GetType(ComponentName.Trim());

                    TabData = new List<TabItem>()

                    {

                        new TabItem() { Header = new TabHeader() { Text = PageName }, ContentTemplate = TabComp(type),Content=Tab.SelectedItem.ToString()}

                    };

                    index = Tab.Items.FindIndex(x => x.Header.Text == PageName);

                    SelectedTab = index;

                    if (index == -1)

                    {

                        await Tab.AddTab(TabData, Tab.Items.Count);

                        SelectedTab = Tab.Items.Count;

                    }

                    await jsRuntime.InvokeAsync<object>("hideDropdown");

            }

            else

            {

                await js.InvokeVoidAsync("LoadAlert", "Can not open more than Ten Tab Item"success");/*success/error/warning*/

            }

        }

        catch (Exception exception) { }

    }

[Ravikumar Venkatesan]

Hi KINS,

Thanks for the update.

We have validated your query “I have added ‘ComponentName’ in Tab in runtime. Please check the below code and advise how to do the above scenario in runtime” at our end. Based on your shared details we suspect that you want to render a tab item using RenderFragement on runtime. We have achieved it with help of the below-mentioned code.

[Index.razor]

    public RenderFragment TabComp(Type type) => builder =>

    {

        builder.OpenComponent(0, type);

        builder.AddAttribute(1, "Title", "Tab Item Added");

        builder.CloseComponent();

    };

 

    public async Task AddTabItem(Components componentValue)

    {

        try

        {

            if (Tab.Items.Count <= 10)

            {

                TabData = new List<TabItem>()

                    {

                        new TabItem() { Header = new TabHeader() { Text = componentValue.ComponentName }, ContentTemplate = TabComp(componentValue.ComponentType)}

                    };

 

                var index = Tab.Items.FindIndex(x => x.Header.Text == componentValue.ComponentName);

                SelectedTab = index;

                if (index == -1)

                {

                    await Tab.AddTab(TabData, Tab.Items.Count);

                    SelectedTab = Tab.Items.Count;

                }

            }

            else

            {

 

            }

        }

        catch (Exception exception) { }

   }

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: syncfusionblazortabsample_de777e4e.zip

[KINS]

Thanks Ravi,

Can you please add "TaskList" and "TaskCompletionList" component with Passing Parameter Data in runtime.

[KINS]

Awaiting for reply 

[KINS]

Is it possible to get reply today ??

[Ravikumar Venkatesan]

Hi KINS,

Thanks for the update.

We have validated your query “Can you please add "TaskList" and "TaskCompletionList" components with Passing Parameter Data in runtime” at our end. We have added the TaskList and TaskCompleteList components with passing parameter data in runtime as mentioned in the below code snippet.

[Index.razor]

@code{

    protected override async Task OnInitializedAsync()

    {

        ListData = Enumerable.Range(1, 5).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

        }).ToList();

        this.componentList = new List<Components>()

        {

            new Components() { ComponentName = "Task List", ComponentType = typeof(TaskList) },

            new Components() { ComponentName = "Task Completion", ComponentType = typeof(TaskCompletion) }

        };

        await base.OnInitializedAsync();

    }

    private Components componentValue { get; set; }

    public class Components

    {

        public string ComponentName { get; set; }

 

        public Type ComponentType { get; set; }

    }

 

    private List<Components> componentList { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            await AddTabItem();

        }

    }

 

    public RenderFragment TabComp(Type type) => builder =>

    {

        builder.OpenComponent(0, type);

        if (type.Name == "TaskList")

        {

            builder.AddAttribute(1, "Orders", global::Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Collections.Generic.List<TabComponent.Data.Order>>(ListData));

            builder.AddComponentReferenceCapture(2, (__value) => { DetailsGrid = (TabComponent.Pages.TaskList)__value; });

        } else if (type.Name == "TaskCompletion")

        {

            builder.AddAttribute(3, "Orders", global::Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Collections.Generic.List<TabComponent.Data.Order>>(ListData));

            builder.AddComponentReferenceCapture(4, (__value) => {DetailsButton = (TabComponent.Pages.TaskCompletion)__value;});

        }

        builder.CloseComponent();

    };

 

    public async Task AddTabItem()

    {

        try

        {

            if (Tab.Items.Count <= 10)

            {

                @foreach (Components componentValue in componentList)

                {

                    TabData = new List<TabItem>()

            {

                      new TabItem() { Header = new TabHeader() { Text = componentValue.ComponentName }, ContentTemplate = TabComp(componentValue.ComponentType)}

                };

                    var index = Tab.Items.FindIndex(x => x.Header.Text == componentValue.ComponentName);

                    SelectedTab = index;

                    if (index == -1)

                    {

                        await Tab.AddTab(TabData, Tab.Items.Count);

                        SelectedTab = Tab.Items.Count;

                    }

                }

            }

            else

            {

 

            }

        }

        catch (Exception exception) { }

    }

}

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: blazortabsample_254d0737.zip

[KINS]

Sorry for late reply...

I am getting below error message.Please check below code and attached file for your reference.

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

      Unhandled exception rendering component: Unable to set property 'encryptParam' on object of type 'ONEERP.Web.Pages.Design.SrfApprovedStatus'. The error was: Specified cast is not valid.

System.InvalidOperationException: Unable to set property 'encryptParam' on object of type 'ONEERP.Web.Pages.Design.SrfApprovedStatus'. The error was: Specified cast is not valid.

 ---> System.InvalidCastException: Specified cast is not valid.

   at Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter[SrfApprovedStatus,String](Action`2 setter, Object target, Object value)

   at Microsoft.AspNetCore.Components.Reflection.PropertySetter.SetValue(Object target, Object value)

   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|2_0(Object target, PropertySetter writer, String parameterName, Object value)

   --- End of inner exception stack trace ---

   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|2_0(Object target, PropertySetter writer, String parameterName, Object value)

   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)

   at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target)

   at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)

   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

Code :-

SfTab Tab;

    private int SelectedTab = 0;

    public RenderFragment TabComp(Type type) => builder =>

    {

        builder.OpenComponent(0, type);

        //builder.AddAttribute(0, "encryptParam", PageID);

        builder.AddAttribute(0, "encryptParam", global::Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Collections.Generic.List<DiloApproveDetails>>(authenticationService.UserApproveList));

        builder.CloseComponent();

    };

    public async Task NavigateToUrlAsync()

    {

        try

        {

            SessionManager.TaskFlag = false;

            SessionManager.ApprovalFlag = false;

            if (Tab.Items.Count <= 10)

            {

                Type type = null;

                if (string.IsNullOrEmpty(PageURL)) await js.InvokeVoidAsync("LoadAlert", "Please update Component Name", "warning");

                else

                {

                    type = Type.GetType(PageURL.Trim());

                    TabData = new List<TabItem>()

                {

                        new TabItem() { Header = new TabHeader() { Text = PageName }, ContentTemplate = TabComp(type),Content=Tab.SelectedItem.ToString()}

                    };

                    index = Tab.Items.FindIndex(x => x.Header.Text == PageName);

                    SelectedTab = index;

                    if (index == -1)

                    {

                        await Tab.AddTab(TabData, Tab.Items.Count);

                        SelectedTab = Tab.Items.Count;

                    }

                    string decodeParam = CommonClassHelper.Base64Decode(PageID);

                    if (!string.IsNullOrEmpty(decodeParam))

                    {

                        string[] tempParameter = decodeParam.Split('/');

                        SessionManager.StringResources = await commonService.GetPageStringResourcesList(SessionManager.FactoryID, Convert.ToInt32(tempParameter[3]), SessionManager.Language, SessionManager.UserID);

                        var res = SessionManager.StringResources;

                    }

                    await jsRuntime.InvokeAsync<object>("hideDropdown");

                }

            }

            else

            {

                await js.InvokeVoidAsync("LoadAlert", "Can not open more than Ten Page", "success");/*success/error/warning*/

            }

        }

        catch (Exception exception) { }

    }

Attachment: Design_f3ca107f.rar

[KINS]

sorry please ignore above comments.

its working fine as per my requirement

[Ravikumar Venkatesan]

Hi KINS,

Thanks for the update.

We are happy that your problem has been resolved now.

  

Regards,

Ravikumar Venkatesan