Selecting a specific drawer in the Drawer component

4 posts, 0 answers
  1. MiDAS
    MiDAS avatar
    7 posts
    Member since:
    Mar 2019

    Posted 25 Oct 2019 Link to this post

    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.

  2. Petar
    Admin
    Petar avatar
    472 posts

    Posted 29 Oct 2019 Link to this post

    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.
  3. MiDAS
    MiDAS avatar
    7 posts
    Member since:
    Mar 2019

    Posted 29 Oct 2019 in reply to Petar Link to this post

    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

  4. Petar
    Admin
    Petar avatar
    472 posts

    Posted 31 Oct 2019 Link to this post

    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.
Back to Top