Radgrid printing when grid width exceeds page and screen width

[n/a]

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? 

[Attila Antal]

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