Using collapsible blocks in reports

A convenient representation of large amounts of information is an important aspect of interface development. This article describes using collapsible blocks with .NET Razor. To learn more about creating reports, see this article. 

To start working, open the Display Settings tab and select .NET Razor in the Report Layout unit. Open the Report Layout tab. No need to do everything manually, there is Template Wizard in the toolbar (to learn more about the wizard, read Help), which helps you generate the basic code of the layout, that will look like this:

Collapsible blocks

Let's hide some information in a collapsible block.

First, add the namespace:

@using EleWise.ELMA.Web.Mvc.Models.Panels

 And then code:

@using (Html.CollapsiblePanel(new CollapsiblePanel
                {
                    Header = "More",
                    Expanded = false,
                    Id = "CommentsFromCollapsiblePanel" + i.ToString(),
                    PlusMinus = true,                   
                    SaveState = false
                }))
                {
                    using (Html.ElmaForm())
                    {
                    }
                }

Inside {}, place everything you need to hide. Inside you can use standard html tags, such as <p></p> or <div></div>. The line Header = "More" contains the name of the collapsible block. This structure must be used inside the @foreach cycle.

To add a collapsible block to each entry, a counter is required. A variable must be declared just before the @foreach cycle:

@{int i=0;}

Inside the cycle, the counter must be incremented: i++;

The whole code looks like this:

@using EleWise.ELMA.BPM.Web.Reports.Extensions
@using System.Data
@using EleWise.ELMA.Web.Mvc.Html
@model EleWise.ELMA.BPM.Web.Reports.Models.ReportParametersInfo
@using EleWise.ELMA.Web.Mvc.Models.Panels
 
@{
    //Get a data source by name
    var data = Model.DataSources["Data"];
    //Execute the HQL or SQL query from the data source and get the result
    DataTable items = data.Get();
}
 
 
 
 
<style>
.list th {
    background: none repeat scroll 0 0 #666666;
    color: #FFFFFF;
    padding: 5px;
    text-align: left;
}
.list td {
    border-bottom: 1px solid #CCCCCC;
    padding: 3px 5px;
    vertical-align: middle;
}
</style>
 
   
<div>
<p style="font-size:20px; text-align:center;"></p>
 
@* Enables per-page display of the data source *@
@(Html.Pager(Model, data))
@* Report column headers. The column names are taken from the column names of the table with the result of the data source execution *@
 
<table class="list" width="100%" style="margin-top: 10px; font-size: 11px;">
    <tr>
         
        <th scope="col">Name</th>
         
    </tr>
@{int i=0;}
    @* The data source execution result is a table. Go through the table columns and display the column values *@
    @foreach (DataRow row in items.Rows)
    { 
    i++;
        <tr valign="top">
            
            <td >
                @row["Name"]                
                @using (Html.CollapsiblePanel(new CollapsiblePanel
                {
                    Header = "More",
                    Expanded = false,
                    Id = "CommentsFromCollapsiblePanel" + i.ToString(),
                    PlusMinus = true,                   
                    SaveState = false
                }))
                {
                    using (Html.ElmaForm())
                    {
                        <p>Author: @Url.EntityLink(row,typeof(EleWise.ELMA.Security.Models.IUser),"AuthorID","UsFullName",true)</p>
                        <p>Executor: @Url.EntityLink(row,typeof(EleWise.ELMA.Security.Models.IUser),"Executor","FullName",true)</p>
                        <p>Due date: @row["EDate"]</p>
                        <p><a href="/Tasks/Task/Execute/@row["Id"].ToString()">Go to task</a></p>
                    }
                }
            </td>
            
 
        </tr>
     
     
    }
</table>
 
 
</div>

The report will look like this: 

To highlight the collapsible block, you can place it inside the <div></div> tags and specify the required attributes.

As an example, a new style for the <div> tag was added to <style></style>:

.brd {
    border: 1px solid #CCCCCC;
    background: #D6E5F3;
    color: black; 
    font-size: 9px;
   }

The resulting code looks like this:

<div class="brd">
@using (Html.CollapsiblePanel(new CollapsiblePanel
                {
                    Header = "More",
                    Expanded = false,
                    Id = "CommentsFromCollapsiblePanel" + i.ToString(),
                    PlusMinus = true,                   
                    SaveState = false
                }))
                {
                    using (Html.ElmaForm())
                    {
                        <p>Author: @Url.EntityLink(row,typeof(EleWise.ELMA.Security.Models.IUser),"AuthorID","UsFullName",true)</p>
                        <p>Executor: @Url.EntityLink(row,typeof(EleWise.ELMA.Security.Models.IUser),"Executor","FullName",true)</p>
                        <p>Due date: @row["EDate"]</p>
                        <p><a href="/Tasks/Task/Execute/@row["Id"].ToString()">Go to task</a></p>
                    }
                }
</div>

The finished report with a collapsible block looks like this: