Need to expand on page open without using javascript

[Laurie]

I'm using the Drawer TagHelper and when the page opens, I'd like the Drawer to start open if the user cookie is set to open and closed if the cookie is set to closed. I am doing this currently using javascript but it causes it to open every time you go to a new page. Is there a setting on the taghelper that will cause it to start out open or closed rather than having to set it using javascript?

Thanks!

Laurie

Here's my code:

                <kendo-drawer name="drawer" mode="push" on-hide="onHide" min position="left" swipe-to-open="false" template-id="template" class="no-border">
                    <mini enabled="true" />
                </kendo-drawer>
<script>
            $(document).ready(function () {
               var drawerInstance = $("#drawer").data().kendoDrawer;
                var hideMenu = getCookie("HideCustomerMenu");
                if (hideMenu == 'true') {
                    var arrowButton = $("#expand");
                    arrowButton.toggleClass('flip');
                    drawerInstance.hide();
                }
                else {
                    drawerInstance.show();
                }

            });
</script
        <script id="template" type="text/x-kendo-template">
            <ul class="menuBar list-unstyled">
                       <li id="customerinfo"><a href="/customer" ><i class="fa fa-user-circle fa-2x fa-fw mr-2" aria-hidden="true" title="Customer Information"></i>Customer Info</a></li>
                       <li id="test"><a href="/test" ><i class="fa fa-user-circle fa-2x fa-fw mr-2" aria-hidden="true" title="Test"></i>Test</a></li>
            </ul>
        </script>

[Viktor Tachev]

Hello Laurie,

 

In order to execute the logic for expanding the drawer only once I would suggest updating the cookie after showing the Drawer initially. Then the if condition will execute the logic for showing the drawer only the first time.

If you need more information on updating cookies you will find the article below interesting.

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

 

Regards,
Viktor Tachev
Progress Telerik

[Laurie]

I don't think I was entirely clear. Since we're using the Drawer for navigation, each click on the drawer opens a new page. On the new page, the drawer starts collapsed and then expands if hideMenu is false. This causes a distracting animation each time I go to a new page. I want it to start expanded if the cookie state is expanded. I'd like there to be a setting on the control that controls whether it starts expanded or collapsed, so I do not need to use javascript (and the attendant animation) when the page opens.

[Viktor Tachev]

Hello Laurie,

 

In order to avoid duplicate posts I suggest we continue the conversation in the submitted support ticket.

 

Regards,
Viktor Tachev
Progress Telerik

[Laurie]

An update for interested parties: There is indeed no setting to expand the drawer to start with. I have put in a feature request for this. If you are interested in this, please upvote it at this location: https://feedback.telerik.com/aspnet-core-ui/1432490-please-add-an-expandonopen-setting-to-the-drawer-taghelper

Thanks, Viktor, and thanks All!

[Zack]

As this has not been addressed in a release did you find a workable solution?

Facing the same issue.

[Laurie]

I ended up just building something like the drawer with css. I'm guessing I started out with a sidebar nav blog post or something I found on the web, but not sure where exactly I got it.

[Stoyan]

Hello everyone,

Currently, the possible approach is to wait for the Drawer to get initialized and expand it using its show method.

        $(document).ready(function(){
            var drawer = $("#drawer").data("kendoDrawer").show();
        })

You can review the behavior of the code in this Telerik REPL.

In addition I will consult our Dev Team, if it's possible to avoid the expanding animation of the Component.

[Laurie]

It's not remembering the expand setting. The whole idea is that if you expand it once, it remembers that you want it expanded and opens it expanded the next time. And does this without showing a distracting expand animation every time you go to a new page that uses the drawer. 

[Stoyan]

Hi Laurie,

The persistance of this behavior can be achieved by storing the state of the Drawer in a cookie as suggested previously by Viktor.

Then in the callback of the $(document).ready() check the state of the Drawer and apply the logic from my last answer.

I hope this clarification is helpful.

[Laurie]

Thanks! I see how this could work. Unfortunately, I'm way past needing it, but hopefully it will work for the next person. Zack perhaps? (Would tag him if I was able.)

[Zack]

We ended up carrying the drawer state using another mechanism (query string) - then we have a loader that covers the drawer and the views content, this hides the expand that happens on the client using js - not ideal but better than the annoying expand.

[Stoyan]

Hi Zack,

I am happy that the original issue has been resolved.

If you find the suggestions above helpful you can upvote them or Laurie as an original publisher can mark one of them as an Answer to visually distinguish the useful messages. This will make future reference easier for you or other members of the community.

I remain open, if further questions on the topic arise.

[Stoyan]

Hello everyone,

After some more digging we found a workaround that better resembles the discussed behavior. To achieve it:

1. Disable the transition of the .k-drawer-wrapper class before the programmatic expansion of the Drawer
2. Enable back the transition (in a setTimeout callback) to ensure the original behavior remains unchanged 

      if(redirect){
                   $(".k-drawer-wrapper").css("transition","none");
                   var drawer = $("#drawer").data("kendoDrawer").show();
                   setTimeout(function(){
                       $(".k-drawer-wrapper").css("transition","0.3s ease-in-out");
                   },200);
      }

 

Please refer to the updated Telerik REPL that showcases the code above in action.