Skip to content

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, Run, Severity, Project, Directory, File, Location, Rule ID, Rule Name, 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.
  • User customizations persisted in local storage.
  • Paged view.
  • Infinite scrolling.
  • 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
  • The template ships with DevExtreme version 23.1, which was available under a non-commercial license. Some features in the template require a never version and a commercial License to be set. See Using commercial version for examples.

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

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

Using commercial version

The template ships with DevExtreme version 23.1, which was available under a non-commercial license. To use a never version a commercial License is required.

To use the template with a never version and commercial license the following options need to be set:

CreateIssueReport(
    issues,
    GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings
            .WithOption(
                HtmlDxDataGridOption.DevExtremeLicenseKey,
                "<LICENSE_KEY>")
            .WithOption(
                HtmlDxDataGridOption.DevExtremeVersion,
                "23.2")),
    @"c:\repo",
    @"c:\report.html");

context.CreateIssueReport(
    issues,
    context.GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings
            .WithOption(
                HtmlDxDataGridOption.DevExtremeLicenseKey,
                "<LICENSE_KEY>")
            .WithOption(
                  HtmlDxDataGridOption.DevExtremeVersion,
                  "23.2")),
    @"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");

context.CreateIssueReport(
    issues,
    context.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.

context.CreateIssueReport(
    issues,
    context.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.RuleId })
            .WithOption(
                HtmlDxDataGridOption.RuleIdSortOrder,
                ColumnSortOrder.Descending )),
    @"c:\repo",
    @"c:\report.html");

context.CreateIssueReport(
    issues,
    context.GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings
            .WithOption(
                HtmlDxDataGridOption.SortedColumns,
                new List<ReportColumn> { ReportColumn.RuleId })
            .WithOption(
                HtmlDxDataGridOption.RuleIdSortOrder, 
                ColumnSortOrder.Descending )),
    @"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.RuleId })),
    @"c:\repo",
    @"c:\report.html");

context.CreateIssueReport(
    issues,
    context.GenericIssueReportFormatFromEmbeddedTemplate(
        GenericIssueReportTemplate.HtmlDxDataGrid,
        settings => settings
            .WithOption(
                HtmlDxDataGridOption.GroupedColumns, 
                new List<ReportColumn> { ReportColumn.RuleId })),
    @"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");

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

State persistence

By default customizations made by the user are persisted and re-applied next time the report is shown. If multiple reports are created, or Cake Issues is used in multiple repositories, all reports share by default the same storage.

This can be changed per generated report using the HtmlDxDataGridOption.StorageKey option. Persistance can be disabled using the HtmlDxDataGridOption.PersistState option.

Other features

Source Code

Tip

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

Source code is available on GitHub.