1. Home
  2. Forum
  3. Blazor
  4. SidebarType is not working

SidebarType is not working

Team,

I have a mainlayout page where we have implemented the Sidebar to give some extra space for the main content display. When the attribute Type="SidebarType.Push"  I see the below exception.



I am not seeing any V19.4.0 any where in my project.



Also, am i using the updated CDN links and scripts of Syncfusion? Currently my Index.html points to the following links. If not how can i get the update ones?


<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/19.4.48/styles/bootstrap5.css" rel="stylesheet" />

    <script src=https://cdn.syncfusion.com/blazor/20.1.47/syncfusion-blazor.min.js type="text/javascript"></script>

   

Attached is the mainlayout component for your reference.


Attachment: SRP_mainLayout_befc002a.zip

11 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team May 2, 2022 01:14 PM UTC

Hi Baba,


Greetings from Syncfusion support.


From the error message we found that you’ve registered v19.4.0.* Blazor license key in your application. If you’ve upgraded the Syncfusion NuGet packages from nuget.org, you should update the corresponding version (v20.1.0.*) and platform (Blazor) Syncfusionlicense key in your application to avoid license warning.


Find more details about license key registration from below link,


https://blazor.syncfusion.com/documentation/getting-started/license-key/overview


Our license keys are version and platform-specific. So, please ensure that all the referenced Syncfusion assemblies\NuGet packages are on the same version as license key’s version.


Find below the knowledge base article to know about which version license key should use in application,


https://www.syncfusion.com/kb/8951/which-version-syncfusion-license-key-should-i-use-in-my-application


Please follow the below knowledge base article to resolve the license warning message for various cases.


https://www.syncfusion.com/kb/12756/how-to-resolve-syncfusion-license-popup-message-or-trial-message-warning


If the reported issue is still not resolved,  please share us the following details to check from our side,


  1. TargetFrameWork and Platform of your application.
  2. Screenshot of license key registered place.


Regards,

Indhumathy L


BG Baba Goud Gadiga May 2, 2022 02:06 PM UTC

Hello Indhumathy,


After generating a new license key and updating the same in my project resolved the exception. Thank you for looking into this, much appreciated! 

Now I have the actual issue where the side bar type Push is not working as expected. In fact I tried all the Sidebar types and seems none on them is working, just the sidebar works as over which I guess is the default.


Attached is one of the samples shared in previous posts. Kindly have a look and let me know what am I missing.


Thanks

Baba


Attachment: Sidebar_Nav_50f13ce6.zip

LD LeoLavanya Dhanaraj Syncfusion Team May 3, 2022 01:15 PM UTC

Hi Baba,

 

We have checked your Blazor Sidebar code with the latest version (v20.1.52). The SidebarType property is working fine in the sample. When the type is set as Push, the main content will be pushed and the Sidebar appears. Whereas, Over type Sidebar floats over the main content area. If the issue persists, please modify the sample to replicate the issue so that we can validate further and assist you promptly.

 

You can see this difference in the below demo sample as well.

 

Demo :  https://blazor.syncfusion.com/demos/sidebar/api?theme=fluent

 

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

 

API Reference :  https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SidebarType.html

 

Please let us know if you need any further assistance.

 

Regards,

Leo Lavanya Dhanaraj


BG Baba Goud Gadiga May 13, 2022 03:18 PM UTC

Hello Lavanya,

The side bar gets pushed that is correct, but the main content should also get pushed that is it should be in sync with Sidebar open and close. Please advice If I am missing anything.


Thanks

Baba


LD LeoLavanya Dhanaraj Syncfusion Team May 16, 2022 10:42 AM UTC

Hi Baba,


When we set the Type property as Push in the Sidebar component, the Sidebar pushes the main content area to appear side-by-side and shrinks the main content within the screen width. This is the basic behavior of the Sidebar component. For your reference we have attached the video footage.


Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarNavigationType1837142623.zip


For your reference, we have attached a sample. Please find the sample from below link.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_Nav-1465806734.zip


Please check the shared details, if we misunderstood, please share us more detailed explanation about your exact use case with Sidebar component with a video footage. These details would help us assist you promptly.


Regards,

Leo Lavanya Dhanaraj


BG Baba Goud Gadiga May 16, 2022 04:51 PM UTC

Hello Leo,


I did try your sample and the also saw the demo video. When you first launch the application, the Index.razor component content seem to shrink, but when you click on any of the items and on Index page again on the Navbar/Sidebar, the main content does not shrink. This is what I have been complaining about. 


Am I missing anything from my end, any CSS style or property?


Attached is the video for your reference.


Thanks

Baba


Attachment: SideBarMay16_af6e0bdf.zip

LD LeoLavanya Dhanaraj Syncfusion Team May 17, 2022 03:24 PM UTC

Hi Baba,


In your shared sample, we are facing some difficulties with Sidebar Push type during the page navigation. We need some additional time for further validate on this issue and will update you with further details on or before May 20,2022.


However, we have prepared a sample similar to your requirement with ListView. Please check the below sample.


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarSample-1781233989.zip


Also, you can achieve page navigation by integrating TreeView within the Sidebar component as well. Please check the below forum.


Forum: https://www.syncfusion.com/forums/172991/loading-page-following-nodeselected?reply=S2uMUM


Check whether this sample is suit for your requirement.


Kindly check the attached details to see whether it is suitable for your requirements. Please get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj


BG Baba Goud Gadiga May 17, 2022 03:34 PM UTC

Hello Leo,


Thank you for looking at the query. Kindly let us know when you find something with the sample I provided.


Thanks

Baba


LD LeoLavanya Dhanaraj Syncfusion Team May 18, 2022 02:44 PM UTC

Hi Baba,


To meet your requirements, we have made some changes to the shared sample. By setting the Target property to the "e-main-content" class, it allows the sidebar to be placed inside the main content.


Check the below code snippet.


[MainLayout.razor]

<SfSidebar Width="260px" Target="@Target" Position="@Position" … Type="SidebarType.Push">

   …

</SfSidebar>

 

@code{

    public string Target = ".e-main-content";

}


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_Nav-340542466.zip


Please check the attached sample and get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj


Marked as answer
BG Baba Goud Gadiga May 18, 2022 03:51 PM UTC

Hello Leo,


The attached sample works, thank you for your time and effort!


Thanks

Baba


IL Indhumathy Loganathan Syncfusion Team May 19, 2022 04:47 AM UTC

Hi Baba,


We are glad that your reported issue has been resolved. Please get back to us if you need any further assistance.


Regards,

Indhumathy L


Loader.
Up arrow icon