Selecting a specific drawer in the Drawer component

[MIDAS]

Hi

I have implemented the new Drawer component:

$("#drawer").kendoDrawer({
            template: tooltemplate,
            mode: "push",
            mini: true,
            itemClick: function (e) {
                e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
                e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-drawer-id").text()).removeClass("hidden");
                var spanItemText = e.item.find(".k-item-text").html();
                $('#titleSpan').html(spanItemText);
            },
            position: 'left',
            minHeight: 800,
            swipeToOpen: false
        });

 

All is great. The Drawer component functions perfectly. Whenever it is used it always defaults to the top (first) drawer. My users now want the ability to specify which drawer is selected by default. I've implemented a my settings page where the user can specify which drawer they prefer as their default. This value (which is the spanItemText value in my code above) is stored in a cookie. How do I select this drawer each time the component is used. Or is there a better way of doing this? I'm trying to programmatically click the drawer icon but I'm not having much luck at the moment.

Thanks.

[Petar]

Hi,

Check this Dojo project. The code realizing the desired functionality in the previous link is:

      $($('#drawerUL li')[3]).trigger("mousedown");

What we do with the above is selecting a li element from the Drawer's items and trigger the "mousedown" event over it. 

I hope the provided solution resolves your issue. Let me know if you have question regarding the implementation.

Regards,
Petar
Progress Telerik

[MIDAS]

Petar, 

Many thanks for your solution. It works great in Chrome and Firefox but unfortunately in Edge and IE11 the first draw remains selected. Normally I would be happy as I prefer Chrome but the corporate browser is Edge/IE11. Do you have a suggestion?

Thanks

[Petar]

Hi,

Try changing the mousedown event triggering with:

$("#drawer").getKendoDrawer().drawerItemsWrapper.find("[data-role='drawer-item']").removeClass("k-state-selected");
      
$("#drawer").getKendoDrawer()._selectItem($('#drawerUL li').eq(3));

The above works on my side in both IE/Edge and you can check it in this Dojo example.

Let me know if the above resolves the issue.

Regards,
Petar
Progress Telerik