Kendo UI Drawer show/hide not work

1 Answer 17 Views
Drawer
Jerry
Top achievements
Rank 1
Iron
Jerry asked on 04 Oct 2021, 01:33 AM
 

Hello: 

I'm newer for Kendo UI for jquery. I want to use drawer widget to get remoting data.
But I found that after getting the remoting data and show on drawer content.
The drawer show/hide function will be not work (Below toggleDrawer() function is work if not performing get data).Can somebody help me?

Below is my code.

 

 <div id="toolbar"></div>

     <div id="drawer">
         <div id="drawerContainer" style="margin-left: 5px;">
         </div>
     </div>
    <script type="text/x-kendo-template" id="drawerTemplate">
        <ul>
            <li data-role='drawer-item' class='k-state-selected'>
                <span class='k-icon k-i-inbox'></span>
                <span class='k-item-text' data-id='Inbox' data-url='test2.html'>
                    Inbox
                </span>
            </li>
            <li data-role='drawer-separator'></li>
            <li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li>
            <li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text' data-id='Calendar'>Calendar</span></li>
            <li data-role='drawer-separator'></li>
            <li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text' data-id='Attachments'>Attachments</span></li>
            <li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text' data-id='Favourites'>Favourites</span></li>
        </ul>
    </script>
    <script>
        $(document).ready(function () {
            var drawerInstance = $("#drawer").kendoDrawer({
                mode: "push",
                template: $("#drawerTemplate").html(),
                autoCollapse: false,
                itemClick: onItemClick,
                mini: true
            }).data("kendoDrawer");

            drawerInstance.show();
        });

        function onItemClick(e) {
            var drawerName = e.item.find(".k-item-text").attr("data-id");
            //alert(drawerName);
            var nextUrl = '/api/test/inbox'
            if (drawerName == 'Inbox') {
                nextUrl = 'grid1.html'
            }
            $.ajax({
                url: nextUrl,
                method: 'GET',
                success: function (result) {
                    $('#drawerContainer').html(result);
                }
            });
        }

        function toggleDrawer() {
            var drawerInstance = $("#drawer").data().kendoDrawer;
            var drawerContainer = drawerInstance.drawerContainer;

            if (drawerContainer.hasClass("k-drawer-expanded")) {
                drawerInstance.hide();
            } else {
                drawerInstance.show();
            }
        }

        $("#toolbar").kendoToolBar({
            items: [
                { type: "button", icon: "menu", attributes: { "class": "k-flat" }, click: toggleDrawer },
                {
                    template: "<h3 style='margin-left: 25px;'>RA Web</h3>" },
                { type: "spacer" },
                { type: "button", icon: "information", attributes: { "class": "k-flat" } },
                { type: "button", icon: "gear", attributes: { "class": "k-flat" } }
            ]
        });
    </script>

 

Thanks.

 

Nikolay
Telerik team
commented on 06 Oct 2021, 09:26 AM

Hello Jerry,

Thank you for sharing the Drawer declaration.

I examined it and I can say it looks good and performing the jQuery.ajax() get request shall not be affecting the rendering of the drawer container.

Can you please confirm that the success function is returning the result as an htmlString? The .HTML() expect an htmlString as an agument?

Regards,

Nikolay

 

1 Answer, 1 is accepted

Sort by
0
Jerry
Top achievements
Rank 1
Iron
answered on 06 Oct 2021, 09:48 AM

Hi Nikolay:

  The ajax result is not an htmlString. I change  $('#drawerContainer').html(kendo.htmlEncode(result)); Yes, the show/hide function is work.

Thanks for your help.

Regards,

Jerry

 

Nikolay
Telerik team
commented on 11 Oct 2021, 08:08 AM

Hi Jerry,

You are very welcome. I am glad to hear you managed to resolve the situation.

Let us know if anything new arises.

Regards,

Nikolay

Tags
Drawer
Asked by
Jerry
Top achievements
Rank 1
Iron
Answers by
Jerry
Top achievements
Rank 1
Iron
Share this question
or