1. Home
  2. Forum
  3. Blazor
  4. Page Navigation Help

Page Navigation Help

I am going to create page navigation for our ERP application.so I need below requirement using syncfusion control


1.Side bar should be in treeview which has three level.For example


a.Order Management system

a1.Order Receiving

a2.Order Processing

a1.1

SRF

Style Management

Color Management

2. When I click on third level in treeview node,the tileview should be loaded on first tab (which has dynamically loaded from list)

3. When I click on tileview (card),the page should be loaded in second tab

likewise if click on another tileview (card),the page should be loaded on another tab etc.


4. brudcrum should be in header (page navigation)

5.Need logo in top of the sidebar

6. Need search control in top of the sidebar

7.Need user image in bottom of the sidebar

8.Notification icon on top of the header (right side)

9.Need toggle option for sidebar (collapse/expand)

Note:-

Please check screencast from below link

https://www.screencast.com/t/8DYHhrdfyF

also please download psd file for your reference.








Attachment: PSD_1d14f3a5.zip


27 Replies
KI KINS July 28, 2021 01:51 PM UTC

Please help

Without support team I can not finish my task

Syncfusion control is my challenging task


KR Keerthana Rajendran Syncfusion Team July 29, 2021 02:14 PM UTC

Hi KINS, 
 
Thanks for contacting Syncfusion support. 
 
We checked your requirements and preparing a sample similar to the provided details. We will update you further details on August 5, 2021.  
 
Meanwhile, please refer to the following demo and UG links for getting started with Blazor components. 
 
 
 
We appreciate your patience. 
 
Regards, 
Keerthana R. 


KI KINS July 29, 2021 03:00 PM UTC

Thanks keertana

Will wait for soonest reply...

I always believe support team to solve my problem


KI KINS replied to KINS July 30, 2021 02:22 AM UTC

Is it possible to get sample code on August 3 .

Because August 5 is my deadline 

I will prepare your sample and apply in my erp project.


Please give high priority 


SM Shalini Maragathavel Syncfusion Team July 30, 2021 02:16 PM UTC

Hi Chris, 

Thanks for the patience. 
We have validated your query with the provided video demo. We have prepared a sample for your reference using Sidebar with TreeView and rendered the Tab component inside the main content of Sidebar. Please find the below sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_blazor-1249446659_(2)1882669255.zip

Screenshot:


You can detect the selection of TreeView node using nodeSelecting event from where you can update the main content of Sidebar based on your scenario.

Please refer to the below links to know more about the Tab and Sidebar components.

Documentation: https://blazor.syncfusion.com/documentation/sidebar/getting-started/
                              https://blazor.syncfusion.com/documentation/treeview/getting-started/

Demo: https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=bootstrap4
             https://blazor.syncfusion.com/demos/treeview/default-functionalities?theme=bootstrap4


Please get back to us if you need further assistance.

Regards,
Shalini M. 


KI KINS July 30, 2021 04:49 PM UTC

Thanks for quick support..

That's great syncfusion team

Really I am happy for this support..


Can you provide tileview sample which I mention in psd ??


KI KINS July 31, 2021 01:14 PM UTC

I have check above example 

But page loading in tab is not available .

Please help me for above req


NR Nevitha Ravi Syncfusion Team August 2, 2021 07:57 AM UTC

Hi KINS, 

Thanks for your update. 

We have checked your requirement and need more details to provide prompt solution, so can you please share below details to help you out? 
  • Whether you need card (tile view) within sidebar?
  • Whether you want to add and open a new tab on clicking the tile view or need to open the existing tab?
  • Which content need to be rendered withing tab?

Regards, 
Nevitha 


KI KINS August 2, 2021 08:35 AM UTC

1.yes I need card view when I click on sidebar

2.yes I need to add and open new tab on clicking on tileview  ( card).

3.First tab should be tileview by default ,when I click on sidebar.

And when I click on tileview the other page (component) should be added in another tab based on tileview.


Hope it's clear...


SK Satheesh Kumar Balasubramanian Syncfusion Team August 3, 2021 02:26 PM UTC

Hi KINS,

Thanks for your update.

We have validated your reported queries based on the shared details and modified the sample to achieve your requirement. In this sample, card view will be rendered when you click on Color Management Treeview node. Also, when you click on tileview(card) button the other page component will be added in tab item based on tileview(card).




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

Regards,
Satheesh Kumar B


KI KINS August 4, 2021 08:41 AM UTC

thanks foe support.it works fine 


can you add below pending points


4. brudcrum should be in header (page navigation)

8.Notification icon on top of the header (right side)

9.Need toggle option for sidebar (collapse/expand) with icon provided in attached file.



Attachment: Navigation5_c31e93f4.zip


KI KINS August 5, 2021 04:43 PM UTC

Is it possible to get my requirement today or tomorrow??


Because Saturday support team will not available


NR Nevitha Ravi Syncfusion Team August 5, 2021 05:04 PM UTC

Hi Kins,  

Thanks for your update. 
 
Query#1: brudcrum should be in header (page navigation)   
We are unable to understand your exact requirement with Sidebar from the provided information. Please elaborate on your requirement in detail with pictorial or video demonstration in order to understand it better. So that we can check from our end and provide a prompt solution.  
  
Query#2: Notification icon on top of the header (right side)  
  
Based on your query we have added the notification icon in the header section of the Sidebar. Please refer to the below code snippet,   
  <div class="main-header" id="header-section">  
            <ul class="header-list">   
                <li class="header-style float-right e-icons support border-left"></li>  
                <li class="header-style float-right notify e-icons border-left"></li>  
            </ul>  
        </div>  
<style>  
.notify::before {  
        content: '\e73d';  
        font-size: 25px;  
    }  
    .support::before {  
        content: '\e742';  
        font-size: 25px;  
    }  
<\style>  

Note: You can add the required icon in the header as per your need.

Please check the below link for details on our icons library for various icons.  
  
Icons: https://blazor.syncfusion.com/documentation/appearance/icons/

Query#3: need toggle option for sidebar (collapse/expand) with icon provided in attached file.

Based on your screenshot, we suspect that you might using the dock Sidebar in your application. We would like to let you know that dock state of the Sidebar reserves some space on the page that always remains in a visible state when the Sidebar is collapsed. It is used to show the short term of a content like icons alone instead of lengthy text.

You can achieve your requirement of binding toggle button in the Sidebar as demonstrated in the below code snippet,  
<SfSidebar @bind-IsOpen="SidebarToggle">  
            <ChildContent>  
                    <div id="hamburger" class="icon-menu icon list" @onclick="@Toggle"><span class="text">Toggle Sidebar</span></div>  
                </div>  
            </ChildContent>  
        </SfSidebar>  
<style>  
.icon-menu::before {  
        content: '\e801';  
        font-family: 'fontello';  
        font-size: 27px;  
    }  
<\style>  
  
Please find the below sample for your reference.  
 
Please let us know if you need further assistance.  
 
Regards,  
Shalini M.  



KI KINS August 7, 2021 07:29 AM UTC

thanks for support...


I have below comments.please help me to resolve this..


Query#1: brudcrum should be in header (page navigation) --> please check below link and attached file for your reference.

https://www.screencast.com/t/XWRu4gvJi

Query#3: need toggle option for sidebar (collapse/expand) with icon provided in attached

file.https://www.screencast.com/t/BUM8FWCcpxkv



I need tab in below format


https://www.screencast.com/t/3BtofAMA


Query4:The sidebar and content page should be responsive (height/top,width,left,right should be adjust)


Note:-

I am using syncfusion theme and pixinventix materialize theme.so please add these themes in sample code to better css understanding

And I am not using bootstrap in my project.


Attachment: Navigation8A2_f68bcf03.zip


SK Satheesh Kumar Balasubramanian Syncfusion Team August 9, 2021 11:56 AM UTC

Hi KINS, 
  
Thanks for your update. 
  
Query 1: 
  
We have checked your requirement and need more details to provide prompt solution, so can you please share below details to help you out?  
  • Whether you need to render tab header in brudcrum(sidebar header) and tab content in sidebar content area?
  • Whether you need both header in brudcrum(sidebar header) and whole tab in sidebar content area?

Query 2: 
  
We have checked your requirement and need more details to provide prompt solution, so can you please share below details to help you out?  
  • Whether you need to render tab header in sidebar header and tab content in sidebar content area?
  • Whether you want to add and open a new tab on clicking the treeview node?
  • Share all the component details used for tab interactions?

Query 3 & Query 4: 
  
We have validated your query with the provided video demonstration. You can achieve your requirement by setting the Sidebar type as Push(Sidebar pushes the main content area to appear side-by-side, and shrinks the main content within the screen width.) and by enabling the CloseOnDocumentClick property you can close the Sidebar on document click. Please refer to the below code example,  
  
<SfSidebar EnableDock="true" Type="SidebarType.Push" CloseOnDocumentClick="true" DockSize="55px" Target=".main-content" @ref="Sidebar">  
            <ChildContent>  
              . .  .  
            </ChildContent>  
        </SfSidebar>  
        <div class="e-main-content contentclass" id="main-text">  
            <div class="main-header" id="header-section">  
                <ul class="header-list">  
                    <li class="float-left header-style icon-menu" id="hamburger" @onclick="@Toggle"></li>  
                    <li class="float-left header-style nav-pane"><b>Navigation Pane</b></li>  
                </ul>  
            </div>  
            <div class="sidebar-content">  
            </div>  
        </div>  
    </div>  
</div>  

Please find the below sample for your reference,  
Please let us know if you need further assistance.  
  
Regards, 
Satheesh Kumar B 


KI KINS August 9, 2021 03:53 PM UTC

Query1:

  • Whether you need both header in brudcrum(sidebar header) and whole tab in sidebar content area? (YES)

Query 2:

  • Whether you need to render tab header in sidebar header and tab content in sidebar content area? (Yes)

Please make it as responsive 

Note:-

Sidebar and Header should be proper alignment.


KI KINS August 10, 2021 02:20 PM UTC

Is it possible to get answers today??


KI KINS August 11, 2021 02:00 AM UTC

Please help..

This is my challenging task without syncfusion support  it is very difficult to do this...

I will adapt this navigation layout in my erp application..




NR Nevitha Ravi Syncfusion Team August 11, 2021 05:31 PM UTC

Hi KINS, 

Currently we are checking on the possibilities of having header of the tabs in the sidebar header, we will let you know further details on or before August 13, 2021. We would appreciate your patience until then. 

Regards, 
Nevitha 


KI KINS replied to Nevitha Ravi August 12, 2021 12:02 AM UTC

OK  noted with thanks

Will wait for soonest reply..


VD Vinitha Devi Murugan Syncfusion Team August 12, 2021 12:10 PM UTC

Hi Kins, 
 
Thanks for your patience. 
 
We have validated your reported query “need to render tab header in sidebar header and tab content in sidebar content area” and achieved your requirement by using following CSS. We have prepared the below sample for your reference.  
 
 
<style> 
    .e-tab .e-tab-header .e-toolbar-items { 
        margin-left: 211px; 
        margin-top: -107px; 
    } 
 
    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap { 
        color: white; 
    } 
 
    .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, 
    .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text { 
        color: white; 
        font-weight: 700; 
    } 
 
    .e-tab .e-tab-header:not(.e-vertical)::before { 
        border-width: 0; 
    } 
</style> 
 
Also, If you click sidebar item other then “Color Management”, we removed the tab header from brudcrum and content from slider content using below Code. 
 
    void TreeviewNodeSelecting(NodeSelectEventArgs args) 
    { 
        if (args.NodeData.Id == "06") 
        { 
            LoadTab = true; 
        } else 
        { 
            // If you click side bar item other then "color Management", we Removed tab header from brudcrum and content from slidebar content.  
            LoadTab = false; 
        } 
    } 
 
Output: 
 
 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


KI KINS August 12, 2021 02:29 PM UTC

thanks for support,


Please check my comments in below link and help me to do this...

Almost you have done my requirement but we need in responsive mode Please give top priority because Saturday support team will not available


https://www.screencast.com/t/b05D9oZU4J1n


VD Vinitha Devi Murugan Syncfusion Team August 16, 2021 05:06 AM UTC

Hi Kins, 
 
Thanks for your update. 
 
Q1: We have validated your query “Tab should be transparent” and we achieved your requirement with below CSS. 
 
.e-tab .e-tab-header .e-toolbar-items { 
    margin-left: 211px; 
    margin-top: -107px; 
} 
 
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap { 
    color: white; 
} 
 
.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text { 
    color: white; 
    font-weight: 700; 
} 
 
.e-tab .e-tab-header:not(.e-vertical)::before { 
    border-width: 0; 
} 
 
.e-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active { 
    border-bottom: 0px; 
} 
 
.e-tab .e-tab-header .e-toolbar-item.e-active { 
    border: 0; 
} 
 
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text, 
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon { 
    color: white 
} 
 
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover { 
    color: white; 
    border: 0; 
    background: #65abd7c9; 
} 
 
.e-tab .e-tab-header .e-toolbar-item.e-active { 
    background: #65abd7c9; 
} 
 
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text, .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon { 
    color: white; 
} 
 
Output: 
 
Q2: when I click the hamburger the sidebar should be displayed.

Based on your query, we understand that you are facing an issue in opening and closing the Sidebar using hamburger icon. We tried to reproduce the reported issue in our sample provided in the previous update but we are unable to reproduce the issue at our end as the Sidebar open/close works fine while clicking the hamburger icon. 
 
We have attached our validated  video demo for your reference,  
 
 
If the problem still persists, please share your complete Sidebar rendering code or simple sample to replicate the issue. So that we can check from our end and provide a prompt solution.  
 
Q3:Responsive Sidebar with content page.

Based on your query, we could understand that your requirement is to make the Sidebar responsive. You can achieve your requirement by using the MediaQuery property. The MediaQuery allows you to set the Sidebar in an expanded state or collapsed state only in user-defined resolution. Please refer to the below code snippet,  
 
<SfSidebar HtmlAttributes="@HtmlAttribute" EnableDock="true"DockSize="55px" Target=".main-content" @ref="Sidebar"MediaQuery="(min-width:600px)">  
            <ChildContent>                            
                        . . . .  
        </ChildContent>  
    </SfSidebar>  
 
Kindly try with the above solutions and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


KI KINS August 16, 2021 12:33 PM UTC

thanks for reply...


please check my comments in below link

https://www.screencast.com/t/jDPLLFVaP


NR Nevitha Ravi Syncfusion Team August 17, 2021 01:52 PM UTC

Hi Kins, 
 
Thanks for your update. 
 
We checked your query. You can achieve your requirement by mapping the icons to the TreeView nodes using IconCss property and show/hide the icons based on the open/closed state of the Sidebar as demonstrated in the below code snippet,   
  
Index.razor  
  <SfSidebar HtmlAttributes="@HtmlAttribute" Width="290px" EnableDock="true"DockSize="50px" >  
            <ChildContent>  
                <div class="main-menu">  
                    <div>  
                        <SfTreeView CssClass="main-treeview" @ref="TreeView"ExpandOn="@Expand" TValue="TreeData">
  <TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" >  
                            </TreeViewFieldsSettings>  
                        </SfTreeView>  
                    </div>  
                </div>  
            </ChildContent>  
        </SfSidebar>  
@code {  
    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()  
{  
        {"class", "sidebar-treeview" }  
    };  
  protected override void OnInitialized()  
    {  
        base.OnInitialized();  
        treedata.Add(new TreeData { nodeId = "11", nodeText = "Browser", iconCss = "icon-microchip icon", pid = "12" });  
        treedata.Add(new TreeData { nodeId = "12", nodeText = "Packages", iconCss = "e-icons admin", hasChild = true });  
    }  
}  
<style>  
.sidebar-treeview.e-sidebar.e-dock.e-open .icon-microchip, .sidebar-treeview.e-sidebar.e-dock.e-open .icon-microchip::before, .sidebar-treeview.e-sidebar.e-dock.e-open .admin,.sidebar-treeview.e-sidebar.e-dock.e-open .admin::before {  
        display: none;  
    }  
  
.sidebar-treeview.e-sidebar.e-dock.e-close .icon-microchip, .sidebar-treeview.e-sidebar.e-dock.e-close .admin, .sidebar-treeview.e-sidebar.e-dock.e-close .icon-microchip::before,.sidebar-treeview.e-sidebar.e-dock.e-close .admin::before {  
        display: block;  
    }  
  
.sidebar-treeview.e-sidebar.e-dock.e-close .main-treeview.e-treeview .e-list-text {  
        padding-left: 25px;  
}  
  
    .sidebar-treeview.e-sidebar.e-dock.e-close .e-icons.e-icon-expandable {  
        display: none;  
    }  
  
    .sidebar-treeview.e-sidebar.e-dock.e-close .e-list-parent.e-ul {  
        overflow-x: hidden;  
    }  
</style>  
  

Please find the below sample for your reference.  
   
                   
Please get back to us if you need any further assistance.   
   

Regards,   
Nevitha 


KI KINS August 19, 2021 12:33 PM UTC

Thanks I have done almost.. 

But as per initial comment 

Brudcrumb is missing in header

and also I need below points to successfully close this thread.


1.Need alert,notification an task icon with popup menu

2.Need theme switch using popup menu in header

3.user image should be in bottom of the sidebar

And popupmenu should be shown in user image (logout,user profile menu item).


Please help...


please check my comments in attached file


Attachment: Znavi04_6476ca9.zip


SR Sabitha Rajamani Syncfusion Team August 19, 2021 03:58 PM UTC

Hi KINS, 
 
These requirements do not fall within the scope of Support. It is a custom consulting project. If you wish for us to work on this, we would request you to contact your Syncfusion Account Manager to explore Consulting options. 
 
Regards, 
Sabitha 


Loader.
Up arrow icon