PDF Cell Style Customization

21 Dec 20226 minutes to read

Conditional cell formatting

TreeGrid cells in the exported PDF can be customized or formatted using PdfQueryCellInfo event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value.

In the below sample, we have set the background color for Duration column in the exported document by args.cell and backgroundColor property.

CSHTML

@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "PdfExport" })
         .AllowPdfExport().AllowPaging().PageSettings(page => page.PageSize(7)).ToolbarClick("toolbarClick")
         .QueryCellInfo("queryCellInfo").PdfQueryCellInfo("pdfQueryCellInfo").Render()
)

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'PDF Export') {
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            treegrid.pdfExport();
        }
    }
    function queryCellInfo(args) {
        if (args.data['Duration'] == 0 && args.column.field === 'Duration') {
            args.cell.style.background = '#336c12';
        } else if (args.data['Duration'] < 3 && args.column.field === 'Duration') {
            args.cell.style.background = '#7b2b1d';
        }

    }
    function pdfQueryCellInfo(args) {
        if (args.column.field == 'Duration') {
            if (+args.value === 0 || args.value === "") {
                args.style = { backgroundColor: '#336c12' };
            }
            else if (args.value < 3) {
                args.style = { backgroundColor: '#7b2b1d' };
            }
        }

    }
</script>

Conditional-cell.cs

public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Theme

PDF export provides an option to include theme for exported PDF document.

To apply theme in exported PDF, define the theme in PdfExportProperties.

CSHTML

@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "PdfExport" })
         .AllowPdfExport().AllowPaging().PageSettings(page => page.PageSize(7)).ToolbarClick("toolbarClick")
         .Render()
)

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'PDF Export') {
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            var exportProperties = {
                theme: {
                    header: {
                        fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true, border: { color: '#64FA50', lineStyle: 'Thin' }
                    },
                    record: {
                        fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true
                    }
                }
            };
            treegrid.pdfExport(exportProperties);
        }
    }

</script>

Theme.cs

public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

By default, material theme is applied to exported PDF document.

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.