HTML DevExtreme Data Grid

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

HTML DevExtreme Data Grid

Features

  • Table with Provider, Severity, Project, Path, File, Line, 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.
  • 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:

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");

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.

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.Rule })
            .WithOption(HtmlDxDataGridOption.RuleSortOder, ColumnSortOderDescending )),
    @"c:\repo",
    @"c:\report.html");

Grouping

Grouping can be defined using the HtmlDxDataGridOption.GroupedColumns option:

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

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");

Other features

Source Code

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

Source code is available on GitHub.

GitHub