1. Home
  2. Forum
  3. Blazor
  4. How to open multiple page in content page.

How to open multiple page in content page.

I have an blazor template page which contains Below components

1.Header components

2.Sidebar (left side menu with toggle).

3.Content components (main page).

When I click page in side menu,then the page is loaded on content page.

That means I can load only one page in content page ( main page) when I click page on side menu.

My question is how can I load multiple page in content page (main page).

What is the best way to open multiple page in content page.

Can we use tabbed page or any other control in content page.

Please provide me example code..


10 Replies
JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 19, 2021 06:28 PM UTC

Hi Hassan, 

Thanks for contacting Syncfusion support. 

We have validated your query for “Multiple pages in single view page” with your shared information. Based on that, we want to let you know that we can able to render multiple pages in single view by using as components which means all your needed pages as components. Please refer the below sample that can load multiple pages in content page. Also, we can render multiple pages in Tabs controls. Please refer the below images for demonstrating your requirement. 

Screenshots:  

 

 

 

 

However, we have added the sample for your reference below 


Please get back to us if you have any queries. 

Regards, 
Joshna L 


KI KINS July 20, 2021 09:26 AM UTC

Thanks for reply...

Tab should be created dynamically when I click on side menu.

and also it should be closable (need close icon button in each tab corner)


Note:-


I need mdi tabbed manager format as in below url

https://help.syncfusion.com/windowsforms/tabbedmdi/getting-started




VD Vinitha Devi Murugan Syncfusion Team July 21, 2021 07:08 AM UTC

Hi Hassan, 
 
Thanks for your update. 
 
You can dynamically create tab using AddTab public method of our Scheduler. Also tab items can also be removed by clicking the close icon which appears on the tab header on setting true to ShowCloseButton property. 
 
Please refer below UG link for more information 
 
 
Kindly try with the above links and let us know whether your are using blazor tab component or windows forms tabbedmdi component in your project to serve you better. 
 
Regards, 
Vinitha 


KI KINS July 21, 2021 09:26 AM UTC

Thanks for quick support.I am

using blazor tab component..

Please provide me example code to close this thread


NR Nevitha Ravi Syncfusion Team July 22, 2021 10:12 AM UTC

Hi Hassan, 

Thanks for your update. 

We have prepared a sample to add tab item on button click and have close icon in the header to close the tabs dynamically which can be downloaded from the following link. 

<SfTab ShowCloseButton="true"> 
    <TabItems> 
        @foreach (TabData Item in TabItems) 
        { 
            <TabItem> 
                <HeaderTemplate> 
                    <div>@(Item.Header)</div> 
                </HeaderTemplate> 
                <ContentTemplate> 
                    <div>@(Item.Content)</div> 
                </ContentTemplate> 
            </TabItem> 
        } 
    </TabItems> 
</SfTab> 
 

Pushing new item to the list will add the tab dynamically. 

    void AddItemClick() 
    { 
        TabItems.Add(new TabData 
        { 
            Header = "JavaScript", 
            Content = "JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed." 
        }); 
    } 
 

Setting ShowCloseButton will help to remove the tabs dynamically. 

<SfTab ShowCloseButton="true"> 
 

Please let us know if you need any further assistance. 

Regards, 
Nevitha 


KI KINS July 22, 2021 10:24 AM UTC

Thanks for reply


Will check and let you know...


KI KINS July 23, 2021 03:57 AM UTC

Exact my requirement..


Thanks..


NR Nevitha Ravi Syncfusion Team July 23, 2021 06:44 AM UTC

Hi Hassan, 

You are most welcome..! we are glad that our provided solution meets your requirement. 

Regards, 
Nevitha 


KI KINS March 3, 2022 11:11 AM UTC

I have another clarification.

I have used ShowCloseButton="true" to close Tab .

I would like to know how to hide "CloseButton" for first tab.


VM Vengatesh Maniraj Syncfusion Team March 4, 2022 02:13 PM UTC

Please find the solution in the below forum

https://www.syncfusion.com/forums/173078/hide-close-button-at-the-last-tab


Loader.
Up arrow icon