Telerik Forums
Kendo UI for jQuery Forum
1 answer
67 views

Hi,

I’m trying to create an MDI type interface with the following behavior.

  1. Two column layout with Drawer widget on left.
  2. Open window within visible portion of right column.
  3. Window cannot move outside of the visible portion of right column.
  4. Window maximizes only to fill the visible portion of the right column.

Are there some examples around that would help or could y’all give some advice on how to do this?

Thanks,

-G

Georgi Denchev
Telerik team
 answered on 01 Aug 2023
1 answer
62 views

Hello,

I am doing a Django project and am creating a base.html that will be used in different pages using {% extend 'base.html'%}.

The base.html includes a Drawer and a TileLayout with only one tile (filter tile: this tile contains search filter components like datepicker, groupbutton, checkbox etc).

Then I have a file named main.html where I need to add several tiles underneath the filter tile from base.html

I was able to add several tiles to main.html but the problem is, it is not included in the Drawer component of base.html.  The tiles I've added on main.html appears below the height scope of base.html

I need to include the tiles from main.html into the same Drawer of base.html

I have been trying to figure this out for several days now but is unfortunately have not found a solution. If anyone could assist, it would be really helpful.

Thank you.

 

 

 

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 26 Aug 2022
1 answer
113 views

Hello,

I am trying to hide/show drawer items based on user rights. I was trying to make it work with data binding, since the loading of said user rights happens at runtime and after the first initialization of the drawer control. But I can't get it to work.

Here is a small example of what I am trying to do: https://jsfiddle.net/1rk4f9L6/11/

 

Any tipps? Is it even possible to use data-bind on a drawer item?

Angel Petrov
Telerik team
 answered on 15 Aug 2022
1 answer
51 views

Hi,

I am trying to use Gantt widget with Drawer located at the right side. 

For some reason, when I position drawer to the right, even with mini mode it is always outside of the screen (horizontal scroll appears) - if i expand drawer, it basically expands it to the right, and remains outside screen, horizontal scroll just expands area.

When drawer is positioned on the left it works normally (pushes gantt for width of drawer).

Behavior can be observed in following Dojo:

https://dojo.telerik.com/EdIQaXeY

Thank you very much

Regards

Vedad

Georgi Denchev
Telerik team
 answered on 28 Jun 2022
1 answer
402 views

Hi,

Drawer widget with overlay mode suits my needs for left positioned menu. However, I would like to be able to display something on overlay when option on drawer is selected.

For example, if i open menu and click first item on the list, I get small form open in overlay.

Is it possible to achieve this? (I don't want to use push mode of the drawer and then create overlay completely manually - moving main view is not an option at the moment).

Thank you very much.

All the best

Vedad

Georgi Denchev
Telerik team
 answered on 21 Jun 2022
1 answer
70 views

Hi everyone, I would like to ask for your help.
I would like to hide the SubItems when the drawer is in mini mode, if I click on each element.

Thanks in Advance

https://dojo.telerik.com/ejapuWiB/3

Dayan K

 

Nikolay
Telerik team
 answered on 02 May 2022
1 answer
76 views

I am following this example:

https://demos.telerik.com/kendo-ui/drawer/mvvm

Currently, each drawer item has same content.


  <div style="height: 200px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate quaerat quam fugiat deleniti suscipit necessitatibus.</div>

 

How do I specify a different content for each tab?

Nikolay
Telerik team
 answered on 13 Oct 2021
1 answer
248 views
 

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.

 

Jerry
Top achievements
Rank 1
Iron
 answered on 06 Oct 2021
1 answer
398 views

Hi team,

Can we create a drawer with Mini Mode, but allow user to expand collapse it on the click of first item? instead of the extra toolbar div above?

I tried creating it in this dojo (https://dojo.telerik.com/uBAnorUY/7), it expands the drawer but also collapse it after expansion.

appreciate any help.

ashutosh

Nikolay
Telerik team
 answered on 31 May 2021
1 answer
474 views

Hi,

I've worked on various ways to prevent drawer closing when itemClick event triggered but I couldn't figure a solution. Is there a way to disable auto closing when itemClick event performed?

Thanks.

Veselin Tsvetanov
Telerik team
 answered on 10 Aug 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?