Radgrid printing when grid width exceeds page and screen width

1 Answer 26 Views
Ajax Grid
n/a
Top achievements
Rank 1
n/a asked on 11 Jan 2022, 08:41 PM
Is there a way to print a radgrid across multiple sheets when it has horizontal scrolling, i.e. has more columns than can be rendered on the screen at one time or on a single page when rendered to print even in landscape mode? 

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 14 Jan 2022, 01:03 PM

Hi Thomas,

There is no built-in way to achieve this since a large content that is bigger than the Screen resolution will fall into the limitation of the Browser's Print functionality.

You can, however, create your own print functionality and scale the content down so it will fit the Page.

In that custom functionality, you will also need to remove any scrolling that is applied to the Grid so that every element is visible. Only visible elements can be printed.

 

Here is an example of that Function:

<script>
    function printRadGrid(sender, args) {
        var grid = $find('<%= RadGrid1.ClientID %>');

        if (!grid.ClientSettings.EnableClientPrint) return false;

        var kendo = window.kendo;
        var $printingContainer;
        var printWindow = window.open();

        if (!printWindow) return false;

        $printingContainer = $telerik.$("<div>");

        // Clone the Grid in order to leave the Original intact
        var $gridClone = $(grid.get_element()).clone();

        // Create a temporary element and add it to the Form
        var $temporaryContainer = $('<div></div>').appendTo($('body form'));

        // Add the Grid Clone to the Temp container
        $temporaryContainer.append($gridClone);

        var $dataDiv = $gridClone.find('.rgDataDiv');

        if ($dataDiv.length > 0) {
            // Get the Rects (dimensions) of the CommandItem, Header and Grid data elements
            var commandItemRects = $gridClone.find('table[id$="TopPager"]')[0].getBoundingClientRect();
            var headerWrapperRects = $gridClone.find('.rgHeaderWrapper')[0].getBoundingClientRect();
            var dataDivRects = $dataDiv.find('.rgMasterTable')[0].getBoundingClientRect();

            var totalWidth = dataDivRects.width;
            var totalHeight = dataDivRects.height + commandItemRects.height + headerWrapperRects.height;

            // Disable the Scrolling by removing the overflow
            $dataDiv.css({ 'overflow': 'visible' });

            // Change the Grid's width and height to match the total width nad height of the Grid Data content
            $gridClone.css({ 'width': totalWidth + 'px', 'height': totalHeight + 'px' });
        }

        kendo.drawing.drawDOM($gridClone[0], {
            scale: 0.34 // Default: 1, decrease the scaling to fit all the content
        }).then(function (group) {
            return kendo.drawing.Surface.create($printingContainer).draw(group);
        }).done(function (data) {

            // Add a Title for the document
            $(printWindow.document).find('head').append('<title>My Title</title>');

            // Attach the CSS styles to the Printable document
            $(printWindow.document).find('head').append($(grid._getHeadLinksForPrint()));

            // Add the Grid HTML structure
            $(printWindow.document).find('body').html($printingContainer.get(0).innerHTML);

            // Remove additional spacing and make the Printable document height to 100%
            $(printWindow.document).find('body').css({ 'margin': '0', 'padding': '0', 'height': '100%' });

            // Pop the Browser's Print Functionality
            setTimeout(function () {
                printWindow.print();
            }, 1);

            // Remove the temporary elements
            $printingContainer.remove();
            $temporaryContainer.remove();
        });
    }

    // If you wanted the built-in print button to do the same
    // override the internal JavaScript and make it call the print Function above
    if (Telerik.Web.UI.RadGrid) {
        Telerik.Web.UI.RadGrid.prototype.print = function () {
            // Call the print function
            printRadGrid();
        }
    }
</script>

 

You can test this code with the following Grid:

<h3>Custom Button For Printing</h3>
<telerik:RadButton runat="server" ID="RadButton1" Text="Print" AutoPostBack="false" OnClientClicked="printRadGrid" />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="false" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="true" CommandItemDisplay="Top" TableLayout="Fixed">
        <HeaderStyle Width="80px" />
        <CommandItemSettings ShowPrintButton="true" />
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>

 

C# for data binding

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = OrdersTable();
}

private DataTable OrdersTable()
{
    DataTable dt = new DataTable();

    for (int i = 0; i < 20; i++)
    {
        var colIndex = i + 1;
        dt.Columns.Add(new DataColumn("Col" + colIndex, typeof(string)));
    }

    dt.PrimaryKey = new DataColumn[] { dt.Columns[0] };

    for (int i = 0; i < 30; i++)
    {
        var rowIndex = i + 1;
        DataRow row = dt.NewRow();

        foreach (DataColumn col in dt.Columns)
        {
            row[col.ColumnName] = string.Format("Col {0}, Row {1}", dt.Columns.IndexOf(col) + 1, rowIndex);
        }

        dt.Rows.Add(row);
    }

    return dt;
}

 

You can use this a base idea and modify it as needed.

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Ajax Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or