I am using

kendo.drawing.drawDOM

to draw a chart from DOM into a template for exporting as a PDF.  However the business want to add the custom parameters  into the footer.  This works but loses the default page numbering.  I understand adding custom parameters overwrites the default params so I would like to know if there is a work around or correct way to do this.. One which will still allow us to correctly number the pages. 

 $scope.exportOther = function (objId, filename){
            $scope.printDt = $.RGMPDate.onParseJSONUIDate(new Date());

            const hiddenElement = document.getElementById('griddiv');


            hiddenElement.style.visibility = 'visible';


            kendo.drawing.drawDOM($(".chart-content-wrapper"), {
                paperSize: "A4",
                landscape: true,
                margin: {
                    left: "2cm",
                    top: "2cm",
                    right: "2cm",
                    bottom: "2cm"
                },
                forcePageBreak: ".page-break",
                scale: 0.5,
                title: filename,
                template: kendo.template($("#page-template").html())
                    (
                        {
                            pageNum: "",
                            totalPages: "",
                            fBasisSelectedLockedTxt : $scope.fBasisSelectedLockedTxt,
                            rgod: $scope.printDt,
                            fTimespanSelectedTxt: $scope.fTimespanSelectedTxt
                        })
                

            }).then(function (group) {

                kendo.drawing.pdf.saveAs(group, filename);
                hiddenElement.style.visibility = 'hidden';
            });

    
        };

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

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.

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?

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

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

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

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?

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.

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