This is a migrated thread and some comments may be shown as answers.

Selecting a specific drawer in the Drawer component

3 Answers 204 Views
Drawer
This is a migrated thread and some comments may be shown as answers.
MiDAS
Top achievements
Rank 1
MiDAS asked on 25 Oct 2019, 08:47 AM

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.

3 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 29 Oct 2019, 08:38 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
MiDAS
Top achievements
Rank 1
answered on 29 Oct 2019, 08:57 AM

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

0
Petar
Telerik team
answered on 31 Oct 2019, 08:52 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Drawer
Asked by
MiDAS
Top achievements
Rank 1
Answers by
Petar
Telerik team
MiDAS
Top achievements
Rank 1
Share this question
or