HTML DevExtreme Data Grid

Template for a HTML report containing a rich data grid with sorting, filtering, grouping and search capabilities powered by DevExtreme.

Features

• Table with Provider, Severity, Project, Path, File, Location, Rule, Message by default.
• Support for grouping by multiple columns by user.
• Total number of issues by each group level.
• Each column sortable by user.
• Data can be filtered by any column by user.
• Paged view.
• Client-side full text search.
• Client-side export to Microsoft Excel or PDF.
• Fully customizable through options.

Requirements

• Cake.Issues.Reporting.Generic 0.3.1 or higher

Usage

To create a report using the HTML DevExtreme Data Grid template you can use the GenericIssueReportTemplate.HtmlDxDataGrid enum value:

CreateIssueReport(
    issues,
    GenericIssueReportFormatFromEmbeddedTemplate(GenericIssueReportTemplate.HtmlDxDataGrid),
    @"c:\repo",
    @"c:\report.html");

Options

See HtmlDxDataGridOption for a list of possible options.

Demos

The following demo shows the template with its default options:

• Default (Source Code)

Themes

The template supports the teams defined in the DevExtremeTheme enumeration which can be set using the HtmlDxDataGridOption.Theme:

CreateIssueReport(
    issues,
    GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings.WithOption(HtmlDxDataGridOption.Theme, DevExtremeTheme.MaterialBlueLight)),
    @"c:\repo",
    @"c:\report.html");

• Light Theme (Source Code)
• Dark Theme (Source Code)
• Contrast Theme (Source Code)
• Carmine Theme (Source Code)
• Dark Moon Theme (Source Code)
• Soft Blue Theme (Source Code)
• Dark Violet Theme (Source Code)
• Green Mist Theme (Source Code)
• Light Compact Theme (Source Code)
• Dark Compact Theme (Source Code)
• Contrast Compact Theme (Source Code)
• Material Blue Light Theme (Source Code)
• Material Lime Light Theme (Source Code)
• Material Orange Light Theme (Source Code)
• Material Purple Light Theme (Source Code)
• Material Teal Light Theme (Source Code)
• Material Blue Dark Theme (Source Code)
• Material Lime Dark Theme (Source Code)
• Material Orange Dark Theme (Source Code)
• Material Purple Dark Theme (Source Code)
• Material Teal Dark Theme (Source Code)
• Material Blue Light Compact Theme (Source Code)
• Material Lime Light Compact Theme (Source Code)
• Material Orange Light Compact Theme (Source Code)
• Material Purple Light Compact Theme (Source Code)
• Material Teal Light Compact Theme (Source Code)
• Material Blue Dark Compact Theme (Source Code)
• Material Lime Dark Compact Theme (Source Code)
• Material Orange Dark Compact Theme (Source Code)
• Material Purple Dark Compact Theme (Source Code)
• Material Teal Dark Compact Theme (Source Code)

Column visibility

Visible columns can be defined using the ColumnNameVisible option:

CreateIssueReport(
    issues,
    GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings.WithOption(HtmlDxDataGridOption.LineVisible, false)),
    @"c:\repo",
    @"c:\report.html");

Additional columns can be added using the HtmlDxDataGridOption.AdditionalColumns option.

• Show and hide columns (Source Code)
• Add additional columns (Source Code)

Sorting

Sorted columns can be defined using the HtmlDxDataGridOption.SortedColumns and the ColumnNameSortOder options:

CreateIssueReport(
    issues,
    GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings
            .WithOption(HtmlDxDataGridOption.SortedColumns, new List<ReportColumn> { ReportColumn.RuleId })
            .WithOption(HtmlDxDataGridOption.RuleIdSortOder, ColumnSortOderDescending )),
    @"c:\repo",
    @"c:\report.html");

• Change sorting (Source Code)

Grouping

Grouping can be defined using the HtmlDxDataGridOption.GroupedColumns option:

CreateIssueReport(
    issues,
    GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings.WithOption(HtmlDxDataGridOption.GroupedColumns, new List<ReportColumn> { ReportColumn.RuleId })),
    @"c:\repo",
    @"c:\report.html");

• Change grouping (Source Code)
• Disable grouping (Source Code)

Exporting

Exporting can be enabled using the HtmlDxDataGridOption.EnableExporting option:

CreateIssueReport(
    issues,
    GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings.WithOption(HtmlDxDataGridOption.EnableExporting, true)),
    @"c:\repo",
    @"c:\report.html");

• Enable exporting (Source Code)
• Microsoft Excel export (*.xlsx) (Source Code)
• PDF export (*.pdf) (Source Code)
• Custom export file name (Source Code)

Other features

• Change title (Source Code)
• Disable header (Source Code)
• Disable filtering (Source Code)
• Disable searching (Source Code)
• Custom script location and version (Source Code)

Source Code

Info

You can use the source code as a template for your custom template.

Source code is available on GitHub.