New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Export HTML content into Docx


Product Telerik WebForms Grid for ASP.NET AJAX


There are cases when the data bound to RadGrid contains html tags, which is rendered as expected on the page.

Example datatable with data containing HTML tags:

Data containing HTML tags

Data renderd on the page:

Rendered data

There would be no issues if the exporting was done into Html based Word document (.doc). All it takes is to define Html for the export format (Export Settings -> Word Format -> Html.)

    <Word Format="Html" />

Rendered data in .doc

In our case, however, XML Based Word Document (.docx) is the required format. Changing the Word Format to Docx, in the exported file, Html tags will be returned as string

Rendered data in .docx


Export the grid using HTML for Word Format, convert the Html to Docx using our Document Processing Libraries and then return the result in the Page response for download.

Set the Word format to HTML

    <Word Format="Html" />

Covnert the output to Docx using the GridExporting event.

protected void RadGrid1_GridExporting(object sender, GridExportingArgs e)
    if ((e.ExportType == ExportType.Word))
        RadFlowDocument document = new RadFlowDocument(); // Create a RadFlowDocument object

        HtmlFormatProvider htmlProvider = new HtmlFormatProvider(); // Importing the HTML output from the grid into the htmlProvider
        document = htmlProvider.Import(e.ExportOutput);

        byte[] data = null;

        foreach (Section section in document.EnumerateChildrenOfType<Section>()) 
            section.Rotate(PageOrientation.Landscape); // Changing the page orientation of all sections in a document

        using (MemoryStream ms = new MemoryStream()) // Export the final document (docx) into the MemoryStream
            DocxFormatProvider docxProvider = new DocxFormatProvider();
            docxProvider.Export(document, ms);
            data = ms.ToArray(); // Get the byte data of the document

        Response.ContentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; // Send the data in the response for download
        Response.AppendHeader("Content-Disposition", "attachment; filename=" + RadGrid1.ExportSettings.FileName + ".docx");
Protected Sub RadGrid1_GridExporting(sender As Object, e As GridExportingArgs)
    If (e.ExportType = ExportType.Word) Then
        '' Create a RadFlowDocument object
        Dim document As RadFlowDocument = New RadFlowDocument()

        '' Importing the HTML output from the grid into the htmlProvider
        Dim htmlProvider As HtmlFormatProvider = New HtmlFormatProvider()
        document = htmlProvider.Import(e.ExportOutput)

        Dim data As Byte() = Nothing

        '' Changing the page orientation of all sections in a document
        For Each section As Section In document.EnumerateChildrenOfType(Of Section)()

        '' export the final document (docx) into the MemoryStream
        Using ms As New MemoryStream()
            Dim docxProvider As DocxFormatProvider = New DocxFormatProvider()
            docxProvider.Export(document, ms)
            data = ms.ToArray() '' get the byte data of the document
        End Using

        '' send the data in the response for download
        Response.ContentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        Response.AppendHeader("Content-Disposition", "attachment; filename=" & RadGrid1.ExportSettings.FileName & ".docx")
    End If
End Sub


New rendered data in .docx

One more thing to adjust in here. Note, the cell borders are not present in the picture above. To overcome that, apply the desired style to the cells inside the PreRender event of RadGrid.

protected void RadGrid1_PreRender(object sender, EventArgs e)
    if (RadGrid1.IsExporting)
        foreach (TableHeaderCell headerCell in RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0].Cells) // Setting borders for the Header Cells
            headerCell.Style["border"] = "1px solid";

        foreach (GridDataItem dataItem in RadGrid1.Items) // Setting borders for the data cells
            foreach (GridTableCell cell in dataItem.Cells) 
                cell.Style["border"] = "1px solid";
Protected Sub RadGrid1_PreRender(sender As Object, e As EventArgs)
    If RadGrid1.IsExporting Then
        '' Setting borders for the Header Cells
        For Each headerCell As TableHeaderCell In RadGrid1.MasterTableView.GetItems(GridItemType.Header)(0).Cells
            headerCell.Style("border") = "1px solid"
        '' Setting borders for the data cells
        For Each dataItem As GridDataItem In RadGrid1.Items
            For Each cell As GridTableCell In dataItem.Cells
                cell.Style("border") = "1px solid"
    End If
End Sub

Final result

Formatted cells

In this article