Telerik Forums
Kendo UI for jQuery Forum
0 answers
34 views

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';
            });

    
        };


James
Top achievements
Rank 1
 asked on 14 Apr 2025
1 answer
156 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
127 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
226 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
120 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
644 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
126 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
131 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
433 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
564 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?