New to Telerik Reporting? Download free 30-day trial

Customizing Report Parameters Area in Web Report Designer using CSS and JavaScript

Environment

Version Product Author
18.3.24.1112 Telerik Web Report Designer Desislava Yordanova

Description

Customizing the style of the report parameters area and highlighting selections can enhance the usability and visual appeal of the Web Report Designer. This article demonstrates how to adjust the layout of CheckBox parameters and apply a darker color to selected items in the parameters area.

This knowledge base article explains how to customize the parameters area in the Web Report Designer using CSS and JavaScript.

Solution

Let's start with a sample report that offers IsActive and IsChecked Boolean report parameters. They are presented as checkboxes in the Web Report Designer:

Default CheckBox Parameter Style

However, the checkmark is displayed below the header text. If you want to align horizontally the checkmark next to the text, it is necessary to:

  1. Modify the webReportDesigner.html and insert the following JavaScript in the <script type="text/javascript"> section. This script utilizes the viewerInitializing event to apply CSS Flex Container styling to CheckBox parameters.

    The **viewerInitializing** event is used to add the `reportViewerOptions.pageReady` event handler that accesses the checkboxes by using the style class ".trv-parameter-editor-boolean" and apply the CSS Flex Container: 
    
    <div class='tabbedCode'><pre lang="JavaScript"><code>&lt;script type="text/javascript"&gt;
            function onViewerInitializing(e, args) {
                args.reportViewerOptions.pageReady = (e, args) =&gt; {   
                    $(".trv-parameter-editor-boolean").parent().parent().parent().css("display", "flex"); 
                };
            }
            $(document).ready(function () {
    
                // For a complete overview over all the options used to initialize Web Report Designer, check:
                // https://docs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/web-report-designer-initialization
                $("#webReportDesigner").telerik_WebReportDesigner({
                    toolboxArea: {
                        layout: "list" //Change to "grid" to display the contents of the Components area in a flow grid layout.
                    },
                    serviceUrl: "api/reportdesigner/",
                    report: "Reportbool.trdp",
                    viewerInitializing: onViewerInitializing,
                    startMode: "design", // Change to "preview" to start the designer in a preview mode
                }).data("telerik_WebDesigner");
            });
    &lt;/script&gt;
    ````
    

    Now, the checkmark is displayed on the same horizontal line:

    ![Flex Display Applied](images/wrd-flex-display-checkbox-style.png)   
    
  2. To bring the CheckBox closer to its header text, add the following CSS in the <head> of your HTML file for the Web Report Designer:

    <div class='tabbedCode'><pre lang="CSS"><code>&lt;style&gt;
        #webReportDesigner .trv-parameter-header {
            width: auto;
            margin-right: 15px;
        }
    &lt;/style&gt;
    ````
    

    Text Checkmark Margin Applied

  3. To highlight the selected listview items, extend the CSS style further:

    <div class='tabbedCode'><pre lang="CSS"><code>&lt;style&gt;
        #webReportDesigner .trv-parameter-header {
            width: auto;
            margin-right: 15px;
        }
        #webReportDesigner .trv-listviewitem.k-listview-item.k-selected {
            background-color: rgba(255, 99, 88, 0.25); /* Adjust the RGB color as desired */
        }
    &lt;/style&gt;
    ````
    

    List Item Selection Highlight Applied

To identify the CSS class, feel free to inspect the respective HTML element on the page:

Inspect CSS Class

Replace #webReportDesigner with the actual ID of your Web Report Designer element if it differs.

These adjustments will improve the layout and visual feedback in the parameters area of the Web Report Designer. Inspect the HTML elements to identify specific CSS classes if further customization is needed.

See Also

In this article