Exporting Tree Grid in Server

6 Dec 20247 minutes to read

The Tree Grid have an option to export the data to PDF in server side using tree grid server export library.

Server dependencies

The Server side export functionality is shipped in the Syncfusion.EJ2.TreeGridExport package, which is available in Essential Studio® and nuget.org.The following list of dependencies is required for tree grid server side PDF exporting action.

  • Syncfusion.EJ2
  • Syncfusion.EJ2.TreeGridExport

Server configuration

The following code snippet shows server configuration using ASP.NET Core Controller Action.

To Export the tree grid in server side, You need to call the serverPdfExport method for passing the tree grid properties to server exporting action.

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
    {
        col.Field("TaskId").HeaderText("Task ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width("150").Add();
        col.Field("StartDate").HeaderText("Start Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
        col.Field("EndDate").HeaderText("End Date").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("Duration").HeaderText("Duration").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("Progress").HeaderText("Progress").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    }).AllowPdfExport().Toolbar(new List<string>() { "PdfExport" }).ToolbarClick("toolbarClick").Render()
)

<script>
    function toolbarClick(args) {
        var treeGridObj = document.getElementById("TreeGrid").ej2_instances[0];
        treeGridObj.serverPdfExport("@Url.Action("PdfExport", "TreeGrid")");
    }
</script>
public IActionResult ServerSideExporting()
{
    var order = TreeData.GetDefaultData();
    ViewBag.dataSource = order;
    return View();
}

public IActionResult PdfExport(string treeGridModel)
{
    if (treeGridModel == null)
    {
        return View();
    }
    TreeGridExcelExport exp = new TreeGridExcelExport();
    Syncfusion.EJ2.TreeGrid.TreeGrid gridProperty = ConvertTreeGridObject(treeGridModel);
    return exp.ExportToPdf<TreeData>(gridProperty, TreeData.GetDefaultData());
}
private Syncfusion.EJ2.TreeGrid.TreeGrid ConvertTreeGridObject(string gridProperty)
{
    Syncfusion.EJ2.TreeGrid.TreeGrid TreeGridModel = (Syncfusion.EJ2.TreeGrid.TreeGrid)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty, typeof(Syncfusion.EJ2.TreeGrid.TreeGrid));
    TreeGridColumnModel cols = (TreeGridColumnModel)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty, typeof(TreeGridColumnModel));
    TreeGridModel.Columns = cols.columns;
    return TreeGridModel;
}

public class TreeGridColumnModel
{
    public List<TreeGridColumn> columns { get; set; }
}

Rotate a header text to a certain degree in the exported tree grid on the server side

The Tree Grid has support to customize the column header styles such as changing text orientation, the font color, and so on in the exported PDF file. To achieve this requirement, define the BeginCellLayout event of the PdfExportProperties with an event handler to perform the required action.

The PdfHeaderCellRendering will be triggered when creating a column header for the pdf document to be exported. Collect the column header details in this event and handle the custom in the BeginCellLayout event handler.

In the following demo, the DrawString method from the Graphics is used to rotate the header text of the column header inside the BeginCellLayout event handler.

NOTE

A PDF exporting is not supported to rotate the column header on the client side.

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
    {
        col.Field("TaskId").HeaderText("Task ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width("150").Add();
        col.Field("StartDate").HeaderText("Start Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
        col.Field("EndDate").HeaderText("End Date").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("Duration").HeaderText("Duration").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("Progress").HeaderText("Progress").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    }).AllowPdfExport().Toolbar(new List<string>() { "PdfExport" }).ToolbarClick("toolbarClick").Render()
)

<script>
    function toolbarClick(args) {
        var treeGridObj = document.getElementById("TreeGrid").ej2_instances[0];
        treeGridObj.serverPdfExport("@Url.Action("PdfExport", "TreeGrid")");
    }
</script>
public IActionResult PdfExport(string treeGridModel)
{
    if (treeGridModel == null)
    {
        return View();
    }
    TreeGridPdfExport exp = new TreeGridPdfExport();
    TreeGrid gridProperty = ConvertTreeGridObject(treeGridModel);
    gridProperty.PdfHeaderCellRendering = PdfHeaderQueryCellInfo;
    PdfGrid grid = new PdfGrid();
    Syncfusion.EJ2.TreeGridExport.PdfExportProperties pdfExportProperties = new Syncfusion.EJ2.TreeGridExport.PdfExportProperties();
    pdfExportProperties.IsRepeatHeader = true;
    exp.BeginCellLayout = new PdfGridBeginCellLayoutEventHandler(BeginCellEvent);
    System.Collections.IEnumerable data = Syncfusion.EJ2.Base.Dat.DataTableToJson(ViewBag.dataSource);
    var result = exp.PdfExport<dynamic>(gridProperty, data, pdfExportProperties);
    return View();
}

public void BeginCellEvent(object sender, PdfGridBeginCellLayoutEventArgs args)
{
    PdfGrid grid = (PdfGrid)sender;
    var brush = new PdfSolidBrush(new PdfColor(Color.DimGray));
    args.Graphics.Save();
    args.Graphics.TranslateTransform(args.Bounds.X + 50, args.Bounds.Height + 40); // give the value for bounds x and Y by the user
    args.Graphics.RotateTransform(-60);   // give the rotate degree value by the user
                                          // Draw the text at particular bounds.
    args.Graphics.DrawString(headerValues[args.CellIndex], new PdfStandardFont(PdfFontFamily.Helvetica, 10), brush, new PointF(0, 0));
    if (args.IsHeaderRow)
    {
        grid.Headers[0].Cells[args.CellIndex].Value = string.Empty;
    }
    args.Graphics.Restore();
}

private void PdfHeaderQueryCellInfo(object pdf)
{
    Syncfusion.EJ2.TreeGridExport.PdfHeaderCellEventArgs name = (Syncfusion.EJ2.TreeGridExport.PdfHeaderCellEventArgs)pdf;
    PdfGrid grid = new PdfGrid();
    headerValues.Add(name.Column.HeaderText);
    var longestString = headerValues.Where(s => s.Length == headerValues.Max(m => m.Length)).First();
    PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 6);
    SizeF size = font.MeasureString(longestString);
    name.Headers[0].Height = size.Width * 2;
}