expand all panels when printing kendo panelbar

2 posts, 0 answers
  1. Toan
    Toan avatar
    2 posts
    Member since:
    Sep 2015

    Posted 14 Sep 2015 Link to this post

    Hi Telerik,

    I have a kendopanelbar that contains 3 panel . I want to expand all panels to print details of gird in panels. I set expandMode is 'single'. The problem is In paper printer, It only show 1 panel and rest of panels collapse. I attempted to set expandMode is 'multiple' and It worked well But I just want expandMode is 'single'.

    Here is my code:

    function fqtt_PrintExpensesGrid() {
            var gridElement = $("#expensesheetpanel");
                gridElement.data("kendoPanelBar").expand($("li",gridElement.element)),
            win = window.open('', '', 'width=1000, height=500'),
            doc = win.document.open(),
            
            htmlStart =
                '<!DOCTYPE html>' +
                '<html>' +
                '<head>' +
                '<meta charset="utf-8" />' +
                '<title>' + ExpensesConstants.lbExpensesTitle + '</title>' +
                '<link href="' + ExpensesConstants.cssKendoCommon + '" rel="stylesheet" /> ' +
                '<link href="' + ExpensesConstants.cssKendoSilver + '" rel="stylesheet" /> ' +
                '<link href="' + ExpensesConstants.cssQttlayout + '" rel="stylesheet" type="text/css"> ' +
                '<link href="' + ExpensesConstants.cssQttprintreports + '" rel="stylesheet" type="text/css"> ' +
                '</head>' +
                '<body>',
            htmlEnd =
                '</body>' +
                '</html>';
            var decodedAddress = $('<div></div>').html(ExpensesConstants.lbCompanyAdress).text();
            
            doc.write(htmlStart + gridElement.clone()[0].outerHTML + htmlEnd);
     
            doc.close();
            win.print();
        }​

     

    Please help me!

    Many Thanks.

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 16 Sep 2015 Link to this post

    Hello,

    You could temporarily change the expandMode option and expand all items while printing e.g.
    var panelbar =  $("#expensesheetpanel").data("kendoPanelBar");
     
    var items = panelbar.element.children();
    var expanded = items.filter(".k-state-active");
    panelbar.setOptions({
        expandMode: "multiple"
    });
    panelbar.expand(items, false);
     
    //print
     
    panelbar.setOptions({
        expandMode: "single"
    });
    panelbar.collapse(items.not(expanded), false);


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top